/* Framework adaptation: Source relies on the browser's dl margins. The host
   preflight resets them; keep this default below every explicit class owner. */
:where(.feature-port_scope__ehEaA) dl { margin: revert; }
/* Restore Source inline SVG baseline defaults beneath explicit scene rules. */
:where(.feature-port_scope__ehEaA) svg { display: revert; vertical-align: revert; }
/* Audience Source links keep UA decoration beneath every authored link owner. */
:where(.feature-port_scope__ehEaA[data-audience-kind]) a { -webkit-text-decoration: revert; text-decoration: revert; }
/* The host's coarse 44px width lowers these flex items' intrinsic auto minimum.
   Restore Source label containment; retain the owning height and global targets. */
@media (pointer: coarse) and (max-width: 900px) {
  .feature-port_scope__ehEaA .sk-tl__tabs button { min-width: auto; }
  .feature-port_scope__ehEaA .tmail__att { min-width: auto; }
}
/* Original styles.css, in original cascade order. Body scoping and release font URLs/family isolation only. */
/* Quotes controls retain their Source sizing beneath host coarse-pointer defaults. */
@media (pointer: coarse) {
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jr__other { min-height: auto; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA #included .xlink { min-height: 0; min-width: 0; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .kview__tab { min-height: auto; min-width: auto; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .tmail__att { min-height: auto; }
}
/* These authored body links retain Source intrinsic sizing under the host coarse floor. */
@media (pointer: coarse) {
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-rec .xlink { min-height: auto; min-width: auto; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .cr-more .xlink { min-height: 0; min-width: 0; }
}
/* Responsive accessibility adaptation: allow the existing filename ellipsis and
   mail-body wrapping instead of clipping the attachment action at narrow widths. */
[data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .tmail__att { min-width: 0; }
/* Quotes: restore Source's compact jump links beneath the host's coarse-pointer floor. */
@media (pointer: coarse) {
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jumpbar a { min-height: 0; }
}
/* Current Source styles.css narrow-phone bar, scoped to the three feature ports. */
@media (max-width: 400px) {
  :is([data-feature-page="quotes-and-invoicing"], [data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA .mbar__text { font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 340px) {
  :is([data-feature-page="quotes-and-invoicing"], [data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA .mbar__text { display: none; }
  :is([data-feature-page="quotes-and-invoicing"], [data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA.js .mbar { padding: 6px; }
  :is([data-feature-page="quotes-and-invoicing"], [data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA .mbar .btn { flex: 1 1 auto; }
}
/* Retain the intended Source family fallback on these two authored check glyphs.
   Computed family names do not attest the used face; the platform difference remains recorded. */
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-ticks li::before,
[data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .bchip > b {
  font-family: "SendWork Port Inter", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* SendWork — coming-soon homepage · design prototype
   Type + colour: SendWork's live site (Fraunces 600 / Inter / Plus Jakarta Sans; #030F1E · #0B376C · #48ACC8).
   Composition: Lightship (via Mobbin) — inset rounded photo frames, centred statements, brand card + photo pairs,
   plus-grid panel, row lists. Story order: the owner's concept. */
@font-face { font-family: "SendWork Port Fraunces"; src: url("/fonts/sendwork-landing/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "SendWork Port Inter"; src: url("/fonts/sendwork-landing/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "SendWork Port UI"; src: url("/fonts/sendwork-landing/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "SendWork Port Hand"; src: url("/fonts/sendwork-landing/caveat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.feature-port_scope__ehEaA {
  /* SendWork live tokens */
  --ink: #030f1e;
  --navy: #0b376c;
  --sky: #48acc8;
  --sky-deep: #1f7a96;      /* sky as text on light backgrounds (AA) */
  --text: #2d3748;
  --text-2: #4a5568;
  --light: #f7f8fa;
  --panel-light: #eef1f5;
  --white: #ffffff;
  --on-ink: #ffffff;
  --on-ink-2: #b8c3d1;
  --line: rgba(11, 55, 108, .14);
  --line-ink: rgba(255, 255, 255, .12);

  --display: "SendWork Port Fraunces", Georgia, "Times New Roman", serif;
  --body: "SendWork Port Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui: "SendWork Port UI", "SendWork Port Inter", system-ui, sans-serif;
  --hand: "SendWork Port Hand", "Segoe Print", cursive;

  --inset: 10px;
  --r: 18px;
  --max: 1240px;
  /* text scales up on wide screens */
  --fs-body: clamp(16.5px, calc(9px + .6vw), 21px);
  --fs-sm: clamp(13.5px, calc(7.5px + .48vw), 17px);
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
.feature-port_scope__ehEaA *,
.feature-port_scope__ehEaA *::before,
.feature-port_scope__ehEaA *::after { box-sizing: border-box; }
.feature-port_scope__ehEaA { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; margin: 0; background: var(--light); color: var(--text); font-family: var(--body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.feature-port_scope__ehEaA img { display: block; max-width: 100%; height: auto; }
.feature-port_scope__ehEaA p,
.feature-port_scope__ehEaA h1,
.feature-port_scope__ehEaA h2,
.feature-port_scope__ehEaA h3,
.feature-port_scope__ehEaA figure,
.feature-port_scope__ehEaA blockquote { margin: 0; }
.feature-port_scope__ehEaA h1,
.feature-port_scope__ehEaA h2,
.feature-port_scope__ehEaA h3 { font-weight: inherit; }
.feature-port_scope__ehEaA ul,
.feature-port_scope__ehEaA ol { margin: 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.feature-port_scope__ehEaA a { color: inherit; }
.feature-port_scope__ehEaA [hidden] { display: none !important; }
.feature-port_scope__ehEaA :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.feature-port_scope__ehEaA .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feature-port_scope__ehEaA .skip { position: absolute; left: 12px; top: -60px; z-index: 99; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.feature-port_scope__ehEaA .skip:focus { top: 12px; }
.feature-port_scope__ehEaA img.is-missing { background: #13263b; }
/* ---------- shared ---------- */
.feature-port_scope__ehEaA .label { font-size: 15px; font-weight: 500; color: var(--text-2); }
.feature-port_scope__ehEaA .h2 { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.feature-port_scope__ehEaA .sky { color: var(--sky); }
.feature-port_scope__ehEaA .tri { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.feature-port_scope__ehEaA .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 22px; border-radius: 8px; font-family: var(--ui); font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, transform .2s var(--ease); }
.feature-port_scope__ehEaA .btn--sm { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
.feature-port_scope__ehEaA .btn--sky { background: var(--sky); color: var(--ink); }
.feature-port_scope__ehEaA .btn--sky:hover { background: #63bcd4; }
.feature-port_scope__ehEaA .btn--ink { background: var(--ink); color: var(--white); }
.feature-port_scope__ehEaA .btn--ink:hover { background: var(--navy); }
.feature-port_scope__ehEaA .btn--glass { background: rgba(255,255,255,.12); color: var(--white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.feature-port_scope__ehEaA .btn--glass:hover { background: rgba(255,255,255,.2); }
.feature-port_scope__ehEaA .btn:active { transform: translateY(1px); }
.feature-port_scope__ehEaA .linkbtn { min-height: 44px; font-family: var(--ui); font-weight: 700; font-size: 14.5px; color: var(--sky); text-decoration: underline; text-underline-offset: 4px; }
.feature-port_scope__ehEaA .linkbtn--ink { color: var(--navy); }
/* =========================================================
   HERO — inset rounded frame
   ========================================================= */
.feature-port_scope__ehEaA .hero { padding: var(--inset) var(--inset) 0; background: var(--light); }
.feature-port_scope__ehEaA .hero__frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); min-height: calc(100svh - var(--inset) - 34px); max-height: 980px; display: flex; flex-direction: column; color: var(--on-ink); background: var(--ink); }
.feature-port_scope__ehEaA .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 62% 45%); object-position: var(--pos, 62% 45%); z-index: -2; transform-origin: 60% 42%; animation: feature-port_sw-zoom__9WFE7 34s cubic-bezier(.33, 0, .45, 1) infinite alternate; will-change: transform; }
/* Very slow push-in on the hero photo; paused off-screen, off entirely with reduced motion. */
@keyframes feature-port_sw-zoom__9WFE7 { from { transform: scale(1); } to { transform: scale(1.09); } }
.feature-port_scope__ehEaA .hero.is-off .hero__img { animation-play-state: paused; }
/* Sunset intro (JS + GSAP): the copy is there from the first moment and the sunset plays behind it —
   the photo's own low sun glows, sinks and fades while dusk (the shade) falls. .intro = the opening state;
   the shade starts at half strength so the headline reads over the glow. */
.feature-port_scope__ehEaA .hero__warm,
.feature-port_scope__ehEaA .hero__sun { position: absolute; pointer-events: none; z-index: -2; opacity: 0; }
.feature-port_scope__ehEaA .hero__warm { inset: 0; background: linear-gradient(100deg, rgba(255,176,92,.55) 0%, rgba(255,150,80,.22) 38%, rgba(255,140,70,0) 70%); mix-blend-mode: screen; }
.feature-port_scope__ehEaA .hero__sun { left: 2%; top: 28%; width: clamp(420px, 60vmax, 1100px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,247,222,.98) 0, rgba(255,226,160,.85) 3.5%, rgba(255,190,110,.5) 10%, rgba(255,150,80,.22) 26%, rgba(255,130,60,.08) 44%, rgba(255,120,60,0) 62%); }
.feature-port_scope__ehEaA .intro .hero__warm { opacity: .6; }
.feature-port_scope__ehEaA .intro .hero__sun { opacity: 1; }
.feature-port_scope__ehEaA .intro .hero__shade { opacity: .55; }
.feature-port_scope__ehEaA .intro .hero__img { filter: brightness(1.14) saturate(1.15); }
.feature-port_scope__ehEaA .intro .hero__kicker,
.feature-port_scope__ehEaA .intro .hero__h,
.feature-port_scope__ehEaA .intro .hero__row { opacity: 0; transform: translateY(10px); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .intro .hero__img { -o-object-position: var(--pos0, 4% 40%); object-position: var(--pos0, 4% 40%); } }
.feature-port_scope__ehEaA .hero__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(3,15,30,.82) 0%, rgba(3,15,30,.62) 34%, rgba(3,15,30,.18) 60%, rgba(3,15,30,0) 76%),
  linear-gradient(0deg, rgba(3,15,30,.94) 0%, rgba(3,15,30,.7) 34%, rgba(3,15,30,.2) 64%, rgba(3,15,30,.1) 100%),
  linear-gradient(180deg, rgba(3,15,30,.6) 0%, rgba(3,15,30,0) 22%); }
/* Night over the crew: a few stars twinkle in the top-left, under the nav, and now and then one shoots (JS).
   Fades out toward the photo; paused while the hero is off-screen; still with reduced motion. */
.feature-port_scope__ehEaA .hero__stars { position: absolute; left: 0; top: 76px; width: min(62%, 1000px); height: 52%; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(115% 100% at 0 0, #000 35%, transparent 100%); mask-image: radial-gradient(115% 100% at 0 0, #000 35%, transparent 100%);
  background-image: radial-gradient(1.3px 1.3px at 9% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 24% 52%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 38% 12%, #fff 50%, transparent),
    radial-gradient(1px 1px at 51% 70%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 66% 34%, #fff 50%, transparent), radial-gradient(1px 1px at 79% 8%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 92% 58%, #fff 50%, transparent), radial-gradient(1px 1px at 4% 84%, #fff 50%, transparent);
  background-size: 380px 260px; }
.feature-port_scope__ehEaA .hero__stars::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: 300px 210px; background-position: 90px 50px; animation: feature-port_sw-twinkle__AAJ3p 3.6s ease-in-out infinite alternate; }
.feature-port_scope__ehEaA .hero__stars > b:nth-child(1) { left: 5%; top: 8%; }
.feature-port_scope__ehEaA .hero__stars > b:nth-child(2) { left: 21%; top: 30%; }
.feature-port_scope__ehEaA .hero__stars > b:nth-child(3) { left: 37%; top: 5%; }
.feature-port_scope__ehEaA .hero__stars > b:nth-child(4) { left: 55%; top: 22%; }
.feature-port_scope__ehEaA .hero__stars > b:nth-child(5) { left: 11%; top: 58%; }
.feature-port_scope__ehEaA .hero__stars > b:nth-child(6) { left: 31%; top: 66%; }
.feature-port_scope__ehEaA .hero__stars > b:nth-child(7) { left: 70%; top: 6%; }
.feature-port_scope__ehEaA .hero.is-off .hero__stars::after,
.feature-port_scope__ehEaA .hero.is-off .hero__stars > b::before { animation-play-state: paused; }
/* the shooting star: its head leads (bright end), the tail grows behind it, then it burns out */
.feature-port_scope__ehEaA .hero__meteor { position: absolute; left: var(--mx, 48%); top: var(--my, 8%); width: 180px; height: 2px; margin-left: -180px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(214,234,255,.5) 65%, #fff); transform-origin: 100% 50%; filter: drop-shadow(0 0 4px rgba(200,228,255,.85)); }
.feature-port_scope__ehEaA .hero__meteor.is-go { animation: feature-port_sw-meteor__auY_P 1.05s cubic-bezier(.3, .1, .55, 1) forwards; }
@keyframes feature-port_sw-meteor__auY_P {
  0% { opacity: 0; transform: rotate(152deg) translateX(0) scaleX(.15); }
  12% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: rotate(152deg) translateX(420px) scaleX(1); }
}
.feature-port_scope__ehEaA .nav { display: flex; align-items: center; gap: 28px; padding: 22px clamp(18px, 3vw, 36px); }
.feature-port_scope__ehEaA .nav__logo img { width: 148px; height: auto; }
.feature-port_scope__ehEaA .nav__links { display: flex; gap: 26px; margin-left: 18px; font-family: var(--ui); font-weight: 600; font-size: 14.5px; }
.feature-port_scope__ehEaA .nav__links a { text-decoration: none; padding: 10px 0; opacity: .9; }
.feature-port_scope__ehEaA .nav__links a:hover { opacity: 1; }
.feature-port_scope__ehEaA .nav__right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.feature-port_scope__ehEaA .nav__locale { font-size: 14px; color: var(--on-ink-2); }
.feature-port_scope__ehEaA.js .nav__locale { display: none; }
/* Language picker: a real <select> laid over a styled label (works in the prototype). */
.feature-port_scope__ehEaA .lang { display: none; position: relative; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--white); background: rgba(3,15,30,.25); }
.feature-port_scope__ehEaA.js .lang { display: inline-flex; }
.feature-port_scope__ehEaA .lang:hover { border-color: rgba(255,255,255,.6); }
.feature-port_scope__ehEaA .lang:focus-within { outline: 3px solid var(--sky); outline-offset: 3px; }
.feature-port_scope__ehEaA .lang svg { flex: 0 0 auto; }
.feature-port_scope__ehEaA .lang__globe { width: 17px; height: 17px; opacity: .85; }
.feature-port_scope__ehEaA .lang__chev { width: 11px; height: 11px; opacity: .8; }
.feature-port_scope__ehEaA .lang__code { display: none; }
.feature-port_scope__ehEaA .lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; color: var(--ink); }
.feature-port_scope__ehEaA .hero__copy { flex: 1; display: flex; flex-direction: column; padding: clamp(8px, 2vh, 28px) clamp(18px, 3vw, 36px) clamp(24px, 3.4vw, 40px); }
.feature-port_scope__ehEaA .hero__kicker { margin-top: auto; }
.feature-port_scope__ehEaA .hero__h { margin-bottom: auto !important; }
.feature-port_scope__ehEaA .hero__row { margin-top: clamp(28px, 5vh, 64px); }
.feature-port_scope__ehEaA .hero__kicker { font-family: var(--ui); font-weight: 600; font-size: clamp(16px, calc(9px + .55vw), 21px); color: #e3e9f0;   /* soft white: sky is kept for "talking" and the midnight line */ }
.feature-port_scope__ehEaA .hero__h { font-family: var(--display); font-weight: 600; font-size: clamp(46px, min(8vw, 12.5svh), 132px); line-height: .98; letter-spacing: -.03em; margin: 14px 0 28px; max-width: 15ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.22); }
/* first sentence of the lede — see hookLede() in main.js */
.feature-port_scope__ehEaA .lede-hook.is-done .lw { color: var(--sky); }
.feature-port_scope__ehEaA .lede-mid { position: relative; white-space: nowrap; }
.feature-port_scope__ehEaA .lede-line { position: absolute; left: -3%; bottom: -0.3em; width: 106%; height: 0.5em; overflow: visible; fill: none; stroke: var(--sky); stroke-width: 2.6; stroke-linecap: round; }
.feature-port_scope__ehEaA .lede-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.feature-port_scope__ehEaA .lede-hook.is-done .lede-line path { stroke-dashoffset: 0; }
.feature-port_scope__ehEaA .hero__lede { max-width: 34em; font-size: clamp(17px, calc(10px + .6vw), 22px); line-height: 1.55; color: #e3e9f0; }
/* "Coming soon" and its line, with the one button to their right */
.feature-port_scope__ehEaA .hero__act { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
/* Short laptop screens (e.g. 1366×768 → ~657px of page): long market headlines wrap to four lines, so the headline
   scales with the height and the hero tightens — the "Coming soon" ask stays above the fold. Tall screens are unchanged. */
@media (min-width: 901px) and (max-height: 860px) {
  .feature-port_scope__ehEaA .nav { padding-top: 16px; padding-bottom: 16px; }
  .feature-port_scope__ehEaA .hero__h { font-size: clamp(42px, min(7vw, 10svh), 120px); margin: 8px 0 18px; }
  .feature-port_scope__ehEaA .hero__row { margin-top: 16px; padding-top: 18px; }
  .feature-port_scope__ehEaA .hero__copy { padding-bottom: 22px; }
}
/* The hero's ask, in SendWork's own language — a voice note: a mic, the words, and now and then a
   waveform running through the button as if it were being spoken. "Coming soon" carries a small live
   voice-level meter. Paused while the hero is off-screen; still with reduced motion. */
.feature-port_scope__ehEaA .hero__claim { position: relative; isolation: isolate; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 0 24px 0 7px; border-radius: 999px; background: var(--sky); color: var(--ink);
  font-family: var(--ui); font-weight: 800; font-size: clamp(15.5px, calc(9px + .45vw), 17.5px); text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 34px rgba(72,172,200,.28), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .25s var(--ease), box-shadow .25s, background-color .2s; }
.feature-port_scope__ehEaA .hero__claim:hover { background: #63bcd4; transform: translateY(-1px); box-shadow: 0 16px 40px rgba(72,172,200,.38), inset 0 1px 0 rgba(255,255,255,.45); }
.feature-port_scope__ehEaA .hero__claim:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.feature-port_scope__ehEaA .claim__mic { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--sky); }
.feature-port_scope__ehEaA .claim__mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.feature-port_scope__ehEaA .claim__mic svg rect { fill: currentColor; stroke: none; }
.feature-port_scope__ehEaA .claim__mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(3,15,30,.4); opacity: 0; animation: feature-port_sw-listen__f2WHg 3.4s ease-out 1.2s infinite; }
.feature-port_scope__ehEaA .claim__arrow { transition: transform .25s var(--ease); }
.feature-port_scope__ehEaA .hero__claim:hover .claim__arrow { transform: translateX(4px); }
.feature-port_scope__ehEaA .claim__wave { position: absolute; z-index: -1; left: 56px; right: 14px; top: 9px; bottom: 9px; opacity: .16; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' fill='%23030f1e'%3E%3Crect x='1' y='12' width='3' height='15' rx='1.5'/%3E%3Crect x='7' y='12' width='3' height='16' rx='1.5'/%3E%3Crect x='13' y='8' width='3' height='24' rx='1.5'/%3E%3Crect x='19' y='11' width='3' height='18' rx='1.5'/%3E%3Crect x='25' y='6' width='3' height='27' rx='1.5'/%3E%3Crect x='31' y='7' width='3' height='25' rx='1.5'/%3E%3Crect x='37' y='9' width='3' height='21' rx='1.5'/%3E%3Crect x='43' y='6' width='3' height='28' rx='1.5'/%3E%3Crect x='49' y='10' width='3' height='20' rx='1.5'/%3E%3Crect x='55' y='7' width='3' height='25' rx='1.5'/%3E%3Crect x='61' y='11' width='3' height='18' rx='1.5'/%3E%3Crect x='67' y='12' width='3' height='16' rx='1.5'/%3E%3Crect x='73' y='11' width='3' height='18' rx='1.5'/%3E%3Crect x='79' y='10' width='3' height='19' rx='1.5'/%3E%3Crect x='85' y='15' width='3' height='10' rx='1.5'/%3E%3Crect x='91' y='15' width='3' height='9' rx='1.5'/%3E%3Crect x='97' y='12' width='3' height='15' rx='1.5'/%3E%3Crect x='103' y='9' width='3' height='21' rx='1.5'/%3E%3Crect x='109' y='9' width='3' height='21' rx='1.5'/%3E%3Crect x='115' y='9' width='3' height='21' rx='1.5'/%3E%3Crect x='121' y='4' width='3' height='31' rx='1.5'/%3E%3Crect x='127' y='10' width='3' height='19' rx='1.5'/%3E%3Crect x='133' y='3' width='3' height='33' rx='1.5'/%3E%3Crect x='139' y='8' width='3' height='24' rx='1.5'/%3E%3Crect x='145' y='9' width='3' height='22' rx='1.5'/%3E%3Crect x='151' y='9' width='3' height='21' rx='1.5'/%3E%3Crect x='157' y='8' width='3' height='23' rx='1.5'/%3E%3Crect x='163' y='6' width='3' height='28' rx='1.5'/%3E%3Crect x='169' y='11' width='3' height='17' rx='1.5'/%3E%3Crect x='175' y='10' width='3' height='20' rx='1.5'/%3E%3Crect x='181' y='11' width='3' height='17' rx='1.5'/%3E%3Crect x='187' y='14' width='3' height='11' rx='1.5'/%3E%3Crect x='193' y='14' width='3' height='11' rx='1.5'/%3E%3Crect x='199' y='15' width='3' height='10' rx='1.5'/%3E%3Crect x='205' y='13' width='3' height='13' rx='1.5'/%3E%3Crect x='211' y='11' width='3' height='17' rx='1.5'/%3E%3Crect x='217' y='7' width='3' height='25' rx='1.5'/%3E%3Crect x='223' y='8' width='3' height='24' rx='1.5'/%3E%3Crect x='229' y='8' width='3' height='24' rx='1.5'/%3E%3Crect x='235' y='5' width='3' height='29' rx='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent); mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  -webkit-mask-size: 45% 100%; mask-size: 45% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: -150% 0; mask-position: -150% 0;
  animation: feature-port_sw-speak__VTmqk 6.5s cubic-bezier(.45, 0, .3, 1) 1.6s infinite; }
.feature-port_scope__ehEaA .hero__claim:hover .claim__wave { opacity: .26; }
@keyframes feature-port_sw-listen__f2WHg { 0% { opacity: .75; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes feature-port_sw-speak__VTmqk { 0% { -webkit-mask-position: -150% 0; mask-position: -150% 0; } 45%, 100% { -webkit-mask-position: 250% 0; mask-position: 250% 0; } }
.feature-port_scope__ehEaA .soon__lvl { display: inline-flex; align-items: center; gap: 2.5px; height: .8em; }
.feature-port_scope__ehEaA .soon__lvl i { width: 3px; height: 100%; border-radius: 2px; background: var(--sky); transform: scaleY(.5); animation: feature-port_sw-lvl__8Kiuc 1.1s ease-in-out infinite alternate; }
.feature-port_scope__ehEaA .soon__lvl i:nth-child(2) { transform: scaleY(.9); animation-duration: .8s; animation-delay: -.3s; }
.feature-port_scope__ehEaA .soon__lvl i:nth-child(3) { transform: scaleY(.65); animation-duration: 1.3s; animation-delay: -.7s; }
.feature-port_scope__ehEaA .soon__lvl i:nth-child(4) { transform: scaleY(1); animation-duration: .9s; animation-delay: -.5s; }
.feature-port_scope__ehEaA .soon__lvl i:nth-child(5) { transform: scaleY(.4); animation-duration: 1.2s; animation-delay: -.2s; }
@keyframes feature-port_sw-lvl__8Kiuc { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.feature-port_scope__ehEaA .hero.is-off .soon__lvl i,
.feature-port_scope__ehEaA .hero.is-off .claim__wave,
.feature-port_scope__ehEaA .hero.is-off .claim__mic::after { animation-play-state: paused; }
.feature-port_scope__ehEaA .soon { max-width: 26em; text-align: right; }
.feature-port_scope__ehEaA .soon__tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 700; font-size: clamp(19px, calc(10px + .75vw), 28px); line-height: 1.2; color: var(--sky); }
.feature-port_scope__ehEaA .soon__text { margin-top: 6px; font-size: var(--fs-body); line-height: 1.45; color: #e3e9f0; }
.feature-port_scope__ehEaA .proto-tag { text-align: center; font-size: 13px; color: var(--text-2); padding: 8px var(--pad) 0; }
/* prototype only — removed when live */
/* =========================================================
   STATEMENT — centred
   ========================================================= */
/* --h is the clock's hour (0 = midday … 7), set by JS as the line is read. It defaults to 7, so without JS
   and with reduced motion the section is shown as it ends: early dusk, stars still.
   It stops short of night on purpose: the workday section below carries the full night. */
.feature-port_scope__ehEaA .statement { --h: 7; --n: clamp(0, calc((var(--h) - 6.1) / .5), 1);   /* --n: how far night has fallen */
  position: relative; isolation: isolate; overflow: hidden; text-align: center; margin: var(--inset);   /* the same 10px break as the frames below, with or without the prototype strip */
  border-radius: var(--r); padding: clamp(80px, 11vw, 150px) var(--pad);
  /* tall enough that the clock always has clear sky above and below it; the line stays centred */
  min-height: calc(min(500px, 84vw) + clamp(110px, 14vw, 220px)); display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, #c9e0ee 0%, #e6ece9 46%, #fbe6c4 100%); }
/* early afternoon: clear sky over a warm haze */
/* Pinned (JS adds .is-pinned, never with reduced motion): the frame holds still, centred on the screen, while the scroll
   plays the clock and the sunset, rests a beat at dusk, then carries on. --sth is the frame's height (the clock plus
   clear sky above and below, never taller than the screen); the wrapper's extra 130svh is the pinned stretch. */
.feature-port_scope__ehEaA .stpin { --sth: min(calc(min(500px, 84vw) + clamp(110px, 14vw, 220px)), calc(100svh - 2 * var(--inset))); }
.feature-port_scope__ehEaA .stpin.is-pinned { height: calc(var(--sth) + 2 * var(--inset) + 130svh); padding: var(--inset); }
.feature-port_scope__ehEaA .stpin.is-pinned .statement { position: sticky; top: calc((100svh - var(--sth)) / 2); margin: 0; height: var(--sth); min-height: 0; }
.feature-port_scope__ehEaA .stpin.is-pinned .clock { width: min(500px, 84vw, calc(100svh - 150px)); }
.feature-port_scope__ehEaA .statement > .label,
.feature-port_scope__ehEaA .statement > .statement__h { max-width: 1100px; margin-left: auto; margin-right: auto; }
.feature-port_scope__ehEaA .statement > .label { position: relative; color: color-mix(in srgb, #d5e0ec calc(var(--n) * 100%), var(--text-2)); }
.feature-port_scope__ehEaA .stsky,
.feature-port_scope__ehEaA .stsky > * { position: absolute; inset: 0; pointer-events: none; }
.feature-port_scope__ehEaA .stsky { z-index: -2; container-type: size; }
/* cqw/cqh let the sun travel on the GPU, sized to the frame */
.feature-port_scope__ehEaA .stsky__gold,
.feature-port_scope__ehEaA .stsky__set,
.feature-port_scope__ehEaA .stsky__dusk,
.feature-port_scope__ehEaA .stsky__stars,
.feature-port_scope__ehEaA .clock { will-change: opacity; }
/* own layers: fading them is a blend, not a repaint */
.feature-port_scope__ehEaA .stsky__gold { background: linear-gradient(180deg, #ecd6b4 0%, #f6c98f 55%, #f3a96c 100%); opacity: clamp(0, calc((var(--h) - 2.5) / 2), 1); }
/* golden hour, toward five */
.feature-port_scope__ehEaA .stsky__set { background: linear-gradient(180deg, #7d6c9f 0%, #d98d9c 36%, #f19c6c 68%, #f7c27c 100%); opacity: clamp(0, calc((var(--h) - 4.6) / 1.4), 1); }
/* six: sunset */
.feature-port_scope__ehEaA .stsky__dusk { background: linear-gradient(180deg, #232c63 0%, #38407c 42%, #5d5590 74%, #8e6f9a 100%); opacity: clamp(0, calc((var(--h) - 6) / .8), 1); }
/* seven: early dusk, a violet-blue with the afterglow low down, lighter than the hero's ink and the navy card */
.feature-port_scope__ehEaA .stsky__sun { inset: auto; left: 64%; top: 14%; width: min(64vw, 760px); aspect-ratio: 1; border-radius: 50%; will-change: transform, opacity;
  transform: translate(-50%, -50%) translate(calc(var(--h) * 2.4cqw), calc(var(--h) * 13.5cqh));
  background: radial-gradient(circle, rgba(255, 250, 230, .95) 0, rgba(255, 228, 165, .8) 3%, rgba(255, 196, 120, .45) 10%, rgba(255, 160, 90, .18) 28%, rgba(255, 140, 80, 0) 60%);
  opacity: calc(1 - clamp(0, calc((var(--h) - 5.7) / .8), 1)); }
/* crosses the sky and sets just after six */
.feature-port_scope__ehEaA .stsky__stars { opacity: calc(.75 * clamp(0, calc((var(--h) - 6.3) / .7), 1));   /* the first stars only, and none in the afterglow */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 40%, transparent 78%); mask-image: linear-gradient(180deg, #000 0, #000 40%, transparent 78%);
  background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 27% 64%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 41% 38%, #fff 50%, transparent),
    radial-gradient(1px 1px at 56% 78%, #fff 50%, transparent), radial-gradient(1.3px 1.3px at 68% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 83% 58%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 92% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 6% 82%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 35% 90%, #fff 50%, transparent);
  background-size: 560px 380px; }
.feature-port_scope__ehEaA .stsky__stars::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: 390px 290px; background-position: 140px 70px; animation: feature-port_sw-twinkle__AAJ3p 3.8s ease-in-out infinite alternate; }
/* a few brighter stars twinkle on their own beats — in the statement's sky and the workday's night */
.feature-port_scope__ehEaA .stsky__stars > b,
.feature-port_scope__ehEaA .evesky__stars > b,
.feature-port_scope__ehEaA .hero__stars > b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.feature-port_scope__ehEaA .stsky__stars > b::before,
.feature-port_scope__ehEaA .evesky__stars > b::before,
.feature-port_scope__ehEaA .hero__stars > b::before { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 60%); animation: feature-port_sw-star__2tEvw 2.6s ease-in-out infinite; }
.feature-port_scope__ehEaA :is(.stsky__stars, .evesky__stars, .hero__stars) > b:nth-child(2)::before { animation-duration: 3.4s; animation-delay: -1.1s; }
.feature-port_scope__ehEaA :is(.stsky__stars, .evesky__stars, .hero__stars) > b:nth-child(3)::before { animation-duration: 2.2s; animation-delay: -.6s; }
.feature-port_scope__ehEaA :is(.stsky__stars, .evesky__stars, .hero__stars) > b:nth-child(4)::before { animation-duration: 3.1s; animation-delay: -2s; }
.feature-port_scope__ehEaA :is(.stsky__stars, .evesky__stars, .hero__stars) > b:nth-child(5)::before { animation-duration: 2.8s; animation-delay: -1.5s; }
.feature-port_scope__ehEaA :is(.stsky__stars, .evesky__stars, .hero__stars) > b:nth-child(6)::before { animation-duration: 3.7s; animation-delay: -.3s; }
.feature-port_scope__ehEaA :is(.stsky__stars, .evesky__stars, .hero__stars) > b:nth-child(7)::before { animation-duration: 2.4s; animation-delay: -1.8s; }
.feature-port_scope__ehEaA :is(.stsky__stars, .evesky__stars, .hero__stars) > b:nth-child(8)::before { animation-duration: 3.2s; animation-delay: -.9s; }
/* statement: kept to the edges, clear of the line */
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(1) { left: 7%; top: 16%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(2) { left: 18%; top: 72%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(3) { left: 30%; top: 9%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(4) { left: 71%; top: 12%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(5) { left: 86%; top: 34%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(6) { left: 93%; top: 80%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(7) { left: 4%; top: 52%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(8) { left: 62%; top: 88%; }
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(2),
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(6),
.feature-port_scope__ehEaA .stsky__stars > b:nth-child(8) { display: none; }
/* low in the sky: still afterglow at dusk */
/* workday: the night half, mostly in the margins beside the timeline */
.feature-port_scope__ehEaA .evesky__stars > b:nth-child(1) { left: 4%; top: 14%; }
.feature-port_scope__ehEaA .evesky__stars > b:nth-child(2) { left: 95%; top: 22%; }
.feature-port_scope__ehEaA .evesky__stars > b:nth-child(3) { left: 8%; top: 46%; }
.feature-port_scope__ehEaA .evesky__stars > b:nth-child(4) { left: 91%; top: 54%; }
.feature-port_scope__ehEaA .evesky__stars > b:nth-child(5) { left: 3%; top: 70%; }
.feature-port_scope__ehEaA .evesky__stars > b:nth-child(6) { left: 97%; top: 84%; }
.feature-port_scope__ehEaA .evesky__stars > b:nth-child(7) { left: 22%; top: 94%; }
@keyframes feature-port_sw-star__2tEvw { 0%, 100% { opacity: .15; transform: translate(-50%, -50%) scale(.5); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
/* Midday to seven: a faint clock behind the line runs as it's read (JS), then fades. Off without JS and with reduced motion. */
.feature-port_scope__ehEaA .clock { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(500px, 84vw); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.feature-port_scope__ehEaA .clock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.feature-port_scope__ehEaA .clock__face { fill: rgba(255, 205, 140, .2); stroke: rgba(11, 55, 108, .14); stroke-width: 1.5; }
.feature-port_scope__ehEaA .clock__dusk { fill: rgba(72, 172, 200, .16); opacity: 0; }
.feature-port_scope__ehEaA .clock__ticks line { stroke: color-mix(in srgb, rgba(255, 255, 255, .4) calc(var(--n) * 100%), rgba(11, 55, 108, .26)); stroke-width: 2.2; stroke-linecap: round; }
.feature-port_scope__ehEaA .clock__h { stroke: color-mix(in srgb, rgba(255, 255, 255, .55) calc(var(--n) * 100%), rgba(11, 55, 108, .42)); stroke-width: 7; stroke-linecap: round; }
.feature-port_scope__ehEaA .clock__m { stroke: rgba(72, 172, 200, .7); stroke-width: 3.5; stroke-linecap: round; }
.feature-port_scope__ehEaA .clock__pin { fill: var(--navy); opacity: .55; }
.feature-port_scope__ehEaA .statement__h { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: clamp(36px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -.025em; color: color-mix(in srgb, #f3f6fa calc(var(--n) * 100%), var(--navy)); text-wrap: balance; }
/* =========================================================
   PAIR — brand card + rounded photo
   ========================================================= */
.feature-port_scope__ehEaA .pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--inset); padding: 0 var(--inset); }
.feature-port_scope__ehEaA .pair__card { background: var(--navy); color: var(--on-ink); border-radius: var(--r); padding: clamp(28px, 3.6vw, 48px); display: flex; flex-direction: column; }
.feature-port_scope__ehEaA .pair__h { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.5vw, 52px); line-height: 1.1; letter-spacing: -.015em; }
.feature-port_scope__ehEaA .pair__body { margin-top: 18px; color: #d5e0ec; font-size: var(--fs-body); }
.feature-port_scope__ehEaA .pair__list { margin-top: 22px; border-top: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .pair__list li { padding: clamp(14px, 1vw, 20px) 0; border-bottom: 1px solid var(--line-ink); font-size: var(--fs-body); color: #d5e0ec; }
.feature-port_scope__ehEaA .pair__list b { color: var(--white); font-weight: 600; }
.feature-port_scope__ehEaA .pair__end { margin-top: auto; padding-top: 28px; font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.6vw, 32px); line-height: 1.25; color: var(--white); }
.feature-port_scope__ehEaA .pair__photo { position: relative; border-radius: var(--r); overflow: hidden; min-height: clamp(520px, 38vw, 820px); }
.feature-port_scope__ehEaA .pair__photo img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 50% 40%); object-position: var(--pos, 50% 40%); }
/* =========================================================
   EXPERIENCE — concept section
   ========================================================= */
.feature-port_scope__ehEaA .exp { padding: clamp(90px, 11vw, 150px) var(--pad) clamp(70px, 8vw, 110px); }
.feature-port_scope__ehEaA .exp__in { max-width: var(--max); margin: 0 auto; }
.feature-port_scope__ehEaA .exp__head { max-width: 760px; }
.feature-port_scope__ehEaA .exp__head .h2 { margin-top: 14px; }
.feature-port_scope__ehEaA .exp__sub { margin-top: 18px; font-size: clamp(18px, calc(10px + .65vw), 23px); color: var(--text-2); max-width: 34em; }
.feature-port_scope__ehEaA .exp__stage { display: grid; grid-template-columns: clamp(176px, 12vw, 236px) minmax(0, 1fr); gap: clamp(28px, 2vw, 40px); align-items: center; margin-top: 52px; }
.feature-port_scope__ehEaA .scraps { display: flex; flex-direction: column; gap: 14px; }
.feature-port_scope__ehEaA .scraps__label { font-size: 13.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .scrap { position: relative; text-align: left; width: clamp(160px, 11vw, 214px); min-height: clamp(86px, 6vw, 116px); padding: 14px 16px; border-radius: 3px; background: #fbf7ec; color: #23272e; font-size: clamp(22px, 1.45vw, 29px); line-height: 1.08; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 10px 22px -14px rgba(3,15,30,.45); transition: transform .3s var(--ease), box-shadow .3s; }
.feature-port_scope__ehEaA .scrap:nth-of-type(1) { transform: rotate(-2deg); }
.feature-port_scope__ehEaA .scrap:nth-of-type(2) { transform: rotate(2.5deg) translateX(8px); }
.feature-port_scope__ehEaA .scrap:nth-of-type(3) { transform: rotate(-1.5deg); }
.feature-port_scope__ehEaA .scrap:hover { box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 16px 28px -14px rgba(3,15,30,.55); }
.feature-port_scope__ehEaA .scrap[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sky), 0 16px 28px -14px rgba(3,15,30,.55); }
.feature-port_scope__ehEaA .hand { font-family: var(--hand); font-weight: 600; }
.feature-port_scope__ehEaA .panel { background: var(--ink); color: var(--on-ink); border-radius: var(--r); padding: 18px 22px 24px; }
.feature-port_scope__ehEaA .panel__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .panel__label { font-size: var(--fs-sm); font-weight: 500; color: var(--on-ink-2); }
.feature-port_scope__ehEaA .panel__status { font-size: var(--fs-sm); color: var(--on-ink-2); }
.feature-port_scope__ehEaA .panel.is-playing .panel__status { color: var(--sky); }
.feature-port_scope__ehEaA .panel__meta { display: flex; align-items: center; gap: 16px; }
.feature-port_scope__ehEaA .panel__auto { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-ink); font-family: var(--ui); font-weight: 700; font-size: var(--fs-sm); color: var(--on-ink-2); }
.feature-port_scope__ehEaA .panel__auto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.feature-port_scope__ehEaA .panel__auto[aria-pressed="true"] { color: var(--sky); border-color: rgba(72,172,200,.45); }
.feature-port_scope__ehEaA .panel__auto[aria-pressed="true"]::before { opacity: 1; }
.feature-port_scope__ehEaA .panel__auto:hover { border-color: var(--sky); }
.feature-port_scope__ehEaA .panel__body { display: grid; grid-template-columns: minmax(0, 1.25fr) 52px minmax(0, .95fr) minmax(0, .8fr); gap: 0 14px; align-items: center; padding-top: 22px; }
.feature-port_scope__ehEaA .voice { display: grid; grid-template-columns: clamp(92px, 6.2vw, 116px) minmax(0, 1fr); gap: 0 16px; align-items: center; }
.feature-port_scope__ehEaA .mic { width: clamp(88px, 6vw, 112px); height: clamp(88px, 6vw, 112px); border-radius: 50%; display: grid; place-items: center; color: var(--white); background: var(--navy); border: 2px solid var(--sky); transition: background .2s; }
.feature-port_scope__ehEaA .mic svg { width: 28px; height: 28px; }
.feature-port_scope__ehEaA .mic:hover { background: #10467f; }
.feature-port_scope__ehEaA .panel.is-playing .mic { animation: feature-port_pulse__Tz9YZ 1.2s var(--ease) infinite; }
@keyframes feature-port_pulse__Tz9YZ { 0%,100% { box-shadow: 0 0 0 0 rgba(72,172,200,.45); } 50% { box-shadow: 0 0 0 12px rgba(72,172,200,0); } }
.feature-port_scope__ehEaA .wave-wrap { position: relative; min-width: 0; }
.feature-port_scope__ehEaA .mic-hint { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--ui); font-weight: 700; font-size: clamp(15px, 1vw, 19px); color: var(--white); opacity: 0; pointer-events: none; transition: opacity .3s; }
.feature-port_scope__ehEaA .mic-hint__arrow { color: var(--sky); font-size: 1.3em; }
.feature-port_scope__ehEaA .mic-hint__tap { display: none; }
@media (hover: none) { .feature-port_scope__ehEaA .mic-hint__click { display: none; } .feature-port_scope__ehEaA .mic-hint__tap { display: inline; } }
@media (max-width: 400px) { .feature-port_scope__ehEaA .mic-hint { white-space: normal; line-height: 1.25; font-size: 14.5px; } }
/* long hints (es, pt) wrap rather than widen narrow screens */
.feature-port_scope__ehEaA .panel.is-manual:not(.is-playing) .mic-hint { opacity: 1; }
.feature-port_scope__ehEaA .panel.is-manual:not(.is-playing) .wave { opacity: .18; }
.feature-port_scope__ehEaA .panel.is-manual:not(.is-playing) .mic { animation: feature-port_nudge__mD5Pe 2.4s ease-in-out infinite; }
@keyframes feature-port_nudge__mD5Pe { 0%, 100% { box-shadow: 0 0 0 0 rgba(72,172,200,.4); } 50% { box-shadow: 0 0 0 10px rgba(72,172,200,0); } }
.feature-port_scope__ehEaA .wave { transition: opacity .3s; height: 64px; display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
.feature-port_scope__ehEaA .wave i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px; background: var(--sky); height: calc(var(--h) * 1%); transform-origin: center; }
.feature-port_scope__ehEaA .quote { grid-column: 1 / -1; margin-top: 22px; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.5vw, 29px); line-height: 1.35; color: var(--white); min-height: 4.1em; }
.feature-port_scope__ehEaA .quote .w { transition: opacity .2s; }
.feature-port_scope__ehEaA .panel.is-typing .quote .w:not(.on) { opacity: .16; }
.feature-port_scope__ehEaA .quote mark { background: transparent; color: inherit; text-decoration: underline; text-decoration-color: rgba(72,172,200,.55); text-decoration-thickness: 2px; text-underline-offset: 5px; border-radius: 3px; transition: background .25s, text-decoration-color .25s; }
.feature-port_scope__ehEaA .panel.is-typing .quote mark:not(.said) { text-decoration-color: transparent; }
.feature-port_scope__ehEaA .quote mark.lit { background: rgba(72,172,200,.2); text-decoration-color: var(--sky); }
.feature-port_scope__ehEaA .voice__play { grid-column: 1 / -1; justify-self: start; margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--ui); font-weight: 700; font-size: 14.5px; color: var(--sky); }
.feature-port_scope__ehEaA .voice__play:hover .voice__play-label { text-decoration: underline; text-underline-offset: 4px; }
.feature-port_scope__ehEaA .links { width: 52px; height: 100%; align-self: stretch; overflow: visible; }
.feature-port_scope__ehEaA .links path { fill: none; stroke: rgba(72,172,200,.6); stroke-width: 1.3; }
.feature-port_scope__ehEaA .panel.is-typing .links path:not(.on) { opacity: 0; }
.feature-port_scope__ehEaA .outs { display: grid; gap: 10px; }
.feature-port_scope__ehEaA .panel.is-typing .out:not(.in) { opacity: 0; }
.feature-port_scope__ehEaA .out__btn { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) 12px; gap: 12px; align-items: center; min-height: 62px; padding: 10px 14px; text-align: left; border-radius: 10px; background: #0a1d33; border: 1px solid var(--line-ink); transition: border-color .2s, background .2s; }
.feature-port_scope__ehEaA .out__btn:hover,
.feature-port_scope__ehEaA .out__btn.lit { border-color: var(--sky); background: #0d2742; }
.feature-port_scope__ehEaA .out__icon svg { width: 22px; height: 22px; display: block; color: var(--sky); }
.feature-port_scope__ehEaA .out__name { display: block; font-family: var(--ui); font-weight: 700; font-size: clamp(14.5px, .95vw, 18.5px); color: var(--white); }
.feature-port_scope__ehEaA .out__state { display: block; font-size: var(--fs-sm); color: var(--on-ink-2); }
.feature-port_scope__ehEaA .out__state.ok { color: #8fe3b0; }
.feature-port_scope__ehEaA .out__chev { color: var(--on-ink-2); }
.feature-port_scope__ehEaA .await { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-left: 18px; border-left: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .await__h { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.5vw, 30px); line-height: 1.15; color: var(--white); }
.feature-port_scope__ehEaA .await__count { margin: 6px 0 16px; font-size: var(--fs-sm); color: var(--on-ink-2); }
.feature-port_scope__ehEaA .await__fine { margin-top: 12px; font-size: var(--fs-sm); line-height: 1.45; color: var(--on-ink-2); }
.feature-port_scope__ehEaA .review__h { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--white); outline: none; }
.feature-port_scope__ehEaA .review__list { margin-top: 6px; }
.feature-port_scope__ehEaA .review__item { padding: 10px 0; border-bottom: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .review__name { font-size: var(--fs-sm); line-height: 1.4; color: var(--white); }
.feature-port_scope__ehEaA .review__acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.feature-port_scope__ehEaA .chipbtn { min-height: 36px; padding: 0 12px; border-radius: 8px; font-family: var(--ui); font-size: 13px; font-weight: 700; border: 1px solid rgba(255,255,255,.28); color: var(--white); }
.feature-port_scope__ehEaA .chipbtn--go { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.feature-port_scope__ehEaA .review__done { font-size: 13px; color: #8fe3b0; margin-top: 4px; }
.feature-port_scope__ehEaA .review__fine { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--on-ink-2); }
.feature-port_scope__ehEaA .exp__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 34px; padding: 22px clamp(18px, 3vw, 32px); border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.feature-port_scope__ehEaA .exp__ask-t { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.9vw, 32px); line-height: 1.2; color: var(--navy); text-align: center; text-wrap: balance; }
.feature-port_scope__ehEaA .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; padding-left: 204px; }
.feature-port_scope__ehEaA .steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; -moz-column-gap: 14px; column-gap: 14px; align-items: start; }
.feature-port_scope__ehEaA .steps__n { grid-row: span 2; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--sky-deep); }
.feature-port_scope__ehEaA .steps__t { font-family: var(--ui); font-weight: 700; font-size: clamp(16px, 1.05vw, 21px); color: var(--navy); }
.feature-port_scope__ehEaA .steps__d { font-size: var(--fs-body); color: var(--text-2); line-height: 1.45; }
.feature-port_scope__ehEaA .caps { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
/* =========================================================
   WORKDAY — before / after evening
   ========================================================= */
.feature-port_scope__ehEaA .day { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 80px) var(--inset) clamp(80px, 10vw, 130px);
  /* the evening falls down the section: late afternoon at the heading, night by the note at the foot */
  background: linear-gradient(180deg, var(--light) 0%, #f6eee6 8%, #f0dccb 20%, #d7bfbb 34%, #8f8aa3 50%, #3f4d76 66%, #13284c 82%, #030f1e 100%); }
.feature-port_scope__ehEaA .evesky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
.feature-port_scope__ehEaA .evesky__sun { position: absolute; left: 80%; top: 14%; width: min(70vw, 900px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 150, .62) 0, rgba(255, 180, 110, .3) 18%, rgba(255, 160, 100, .1) 40%, rgba(255, 150, 90, 0) 64%); }
.feature-port_scope__ehEaA .evesky__stars { position: absolute; left: 0; right: 0; top: 52%; bottom: 0;
  background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 27% 64%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 41% 38%, #fff 50%, transparent),
    radial-gradient(1px 1px at 56% 78%, #fff 50%, transparent), radial-gradient(1.3px 1.3px at 68% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 83% 58%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 92% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 6% 82%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 35% 90%, #fff 50%, transparent);
  background-size: 640px 420px; }
.feature-port_scope__ehEaA .evesky__stars::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: 410px 300px; background-position: 120px 60px; opacity: .7; animation: feature-port_sw-twinkle__AAJ3p 3.4s ease-in-out infinite alternate; }
@keyframes feature-port_sw-twinkle__AAJ3p { from { opacity: .1; } to { opacity: 1; } }
.feature-port_scope__ehEaA .evesky__moon { position: absolute; left: 9%; top: 76%; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset -12px 7px 0 0 #f3ead6; filter: drop-shadow(0 0 14px rgba(243, 234, 214, .45)); }
.feature-port_scope__ehEaA .day__h { position: relative; }
.feature-port_scope__ehEaA .eve__row .eve__time { transition: color .5s var(--ease); }
.feature-port_scope__ehEaA .eve__row.is-now .eve__time { color: var(--sky-deep); }
.feature-port_scope__ehEaA .day__h { max-width: 980px; margin: 0 auto 28px; padding: 0 var(--pad); text-align: center; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.022em; color: var(--navy); text-wrap: balance; }
.feature-port_scope__ehEaA .switch { display: flex; width: -moz-fit-content; width: fit-content; margin: 0 auto clamp(32px, 4vw, 52px); padding: 4px; gap: 4px; border-radius: 999px; background: var(--panel-light); border: 1px solid var(--line); }
.feature-port_scope__ehEaA .switch__btn { min-height: 46px; padding: 0 clamp(16px, 1.6vw, 26px); border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: clamp(14.5px, .95vw, 18px); color: var(--text-2); transition: background-color .25s, color .25s; }
.feature-port_scope__ehEaA .switch__btn[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.feature-port_scope__ehEaA .switch__btn:not([aria-pressed="true"]):hover { color: var(--navy); }
.feature-port_scope__ehEaA .eve { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--inset); }
.feature-port_scope__ehEaA .eve__board { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 44px); }
/* Board height is locked (JS) to the taller of the two modes, so switching never resizes the section;
   the shorter mode shares the spare space evenly between its rows. */
.feature-port_scope__ehEaA .eve__rows { flex: 1; display: flex; flex-direction: column; }
.feature-port_scope__ehEaA .eve__rows > .eve__row { flex: 1 1 auto; }
.feature-port_scope__ehEaA .eve__title { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 8px; }
.feature-port_scope__ehEaA .eve__title-boss,
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__title-alone { display: none; }
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__title-boss { display: inline; }
.feature-port_scope__ehEaA .eve__row { display: grid; grid-template-columns: clamp(96px, 8vw, 140px) minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .eve__time { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 1.9vw, 34px); line-height: 1.1; color: var(--navy); white-space: nowrap; }
.feature-port_scope__ehEaA .eve__time small { font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--text-2); }
.feature-port_scope__ehEaA .eve__slot { display: flex; flex-direction: column; gap: 8px; min-height: 46px; justify-content: center; }
.feature-port_scope__ehEaA .ecard { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #fbf7ec; border: 1px solid rgba(11,55,108,.12); }
.feature-port_scope__ehEaA .ecard__k { font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: #9a4a1c; }
.feature-port_scope__ehEaA .ecard__t { font-size: var(--fs-body); font-weight: 600; color: var(--text); line-height: 1.35; }
.feature-port_scope__ehEaA .ecard__s { display: none; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .ecard__s::before { content: "✓ "; }
.feature-port_scope__ehEaA .ecard--job { background: var(--navy); border-color: var(--navy); }
.feature-port_scope__ehEaA .ecard--job .ecard__t { color: var(--white); }
/* "Like the boss": the four paperwork notes become ticked lines on one notepad sheet at 4 pm. */
.feature-port_scope__ehEaA .eve__pad { display: none; position: relative; padding: 4px 0 6px; border-radius: 6px 6px 10px 10px; background: #fffdf6; border: 1px solid #ebe2cc; box-shadow: 0 1px 0 #f4ecd9, 0 3px 0 -1px #fffdf6, 0 3px 0 0 #ebe2cc, 0 10px 22px -12px rgba(3,15,30,.25); }
.feature-port_scope__ehEaA .eve__pad::before { content: ""; position: absolute; top: 0; bottom: 0; left: 40px; width: 1px; background: rgba(200,86,62,.35); }
/* margin line */
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__pad { display: block; }
.feature-port_scope__ehEaA .eve__pad-h { padding: 6px 14px 4px 52px; font-family: var(--hand); font-weight: 600; font-size: clamp(21px, 1.5vw, 26px); line-height: 1.2; color: var(--sky-deep); border-bottom: 1px solid rgba(11,55,108,.13); }
.feature-port_scope__ehEaA .eve__pad .ecard { position: relative; gap: 1px; padding: 9px 14px 9px 52px; background: transparent; border: 0; border-bottom: 1px solid rgba(11,55,108,.13); border-radius: 0; }
.feature-port_scope__ehEaA .eve__pad .ecard:last-child { border-bottom: 0; }
.feature-port_scope__ehEaA .eve__pad .ecard::before { content: ""; position: absolute; left: 13px; top: 12px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.5c1.6 1.2 3 2.7 4.2 4.6C8.9 9 11.8 5.1 15.8 2.6' fill='none' stroke='%231f7a96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.feature-port_scope__ehEaA .eve__pad .ecard__k { display: none; }
.feature-port_scope__ehEaA .eve__pad .ecard__t { color: var(--navy); }
.feature-port_scope__ehEaA .eve__pad .ecard__s { display: block; font-weight: 600; color: var(--text-2); }
.feature-port_scope__ehEaA .eve__pad .ecard__s::before { content: none; }
.feature-port_scope__ehEaA .eve__free { display: none; font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(20px, 1.5vw, 26px); color: var(--sky-deep); }
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__free { display: block; }
.feature-port_scope__ehEaA .eve__row--job .eve__time { color: var(--sky-deep); }
.feature-port_scope__ehEaA .eve__photo { position: relative; border-radius: var(--r); overflow: hidden; min-height: 460px; background: var(--ink); }
.feature-port_scope__ehEaA .eve__img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: opacity .8s var(--ease); }
.feature-port_scope__ehEaA .eve__img--alone { -o-object-position: var(--pos, 55% 40%); object-position: var(--pos, 55% 40%); }
.feature-port_scope__ehEaA .eve__img--boss { -o-object-position: var(--pos, 50% 35%); object-position: var(--pos, 50% 35%); opacity: 0; }
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__img--boss { opacity: 1; }
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__img--alone { opacity: 0; }
.feature-port_scope__ehEaA .eve__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 30px); background: linear-gradient(0deg, rgba(3,15,30,.92), rgba(3,15,30,.55) 55%, rgba(3,15,30,0)); color: var(--white); }
.feature-port_scope__ehEaA .eve__cap h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.8vw, 32px); line-height: 1.15; }
.feature-port_scope__ehEaA .eve__cap p { margin-top: 6px; font-size: var(--fs-body); color: #dfe7ef; }
.feature-port_scope__ehEaA .eve__cap--boss,
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__cap--alone { display: none; }
.feature-port_scope__ehEaA .eve[data-mode="boss"] .eve__cap--boss { display: block; }
.feature-port_scope__ehEaA .eve__note { max-width: var(--max); margin: 18px auto 0; text-align: center; font-size: var(--fs-sm); color: #c9d3df; padding: 0 var(--pad); }
/* on the night sky */
/* Appears once the evening flips to "like the boss". */
.feature-port_scope__ehEaA .eve__cta { display: flex; justify-content: center; margin: 22px auto 0; padding: 0 var(--pad); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s; }
.feature-port_scope__ehEaA.js .eve[data-mode="alone"] ~ .eve__cta { opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
/* Wide screens: floating bar once the hero has gone — pill follows the section, line fills with progress. */
.feature-port_scope__ehEaA .fbar { position: fixed; z-index: 45; top: 10px; left: 50%; display: flex; align-items: center; gap: 18px; width: min(calc(100% - 20px), 1180px); height: 60px; padding: 0 10px 0 18px;
  border-radius: 14px; background: rgba(3, 15, 30, .9); color: var(--on-ink); box-shadow: 0 18px 40px -22px rgba(3, 15, 30, .65); backdrop-filter: blur(14px);
  overflow: hidden; transform: translate(-50%, calc(-100% - 14px)); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
.feature-port_scope__ehEaA .fbar.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.feature-port_scope__ehEaA .fbar__logo img { display: block; width: 124px; height: auto; }
.feature-port_scope__ehEaA .fbar__links { position: relative; display: flex; gap: 2px; margin: 0 auto; padding: 4px; font-family: var(--ui); font-weight: 600; font-size: 14.5px; }
.feature-port_scope__ehEaA .fbar__links a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 999px; text-decoration: none; color: #dbe3ec; white-space: nowrap; transition: color .35s; }
.feature-port_scope__ehEaA .fbar__links a:hover { color: var(--white); }
.feature-port_scope__ehEaA .fbar__links a.is-on { color: var(--ink); }
.feature-port_scope__ehEaA .fbar__pill { position: absolute; z-index: 0; top: 4px; left: 0; width: 0; height: calc(100% - 8px); border-radius: 999px; background: var(--sky); opacity: 0; transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s; }
.feature-port_scope__ehEaA .fbar__cta { white-space: nowrap; }
.feature-port_scope__ehEaA .fbar__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.feature-port_scope__ehEaA .fbar__line i { position: absolute; inset: 0; background: var(--sky); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .fbar { display: none; } }
/* Phones: slim early-access bar (shown from the 640px breakpoint down). */
.feature-port_scope__ehEaA .mbar { display: none; }
/* trade picker */
.feature-port_scope__ehEaA .trade { display: none; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 24px; }
.feature-port_scope__ehEaA.js .trade { display: flex; }
.feature-port_scope__ehEaA .trade__label { font-family: var(--ui); font-weight: 600; font-size: var(--fs-body); color: var(--navy); }
.feature-port_scope__ehEaA .trade__select { position: relative; max-width: 100%; }
.feature-port_scope__ehEaA .trade__select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.feature-port_scope__ehEaA .trade select { -moz-appearance: none; appearance: none; -webkit-appearance: none; max-width: 100%; min-height: 48px; padding: 0 44px 0 16px; border-radius: 10px; border: 1px solid rgba(11,55,108,.3); background: var(--white); font-family: var(--ui); font-weight: 700; font-size: clamp(15px, 1vw, 19px); color: var(--navy); cursor: pointer; }
.feature-port_scope__ehEaA .trade select:hover { border-color: var(--navy); }
/* =========================================================
   DUSK — inset frame
   ========================================================= */
.feature-port_scope__ehEaA .dusk { padding: 0 var(--inset); background: linear-gradient(180deg, #030f1e 0%, #030f1e 45%, var(--light) 100%); }
.feature-port_scope__ehEaA .dusk__frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); min-height: clamp(560px, 46vw, 940px); display: flex; align-items: flex-end; justify-content: flex-end; color: var(--on-ink); background: var(--ink); }
.feature-port_scope__ehEaA .dusk__img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 30% 12%); object-position: var(--pos, 30% 12%); z-index: -2; }
.feature-port_scope__ehEaA .dusk__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(3,15,30,.85) 0%, rgba(3,15,30,.55) 34%, rgba(3,15,30,0) 62%); }
.feature-port_scope__ehEaA .dusk__copy { max-width: 500px; padding: clamp(28px, 4vw, 56px); }
.feature-port_scope__ehEaA .dusk__h { font-family: var(--display); font-weight: 600; font-size: clamp(42px, 5.4vw, 80px); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.feature-port_scope__ehEaA .dusk__sub { margin: 18px 0 26px; font-size: 18px; color: #e3e9f0; }
/* =========================================================
   MARKETS — row list
   ========================================================= */
/* =========================================================
   LOCAL — market pages only: currency, payments, records, offline, voice
   ========================================================= */
.feature-port_scope__ehEaA .local { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 11vw, 150px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px clamp(36px, 6vw, 90px); align-items: start; }
.feature-port_scope__ehEaA .local__head .h2 { margin-top: 14px; }
.feature-port_scope__ehEaA .local__tag { display: inline-flex; margin-top: 22px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(31,122,150,.4); background: var(--white); font-family: var(--ui); font-weight: 700; font-size: clamp(14.5px, calc(9px + .4vw), 17px); color: var(--navy); }
.feature-port_scope__ehEaA .local__tlabel { margin-top: 28px; font-size: var(--fs-sm); color: var(--text-2); }
.feature-port_scope__ehEaA .local__trades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.feature-port_scope__ehEaA .local__trades li { padding: 6px 12px; border-radius: 8px; background: var(--panel-light); font-family: var(--ui); font-weight: 600; font-size: 14.5px; color: var(--navy); }
.feature-port_scope__ehEaA .local__cards { display: grid; gap: 12px; }
.feature-port_scope__ehEaA .local__cards li { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 2vw, 28px); }
.feature-port_scope__ehEaA .local__cards h3 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.6vw, 27px); line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .local__cards p { margin-top: 8px; color: var(--text-2); }
.feature-port_scope__ehEaA .rows a[aria-current="page"] { color: var(--sky-deep); }
.feature-port_scope__ehEaA .rows a[aria-current="page"]::after { content: var(--here, "You're here"); color: var(--text-2); font-weight: 600; }
.feature-port_scope__ehEaA .markets { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 11vw, 150px) var(--pad) clamp(70px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 90px); }
.feature-port_scope__ehEaA .markets__sub { margin-top: 18px; color: var(--text-2); max-width: 30em; }
.feature-port_scope__ehEaA .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; align-content: start; }
.feature-port_scope__ehEaA .rows__region { font-size: 14px; color: var(--text-2); padding-bottom: 8px; }
.feature-port_scope__ehEaA .rows ul { border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .rows a { display: flex; align-items: center; gap: 10px; min-height: 54px; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--navy); transition: padding .25s var(--ease), color .2s; }
.feature-port_scope__ehEaA .rows a span { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--text-2); white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 901px) { .feature-port_scope__ehEaA .rows a::after { content: "→"; } }
.feature-port_scope__ehEaA .rows a::after { content: var(--read, "Read →"); white-space: nowrap; margin-left: auto; font-family: var(--ui); font-weight: 700; font-size: 13.5px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .rows a:hover { padding-left: 8px; color: var(--sky-deep); }
/* =========================================================
   EARLY ACCESS — plus-grid panel
   ========================================================= */
.feature-port_scope__ehEaA .access { padding: 0 var(--inset) var(--inset); outline: none; }
.feature-port_scope__ehEaA .access__panel { border-radius: var(--r); padding: clamp(48px, 7vw, 112px) clamp(24px, 5vw, 72px) clamp(32px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px);
  background-color: var(--panel-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 27v10M27 32h10' stroke='%230b376c' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 64px 64px; }
/* Centred, prominent: the page's final ask. */
.feature-port_scope__ehEaA .access__main { max-width: 820px; margin: 0 auto; text-align: center; }
.feature-port_scope__ehEaA .access__main .label { font-size: var(--fs-sm); }
.feature-port_scope__ehEaA .access__main .h2 { margin-top: 12px; font-size: clamp(52px, 7.4vw, 112px); line-height: 1; }
.feature-port_scope__ehEaA .access__body { margin: 22px auto 0; max-width: 32em; color: var(--text); font-size: clamp(17px, calc(10px + .6vw), 22px); }
.feature-port_scope__ehEaA .access__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.feature-port_scope__ehEaA .access__perks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--white); border: 1px solid rgba(31,122,150,.35); font-family: var(--ui); font-weight: 700; font-size: clamp(14px, calc(9px + .4vw), 16.5px); color: var(--navy); }
.feature-port_scope__ehEaA .access__perks li::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.5c1.6 1.2 3 2.7 4.2 4.6C8.9 9 11.8 5.1 15.8 2.6' fill='none' stroke='%231f7a96' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.feature-port_scope__ehEaA .access__go { position: relative; display: inline-block; margin-top: 26px; transition: margin-top .5s var(--ease); }
.feature-port_scope__ehEaA .btn--lg { min-height: 62px; padding: 0 32px; font-size: clamp(16.5px, calc(10px + .5vw), 20px); border-radius: 10px; box-shadow: 0 10px 30px rgba(31,122,150,.28); }
.feature-port_scope__ehEaA .access__main .btn { white-space: normal; }
.feature-port_scope__ehEaA .access__fine { margin-top: 14px; font-size: 13.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .access__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: var(--max); width: 100%; margin: 0 auto; }
.feature-port_scope__ehEaA .access__list li { background: var(--white); border-radius: 14px; padding: 22px 24px; text-align: left; }
.feature-port_scope__ehEaA .access__list h3 { font-family: var(--ui); font-weight: 700; font-size: 16px; color: var(--navy); }
.feature-port_scope__ehEaA .access__list p { margin-top: 6px; color: var(--text-2); font-size: var(--fs-body); }
/* Arrival cue: when a visitor lands here from any "Claim" button, a hand-drawn arrow
   ("Start here") draws in beside the button and the button pulses twice. */
.feature-port_scope__ehEaA .access__here { position: absolute; right: calc(100% + 6px); bottom: 50%; width: 150px; height: 100px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.feature-port_scope__ehEaA .access__note { position: absolute; right: calc(100% - 12px); top: -10px; font-family: var(--hand); font-weight: 600; font-size: 30px; line-height: 1; color: var(--sky-deep); white-space: nowrap; transform: rotate(-7deg); }
.feature-port_scope__ehEaA .access__arrow { position: absolute; left: 10px; top: 0; width: 140px; height: 100px; overflow: visible; fill: none; stroke: var(--sky-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.feature-port_scope__ehEaA .access__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.feature-port_scope__ehEaA .access.is-arrived .access__here { opacity: 1; }
.feature-port_scope__ehEaA .access.is-arrived .access__arrow path { animation: feature-port_sw-draw__n4VbH .9s cubic-bezier(.45, 0, .2, 1) .15s forwards; }
.feature-port_scope__ehEaA .access.is-arrived .access__arrow .access__head { animation-duration: .3s; animation-delay: 1s; }
.feature-port_scope__ehEaA .access.is-arrived .access__note { animation: feature-port_sw-note__mNiya .5s var(--ease) both; }
.feature-port_scope__ehEaA .access.is-arrived #claim-open { animation: feature-port_sw-pulse__S7zQS 1.5s ease-out 1.1s 2; }
@keyframes feature-port_sw-draw__n4VbH { to { stroke-dashoffset: 0; } }
@keyframes feature-port_sw-note__mNiya { from { opacity: 0; transform: translateY(6px) rotate(-7deg); } }
@keyframes feature-port_sw-pulse__S7zQS { 0% { box-shadow: 0 10px 30px rgba(31,122,150,.28), 0 0 0 0 rgba(72,172,200,.55); } 100% { box-shadow: 0 10px 30px rgba(31,122,150,.28), 0 0 0 18px rgba(72,172,200,0); } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .access.is-arrived .access__arrow path { stroke-dashoffset: 0; } }
@media (max-width: 1000px) {   /* not enough room beside the button: the arrow comes from above */
  .feature-port_scope__ehEaA .access.is-arrived .access__go { margin-top: 136px; }
  .feature-port_scope__ehEaA .access__here { right: auto; left: -8px; bottom: calc(100% + 2px); }
  .feature-port_scope__ehEaA .access__note { right: auto; left: 0; top: -34px; }
}
.feature-port_scope__ehEaA .claimdemo { grid-column: 1 / -1; background: var(--white); border-radius: 14px; padding: clamp(22px, 3vw, 34px); border: 2px dashed rgba(11,55,108,.3); }
.feature-port_scope__ehEaA .claimdemo__tag { display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--navy); background: #dff1f7; border-radius: 6px; padding: 4px 10px; }
.feature-port_scope__ehEaA .claimdemo__lead { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--navy); max-width: 34em; outline: none; }
.feature-port_scope__ehEaA .claimdemo__steps { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-port_scope__ehEaA .claimdemo__steps li { font-size: 15px; color: var(--text-2); padding-top: 12px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .claimdemo__steps b { color: var(--navy); }
.feature-port_scope__ehEaA .claimdemo .linkbtn { margin-top: 12px; }
/* =========================================================
   FAQ + FOOTER
   ========================================================= */
.feature-port_scope__ehEaA .faq { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 9vw, 120px) var(--pad); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px clamp(36px, 6vw, 90px); }
.feature-port_scope__ehEaA .faq__list { border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .faq details { border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding: 16px 0; font-family: var(--ui); font-weight: 700; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .faq summary::-webkit-details-marker { display: none; }
.feature-port_scope__ehEaA .faq summary::after { content: "+"; font-weight: 400; font-size: 26px; color: var(--sky-deep); transition: transform .25s var(--ease); }
.feature-port_scope__ehEaA .faq details[open] summary::after { transform: rotate(45deg); }
.feature-port_scope__ehEaA .faq details p { padding: 0 40px 20px 0; color: var(--text-2); }
.feature-port_scope__ehEaA .foot { background: var(--ink); color: var(--on-ink-2); padding: 64px var(--pad) 28px; font-size: 14.5px; }
.feature-port_scope__ehEaA .foot__mark { width: 56px; height: auto; margin: 0 auto 24px; }
.feature-port_scope__ehEaA .foot__ask { text-align: center; margin-bottom: 48px; }
.feature-port_scope__ehEaA .foot__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .foot__lead { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--white); margin-bottom: 10px; max-width: 16em; }
.feature-port_scope__ehEaA .foot__links { display: flex; flex-direction: column; }
.feature-port_scope__ehEaA .foot__links a { color: var(--white); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; width: -moz-fit-content; width: fit-content; }
.feature-port_scope__ehEaA .foot__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.feature-port_scope__ehEaA .foot__locale p { color: var(--white); }
.feature-port_scope__ehEaA .foot__locale .foot__note { color: var(--on-ink-2); font-size: 13px; margin-top: 8px; }
.feature-port_scope__ehEaA .foot__base { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; font-size: 13px; }
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 1700px) {
  .feature-port_scope__ehEaA { --max: 1520px; }
  .feature-port_scope__ehEaA .steps { padding-left: 276px; }
}
@media (max-width: 1100px) {
  .feature-port_scope__ehEaA .panel__body { grid-template-columns: minmax(0, 1.2fr) 40px minmax(0, 1fr); row-gap: 18px; }
  .feature-port_scope__ehEaA .links { width: 40px; }
  .feature-port_scope__ehEaA .await { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-ink); padding: 18px 0 0; }
  .feature-port_scope__ehEaA .await__summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: center; }
  .feature-port_scope__ehEaA .await__summary .btn { grid-column: 2; grid-row: 1 / span 2; }
  .feature-port_scope__ehEaA .await__count { margin: 0; }
  .feature-port_scope__ehEaA .await__fine { grid-column: 1 / -1; }
  .feature-port_scope__ehEaA .steps { padding-left: 0; }
}
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .nav__links,
.feature-port_scope__ehEaA .nav__locale { display: none; }
  .feature-port_scope__ehEaA .lang__name { display: none; }
  .feature-port_scope__ehEaA .lang__code { display: inline; }
  .feature-port_scope__ehEaA .hero__frame { min-height: 88svh; max-height: none; }
  .feature-port_scope__ehEaA .hero__img { -o-object-position: var(--pos-m, 42% 40%); object-position: var(--pos-m, 42% 40%); }
  .feature-port_scope__ehEaA .hero__row { flex-direction: column; align-items: stretch; }
  .feature-port_scope__ehEaA .hero__act { flex-direction: column; align-items: flex-start; gap: 18px; }
  .feature-port_scope__ehEaA .soon { text-align: left; }
  .feature-port_scope__ehEaA .pair { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .pair__photo { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
  .feature-port_scope__ehEaA .exp__stage { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .feature-port_scope__ehEaA .scraps { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 6px 2px 14px; gap: 12px; scrollbar-width: none; align-items: center; }
  .feature-port_scope__ehEaA .scraps::-webkit-scrollbar { display: none; }
  .feature-port_scope__ehEaA .scraps__label { flex: 0 0 auto; width: 70px; }
  .feature-port_scope__ehEaA .scrap { flex: 0 0 auto; width: 150px; min-height: 80px; font-size: 20px; }
  .feature-port_scope__ehEaA .steps { grid-template-columns: 1fr; gap: 16px; }
  .feature-port_scope__ehEaA .eve { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .eve__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .feature-port_scope__ehEaA .dusk__frame { flex-direction: column; justify-content: flex-end; min-height: 0; }
  .feature-port_scope__ehEaA .dusk__img { position: relative; height: 62vw; min-height: 300px; }
  .feature-port_scope__ehEaA .dusk__shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(3,15,30,0) 30%); height: calc(62vw + 2px); min-height: 302px; bottom: auto; }
  .feature-port_scope__ehEaA .dusk__copy { max-width: none; margin-top: -40px; }
  .feature-port_scope__ehEaA .markets,
.feature-port_scope__ehEaA .faq,
.feature-port_scope__ehEaA .local { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .rows { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .access__list { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .claimdemo__steps { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .foot__grid { grid-template-columns: 1fr 1fr; }
  .feature-port_scope__ehEaA .foot__about { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .feature-port_scope__ehEaA { --inset: 8px; --r: 14px; font-size: 16.5px; }
  .feature-port_scope__ehEaA .nav { padding: 16px; gap: 12px; }
  .feature-port_scope__ehEaA .nav .btn--sm { padding: 0 14px; font-size: 14px; }
  .feature-port_scope__ehEaA .nav__logo img { width: 112px; }
  .feature-port_scope__ehEaA .nav__right { gap: 8px; }
  .feature-port_scope__ehEaA .hero__copy { flex: 0 0 auto; display: block; margin-top: auto; padding: 12svh 16px 22px; }
  .feature-port_scope__ehEaA .lang { padding: 0 10px; gap: 6px; }
  .feature-port_scope__ehEaA .btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
  .feature-port_scope__ehEaA .nav .btn { white-space: nowrap; padding-top: 0; padding-bottom: 0; }
  .feature-port_scope__ehEaA.js .mbar { display: flex; position: fixed; z-index: 40; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(3,15,30,.94); color: var(--white); box-shadow: 0 10px 30px rgba(3,15,30,.28); backdrop-filter: blur(10px);
    transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  .feature-port_scope__ehEaA.js .mbar.is-on { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .feature-port_scope__ehEaA.js.is-scene .mbar.is-on { transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  /* a keyboard reader who tabs back onto the bar's button while it slides away keeps it on screen until focus moves on */
  .feature-port_scope__ehEaA.js .mbar:has(:focus-visible), .feature-port_scope__ehEaA.js.is-scene .mbar:has(:focus-visible) { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .feature-port_scope__ehEaA .mbar__text { flex: 1; min-width: 0; font-family: var(--ui); font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--on-ink-2); }
  .feature-port_scope__ehEaA .mbar__text::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--sky); vertical-align: 1px; }
  .feature-port_scope__ehEaA .mbar .btn { flex: 0 0 auto; white-space: nowrap; padding: 0 14px; }
  .feature-port_scope__ehEaA .hero__h { font-size: clamp(42px, 12.4vw, 56px); margin-bottom: 20px; }
  .feature-port_scope__ehEaA .hero__lede { font-size: 16.5px; }
  .feature-port_scope__ehEaA .hero__act { align-items: stretch; }
  .feature-port_scope__ehEaA .hero__claim { justify-content: center; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-top: 7px; padding-bottom: 7px; }   /* long labels (pt, fr) wrap inside the button */
  .feature-port_scope__ehEaA .claim__label { min-width: 0; }
  .feature-port_scope__ehEaA .statement { text-align: left; }
  .feature-port_scope__ehEaA .pair__card { padding: 24px 20px; }
  .feature-port_scope__ehEaA .panel { padding: 14px 14px 18px; }
  .feature-port_scope__ehEaA .panel__top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .feature-port_scope__ehEaA .panel__meta { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
  .feature-port_scope__ehEaA .panel__auto { white-space: normal; text-align: left; }
  .feature-port_scope__ehEaA .panel__body { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .links { display: none; }
  .feature-port_scope__ehEaA .voice { grid-template-columns: 72px minmax(0, 1fr); }
  .feature-port_scope__ehEaA .mic { width: 68px; height: 68px; }
  .feature-port_scope__ehEaA .wave { height: 52px; gap: 2px; }
  .feature-port_scope__ehEaA .wave i:nth-child(n+44) { display: none; }
  .feature-port_scope__ehEaA .quote { min-height: 0; }
  .feature-port_scope__ehEaA .await__summary { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .await__summary .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  .feature-port_scope__ehEaA .day__h { text-align: left; }
  .feature-port_scope__ehEaA .switch { margin-left: var(--pad); margin-right: var(--pad); width: auto; }
  .feature-port_scope__ehEaA .switch__btn { flex: 1; padding: 0 10px; }
  .feature-port_scope__ehEaA .eve__row { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .feature-port_scope__ehEaA .eve__time { font-size: 21px; }
  .feature-port_scope__ehEaA .eve__pad::before { left: 30px; }
  .feature-port_scope__ehEaA .eve__pad-h,
.feature-port_scope__ehEaA .eve__pad .ecard { padding-left: 40px; padding-right: 10px; }
  .feature-port_scope__ehEaA .eve__pad .ecard::before { left: 7px; width: 16px; height: 16px; }
  .feature-port_scope__ehEaA .trade select { width: 100%; }
  .feature-port_scope__ehEaA .trade__select { width: 100%; }
  .feature-port_scope__ehEaA .dusk__copy { padding: 0 20px 28px; }
  .feature-port_scope__ehEaA .rows a { font-size: 20px; }
  .feature-port_scope__ehEaA .rows a::after { content: "→"; }
  .feature-port_scope__ehEaA .access__list li { padding: 18px 20px; }
  .feature-port_scope__ehEaA .foot__grid { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .foot__mark { margin-left: 0; }
  .feature-port_scope__ehEaA .foot__ask { text-align: left; margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-port_scope__ehEaA { scroll-behavior: auto; }
  .feature-port_scope__ehEaA *,
.feature-port_scope__ehEaA *::before,
.feature-port_scope__ehEaA *::after { animation: none !important; transition-duration: .001ms !important; }
}
@media (max-width: 480px) {
  .feature-port_scope__ehEaA .nav { padding-left: 14px; padding-right: 14px; }
  .feature-port_scope__ehEaA .lang__globe { display: none; }
}
/* Original pages.css, in original cascade order. Body scoping and release font URLs/family isolation only. */
/* SendWork — inner-page template · design prototype
   Loads after css/styles.css and reuses its tokens, type, buttons, the star / meteor / voice keyframes, the evening sky
   (.evesky), the dusk frame, the early-access stand-in, the FAQ, the floating bars and the footer.
   New here, one block each:
     .phero    sky hero: night sky with stars and a shooting star, the photo fading into it from the right
     .proto    prototype strip + the animation switch (?motion=off)
     .sec      section shell · .sec__head label + H2 + lead
     .tjump    "find your trade" jump list
     .moat     "one system of record": copy + the stage (.five scraps file into one .ledger record) + .pillars
     .rail     sticky side rail: the sky clock + "now reading" (desktop) / the in-page list as a chip bar (phones)
     .isec     one short industry section (label, H2, "Your week", what it keeps straight)
     .tsec     one trade (or one feature) section · .xlist the "built to remove" list
     .vnote    a sample voice note: spoken words light up, the items it would prepare slide in (voice feature page only)
     .pills    flat list of further trades
     .eveband  section the evening falls through (late afternoon at the top, night at the foot)
     .roles    three cards · .nope "who it isn't for" on the night
   Motion is js/pages.js. Without it (no JS, reduced motion, animation switch off) every block reads complete.
   Motion only moves position and opacity. */
/* =========================================================
   SKY HERO
   ========================================================= */
.feature-port_scope__ehEaA .phero { padding: var(--inset) var(--inset) 0; background: var(--light); }
.feature-port_scope__ehEaA .phero__frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); min-height: min(calc(100svh - var(--inset) - 34px), 940px);
  display: flex; flex-direction: column; color: var(--on-ink);
  /* the painted night: ink overhead, navy lower down, a last violet afterglow low on the left */
  background:
    radial-gradient(90% 60% at 8% 108%, rgba(93, 85, 144, .55) 0%, rgba(56, 64, 124, .22) 42%, rgba(3, 15, 30, 0) 72%),
    linear-gradient(180deg, #030f1e 0%, #061931 52%, #0b2444 100%); }
/* The photo sits on the right and fades into the painted sky, so the stars are always over sky, never over the picture. */
.feature-port_scope__ehEaA .phero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: -2; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 46%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 46%); }
.feature-port_scope__ehEaA .phero__photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 40% 30%); object-position: var(--pos, 40% 30%); transform-origin: 55% 35%; animation: feature-port_sw-zoom__9WFE7 34s cubic-bezier(.33, 0, .45, 1) infinite alternate; will-change: transform; }
/* evening grade over the photo: night overhead, ink at the foot where the copy and the button sit */
.feature-port_scope__ehEaA .phero__photo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(3,15,30,.62) 0%, rgba(3,15,30,.18) 34%, rgba(3,15,30,.12) 58%, rgba(3,15,30,.78) 100%),
  linear-gradient(90deg, rgba(11,36,68,.35), rgba(3,15,30,0) 60%); }
.feature-port_scope__ehEaA .phero__stars { position: absolute; left: 0; top: 70px; width: 58%; height: 62%; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 0 0, #000 40%, transparent 100%); mask-image: radial-gradient(120% 100% at 0 0, #000 40%, transparent 100%);
  background-image: radial-gradient(1.3px 1.3px at 9% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 24% 52%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 38% 12%, #fff 50%, transparent),
    radial-gradient(1px 1px at 51% 70%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 66% 34%, #fff 50%, transparent), radial-gradient(1px 1px at 79% 8%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 92% 58%, #fff 50%, transparent), radial-gradient(1px 1px at 4% 84%, #fff 50%, transparent);
  background-size: 380px 260px; }
.feature-port_scope__ehEaA .phero__stars::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: 300px 210px; background-position: 90px 50px; animation: feature-port_sw-twinkle__AAJ3p 3.6s ease-in-out infinite alternate; }
.feature-port_scope__ehEaA .phero__stars > b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.feature-port_scope__ehEaA .phero__stars > b::before { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 60%); animation: feature-port_sw-star__2tEvw 2.6s ease-in-out infinite; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(1) { left: 6%; top: 10%; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(2) { left: 24%; top: 32%; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(2)::before { animation-duration: 3.4s; animation-delay: -1.1s; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(3) { left: 41%; top: 6%; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(3)::before { animation-duration: 2.2s; animation-delay: -.6s; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(4) { left: 62%; top: 20%; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(4)::before { animation-duration: 3.1s; animation-delay: -2s; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(5) { left: 14%; top: 54%; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(5)::before { animation-duration: 2.8s; animation-delay: -1.5s; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(6) { left: 78%; top: 4%; }
.feature-port_scope__ehEaA .phero__stars > b:nth-child(6)::before { animation-duration: 3.7s; animation-delay: -.3s; }
.feature-port_scope__ehEaA .phero__meteor { position: absolute; left: var(--mx, 48%); top: var(--my, 8%); width: 180px; height: 2px; margin-left: -180px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(214,234,255,.5) 65%, #fff); transform-origin: 100% 50%; filter: drop-shadow(0 0 4px rgba(200,228,255,.85)); }
.feature-port_scope__ehEaA .phero__meteor.is-go { animation: feature-port_sw-meteor__auY_P 1.05s cubic-bezier(.3, .1, .55, 1) forwards; }
.feature-port_scope__ehEaA .phero.is-off .phero__photo img,
.feature-port_scope__ehEaA .phero.is-off .phero__stars::after,
.feature-port_scope__ehEaA .phero.is-off .phero__stars > b::before,
.feature-port_scope__ehEaA .phero.is-off .soon__lvl i,
.feature-port_scope__ehEaA .phero.is-off .claim__wave,
.feature-port_scope__ehEaA .phero.is-off .claim__mic::after { animation-play-state: paused; }
/* Stand-in nav: the live site keeps its own header (README, LIVE-CODE-MAP). */
.feature-port_scope__ehEaA .phero .nav { position: relative; }
.feature-port_scope__ehEaA .nav__stand { margin-left: auto; font-size: 13px; color: var(--on-ink-2); }
.feature-port_scope__ehEaA .phero__copy { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; max-width: min(820px, 58%); padding: clamp(24px, 4vh, 56px) clamp(18px, 3vw, 36px) clamp(28px, 3.6vw, 48px); }
.feature-port_scope__ehEaA .crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--on-ink-2); }
.feature-port_scope__ehEaA .crumbs a { color: #dbe3ec; text-decoration: none; }
.feature-port_scope__ehEaA .crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.feature-port_scope__ehEaA .crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.feature-port_scope__ehEaA .crumbs [aria-current] { color: var(--sky); }
.feature-port_scope__ehEaA .phero__eyebrow { margin-top: clamp(18px, 3vh, 34px); display: flex; align-items: center; gap: 12px; font-family: var(--ui); font-weight: 600; font-size: clamp(16px, calc(9px + .55vw), 21px); color: #e3e9f0; }
.feature-port_scope__ehEaA .phero__eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--sky); }
.feature-port_scope__ehEaA .phero__h { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: clamp(40px, min(5.6vw, 9.6svh), 96px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 30px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .phero__lede { margin-top: clamp(18px, 2.6vh, 28px); max-width: 33em; font-size: clamp(17px, calc(10px + .55vw), 21px); line-height: 1.55; color: #e3e9f0; }
.feature-port_scope__ehEaA .phero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(24px, 3.4vh, 38px); padding-top: clamp(20px, 2.6vh, 28px); border-top: 1px solid rgba(255,255,255,.2); }
.feature-port_scope__ehEaA .phero__soon { display: flex; flex-direction: column; gap: 2px; }
.feature-port_scope__ehEaA .phero__soon .soon__tag { font-size: clamp(17px, calc(10px + .5vw), 22px); }
.feature-port_scope__ehEaA .phero__soon p:last-child { font-size: var(--fs-sm); color: var(--on-ink-2); }
.feature-port_scope__ehEaA .phero__jump { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--ui); font-weight: 700; font-size: 15.5px; color: var(--white); text-decoration: none; }
.feature-port_scope__ehEaA .phero__jump span { transition: transform .25s var(--ease); }
.feature-port_scope__ehEaA .phero__jump:hover { text-decoration: underline; text-underline-offset: 5px; }
.feature-port_scope__ehEaA .phero__jump:hover span { transform: translateY(3px); }
@media (min-width: 901px) and (max-height: 860px) {
  .feature-port_scope__ehEaA .phero .nav { padding-top: 16px; padding-bottom: 16px; }
  .feature-port_scope__ehEaA .phero__h { font-size: clamp(38px, min(5vw, 8.4svh), 84px); }
}
/* Prototype strip + animation switch (prototype only — removed when live) */
.feature-port_scope__ehEaA .proto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding: 8px var(--pad) 0; font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .proto__motion { display: none; padding: 3px 10px; border-radius: 999px; background: var(--panel-light); border: 1px solid var(--line); color: var(--navy); font-family: var(--ui); font-weight: 600; text-decoration: none; }
.feature-port_scope__ehEaA.js .proto__motion { display: inline-block; }
.feature-port_scope__ehEaA .proto__motion:hover { border-color: var(--navy); }
/* =========================================================
   SECTION SHELL
   ========================================================= */
.feature-port_scope__ehEaA .sec { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .sec__head { max-width: 820px; }
.feature-port_scope__ehEaA .sec__head .h2 { margin-top: 14px; }
.feature-port_scope__ehEaA .sec__lead { margin-top: 18px; max-width: 34em; font-size: clamp(18px, calc(10px + .65vw), 23px); color: var(--text-2); }
/* "Find your trade": the ten as a jump list straight under the hero */
.feature-port_scope__ehEaA .tjump { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 3vw, 40px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 14px clamp(24px, 4vw, 60px); align-items: start; }
.feature-port_scope__ehEaA .tjump__label { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.7vw, 30px); line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .tjump__label small { display: block; margin-top: 6px; font-family: var(--body); font-weight: 400; font-size: var(--fs-sm); color: var(--text-2); }
.feature-port_scope__ehEaA .tjump ol { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .tjump li { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.feature-port_scope__ehEaA .tjump ol a { display: flex; flex-direction: column; gap: 2px; min-height: 76px; padding: 12px 14px; text-decoration: none; transition: background-color .2s; }
.feature-port_scope__ehEaA .tjump ol a:hover { background: var(--white); }
.feature-port_scope__ehEaA .tjump ol a b { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .tjump ol a span { font-family: var(--ui); font-weight: 700; font-size: clamp(15px, 1vw, 18px); line-height: 1.25; color: var(--navy); }
.feature-port_scope__ehEaA .tjump__more { grid-column: 2; font-size: var(--fs-sm); color: var(--text-2); }
.feature-port_scope__ehEaA .tjump__more a { color: var(--sky-deep); font-weight: 600; }
/* =========================================================
   RAIL + TRADE SECTIONS
   ========================================================= */
.feature-port_scope__ehEaA .tbody { display: grid; grid-template-columns: clamp(220px, 17vw, 280px) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); margin-top: clamp(44px, 5vw, 72px); align-items: start; }
.feature-port_scope__ehEaA .rail { position: sticky; top: 92px; }
/* The sky clock: a clock whose face is the sky. As the ten trades scroll past, the hands run from four toward seven and
   the sky follows — the job ends, the second shift starts. --h (hours after midday) is set by JS; 7 without it. */
.feature-port_scope__ehEaA .skyclock { --h: 7; --n: clamp(0, calc((var(--h) - 6.1) / .5), 1);
  position: relative; isolation: isolate; overflow: hidden; width: clamp(118px, 9vw, 150px); aspect-ratio: 1; border-radius: 50%; container-type: size;
  background: linear-gradient(180deg, #c9e0ee 0%, #e6ece9 50%, #fbe6c4 100%); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -24px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .skyclock > i { position: absolute; inset: 0; will-change: opacity; }
.feature-port_scope__ehEaA .skyclock__gold { background: linear-gradient(180deg, #ecd6b4 0%, #f6c98f 55%, #f3a96c 100%); opacity: clamp(0, calc((var(--h) - 2.5) / 2), 1); }
.feature-port_scope__ehEaA .skyclock__set { background: linear-gradient(180deg, #7d6c9f 0%, #d98d9c 36%, #f19c6c 68%, #f7c27c 100%); opacity: clamp(0, calc((var(--h) - 4.6) / 1.4), 1); }
.feature-port_scope__ehEaA .skyclock__dusk { background: linear-gradient(180deg, #232c63 0%, #38407c 42%, #5d5590 74%, #8e6f9a 100%); opacity: clamp(0, calc((var(--h) - 6) / .8), 1); }
.feature-port_scope__ehEaA .skyclock__sun { inset: auto !important; left: 30%; top: 4%; width: 110%; aspect-ratio: 1; border-radius: 50%; will-change: transform, opacity;
  transform: translate(-50%, -50%) translate(calc(var(--h) * 5cqw), calc(var(--h) * 13cqh));
  background: radial-gradient(circle, rgba(255,250,230,.95) 0, rgba(255,228,165,.8) 4%, rgba(255,196,120,.45) 12%, rgba(255,160,90,.16) 30%, rgba(255,140,80,0) 60%);
  opacity: calc(1 - clamp(0, calc((var(--h) - 5.7) / .8), 1)); }
.feature-port_scope__ehEaA .skyclock__stars { opacity: calc(.85 * clamp(0, calc((var(--h) - 6.2) / .7), 1));
  background-image: radial-gradient(1.2px 1.2px at 22% 26%, #fff 50%, transparent), radial-gradient(1px 1px at 70% 18%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 46% 40%, #fff 50%, transparent), radial-gradient(1px 1px at 82% 44%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 58%, #fff 50%, transparent); }
.feature-port_scope__ehEaA .skyclock svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-port_scope__ehEaA .skyclock__ticks line { stroke: color-mix(in srgb, rgba(255,255,255,.55) calc(var(--n) * 100%), rgba(11,55,108,.32)); stroke-width: 3; stroke-linecap: round; }
.feature-port_scope__ehEaA .skyclock__hh { stroke: color-mix(in srgb, rgba(255,255,255,.8) calc(var(--n) * 100%), rgba(11,55,108,.7)); stroke-width: 8; stroke-linecap: round; }
.feature-port_scope__ehEaA .skyclock__mm { stroke: color-mix(in srgb, #8fd3e6 calc(var(--n) * 100%), var(--sky-deep)); stroke-width: 4.5; stroke-linecap: round; }
.feature-port_scope__ehEaA .skyclock__pin { fill: color-mix(in srgb, #fff calc(var(--n) * 100%), var(--navy)); }
.feature-port_scope__ehEaA .rail__head { display: flex; align-items: center; gap: 16px; }
.feature-port_scope__ehEaA .rail__head .skyclock { flex: 0 0 auto; width: clamp(92px, 6.4vw, 112px); }
.feature-port_scope__ehEaA .rail__cap { font-family: var(--hand); font-weight: 600; font-size: clamp(19px, 1.3vw, 23px); line-height: 1.1; color: var(--sky-deep); }
.feature-port_scope__ehEaA .rail__now { display: flex; flex-direction: column; min-width: 0; }
.feature-port_scope__ehEaA .rail__now small { font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .rail__now b { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.5vw, 26px); line-height: 1.15; color: var(--navy); }
.feature-port_scope__ehEaA .rail__now span { margin-top: 4px; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .rail--now .rail__list { display: none; }
.feature-port_scope__ehEaA .rail--now .rail__more { margin-top: 18px; }
.feature-port_scope__ehEaA .rail__list { margin-top: 18px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .rail__list a { position: relative; display: flex; align-items: baseline; gap: 12px; min-height: 42px; padding: 9px 0 9px 14px; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--text-2); transition: color .25s; }
.feature-port_scope__ehEaA .rail__list a::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--sky); opacity: 0; transform: scaleY(.3); transition: opacity .3s, transform .35s var(--ease); }
.feature-port_scope__ehEaA .rail__list a b { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--sky-deep); min-width: 1.4em; }
.feature-port_scope__ehEaA .rail__list a:hover { color: var(--navy); }
.feature-port_scope__ehEaA .rail__list a[aria-current] { color: var(--navy); }
.feature-port_scope__ehEaA .rail__list a[aria-current]::before { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .rail__more { display: inline-block; margin-top: 14px; font-size: var(--fs-sm); color: var(--sky-deep); font-weight: 600; }
.feature-port_scope__ehEaA .tsec { padding: clamp(44px, 5vw, 76px) 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.feature-port_scope__ehEaA .tsec:first-child { padding-top: 0; border-top: 0; }
.feature-port_scope__ehEaA .tsec__trade { display: flex; align-items: baseline; gap: 12px; font-family: var(--ui); font-weight: 700; font-size: clamp(14.5px, .95vw, 17px); color: var(--sky-deep); }
.feature-port_scope__ehEaA .tsec__trade b { font-family: var(--display); font-weight: 600; font-size: 1.6em; line-height: 1; color: var(--sky-deep); }
.feature-port_scope__ehEaA .tsec__h { margin-top: 12px; max-width: 22ch; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3vw, 48px); line-height: 1.08; letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.feature-port_scope__ehEaA .tsec__day { margin-top: 16px; max-width: 38em; color: var(--text); }
.feature-port_scope__ehEaA .tsec__day b { color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .tsec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(22px, 2.6vw, 40px); margin-top: clamp(24px, 2.6vw, 34px); align-items: start; }
.feature-port_scope__ehEaA .tsec__k { font-size: var(--fs-sm); color: var(--text-2); }
.feature-port_scope__ehEaA .xlist { margin-top: 8px; }
.feature-port_scope__ehEaA .xlist li { position: relative; padding: 14px 0 14px 32px; border-top: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.feature-port_scope__ehEaA .xlist li::before { content: ""; position: absolute; left: 0; top: 18px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.5c1.6 1.2 3 2.7 4.2 4.6C8.9 9 11.8 5.1 15.8 2.6' fill='none' stroke='%231f7a96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.feature-port_scope__ehEaA .xlist b { display: block; margin-bottom: 2px; color: var(--navy); font-weight: 600; }
/* =========================================================
   SAMPLE VOICE NOTE
   ========================================================= */
.feature-port_scope__ehEaA .vnote { position: relative; background: var(--ink); color: var(--on-ink); border-radius: 16px; padding: 16px clamp(16px, 1.6vw, 22px) 18px; box-shadow: 0 26px 50px -32px rgba(3,15,30,.7); }
.feature-port_scope__ehEaA .vnote__top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .vnote__mic { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); border: 2px solid var(--sky); color: var(--white); }
.feature-port_scope__ehEaA .vnote__mic svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .vnote__mic::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--sky); opacity: 0; }
.feature-port_scope__ehEaA .vnote.is-playing .vnote__mic::after { animation: feature-port_sw-listen__f2WHg 1.4s ease-out infinite; }
.feature-port_scope__ehEaA .vnote__label { min-width: 0; font-size: var(--fs-sm); line-height: 1.3; color: var(--on-ink-2); }
.feature-port_scope__ehEaA .vnote__label b { display: block; font-family: var(--ui); font-weight: 700; color: var(--white); }
.feature-port_scope__ehEaA .vnote__play { display: none; margin-left: auto; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--sky); white-space: nowrap; }
.feature-port_scope__ehEaA.motion .vnote__play { display: inline-flex; }
.feature-port_scope__ehEaA .vnote__play:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.feature-port_scope__ehEaA .vnote__play[disabled] { opacity: .45; cursor: default; }
.feature-port_scope__ehEaA .vnote__q { margin-top: 14px; font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.3vw, 24px); line-height: 1.42; color: var(--white); }
.feature-port_scope__ehEaA .vnote__q mark { position: relative; background: transparent; color: inherit; text-decoration: underline; text-decoration-color: rgba(72,172,200,.6); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.feature-port_scope__ehEaA .vnote__q mark::before { content: ""; position: absolute; inset: -1px -3px; z-index: -1; border-radius: 4px; background: rgba(72,172,200,.22); opacity: 0; transition: opacity .3s; }
.feature-port_scope__ehEaA .vnote__q { position: relative; z-index: 0; }
.feature-port_scope__ehEaA .vnote__q mark.lit::before { opacity: 1; }
.feature-port_scope__ehEaA .vnote__q .w { transition: opacity .18s; }
.feature-port_scope__ehEaA .vnote.is-armed .vnote__q .w:not(.on) { opacity: .2; }
.feature-port_scope__ehEaA .vnote__outs { display: grid; gap: 8px; margin-top: 16px; }
.feature-port_scope__ehEaA .vnote__outs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 8px 12px; border-radius: 10px; background: #0a1d33; border: 1px solid var(--line-ink);
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .vnote__outs svg { width: 20px; height: 20px; color: var(--sky); }
.feature-port_scope__ehEaA .vnote__outs b { font-family: var(--ui); font-weight: 700; font-size: clamp(14.5px, .95vw, 17px); color: var(--white); }
.feature-port_scope__ehEaA .vnote__outs span { font-size: var(--fs-sm); color: var(--on-ink-2); white-space: nowrap; }
.feature-port_scope__ehEaA .vnote.is-armed .vnote__outs li:not(.in) { opacity: 0; transform: translateX(-10px); }
.feature-port_scope__ehEaA .vnote__fine { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--on-ink-2); }
/* =========================================================
   FURTHER TRADES
   ========================================================= */
.feature-port_scope__ehEaA .more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px clamp(36px, 6vw, 90px); align-items: start; }
.feature-port_scope__ehEaA .more__end { margin-top: 22px; max-width: 24ch; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.55vw, 27px); line-height: 1.3; color: var(--navy); }
.feature-port_scope__ehEaA .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-port_scope__ehEaA .pills li { padding: 9px 15px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-family: var(--ui); font-weight: 600; font-size: clamp(14.5px, .95vw, 17px); color: var(--navy); }
/* =========================================================
   EVENING BAND (roles, then who it isn't for, on the night)
   ========================================================= */
.feature-port_scope__ehEaA .eveband { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(80px, 10vw, 140px); padding: clamp(70px, 8vw, 120px) var(--pad) clamp(80px, 9vw, 130px);
  background: linear-gradient(180deg, var(--light) 0%, #f6eee6 9%, #f0dccb 22%, #d7bfbb 38%, #8f8aa3 54%, #3f4d76 68%, #13284c 82%, #030f1e 100%); }
.feature-port_scope__ehEaA .eveband .evesky__moon { top: 80%; left: 88%; }
.feature-port_scope__ehEaA .eveband__in { max-width: var(--max); margin: 0 auto; }
.feature-port_scope__ehEaA .eveband__head { max-width: 820px; margin: 0 auto; text-align: center; }
.feature-port_scope__ehEaA .eveband__head .label { color: #6b5a52; }
.feature-port_scope__ehEaA .roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--inset); margin-top: clamp(36px, 4vw, 56px); }
.feature-port_scope__ehEaA .roles li { display: flex; flex-direction: column; background: rgba(255,255,255,.94); border-radius: var(--r); padding: clamp(24px, 2.6vw, 38px); box-shadow: 0 30px 60px -40px rgba(3,15,30,.6); }
.feature-port_scope__ehEaA .roles__k { font-family: var(--ui); font-weight: 700; font-size: clamp(14px, .9vw, 16px); color: var(--sky-deep); }
.feature-port_scope__ehEaA .roles h3 { margin-top: 10px; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 1.9vw, 32px); line-height: 1.15; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; }
.feature-port_scope__ehEaA .roles p { margin-top: 14px; color: var(--text-2); }
.feature-port_scope__ehEaA .roles__end { margin-top: auto !important; padding-top: 14px; font-family: var(--display); font-weight: 600; color: var(--navy) !important; }
.feature-port_scope__ehEaA .nope { max-width: 980px; margin: clamp(90px, 11vw, 160px) auto 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(30px, 5vw, 70px); color: var(--on-ink); }
.feature-port_scope__ehEaA .nope .h2 { color: var(--white); font-size: clamp(32px, 3.4vw, 50px); }
.feature-port_scope__ehEaA .nope ul { border-top: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .nope li { padding: 16px 0; border-bottom: 1px solid var(--line-ink); color: var(--on-ink-2); }
.feature-port_scope__ehEaA .nope b { display: block; color: var(--white); font-weight: 600; margin-bottom: 4px; }
/* dusk close: wider copy and a launch-offer line beside the ask */
.feature-port_scope__ehEaA .dusk--close .dusk__copy { max-width: 600px; }
.feature-port_scope__ehEaA .dusk--close .dusk__sub { margin-bottom: 18px; }
.feature-port_scope__ehEaA .offer { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(72,172,200,.5); font-family: var(--ui); font-weight: 700; font-size: clamp(14px, calc(9px + .4vw), 16.5px); color: var(--white); }
.feature-port_scope__ehEaA .offer::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.5c1.6 1.2 3 2.7 4.2 4.6C8.9 9 11.8 5.1 15.8 2.6' fill='none' stroke='%2348acc8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.feature-port_scope__ehEaA .access__stand { margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
/* floating bar, CTA only (as decided for /for: wordmark + Claim + progress line) */
.feature-port_scope__ehEaA .fbar--cta .fbar__cta { margin-left: auto; }
/* =========================================================
   MOAT: one system of record — five places file into one record
   ========================================================= */
.feature-port_scope__ehEaA .moat { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .moat__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature-port_scope__ehEaA .moat__p { margin-top: 18px; max-width: 30em; font-size: clamp(18px, calc(10px + .6vw), 22px); color: var(--text-2); }
.feature-port_scope__ehEaA .stage { position: relative; display: grid; grid-template-columns: minmax(150px, .78fr) minmax(0, 1.5fr); gap: clamp(18px, 2.6vw, 44px); align-items: center; }
.feature-port_scope__ehEaA .five { display: grid; gap: 10px; }
.feature-port_scope__ehEaA .five li { position: relative; padding: 8px 12px 10px; border-radius: 3px; background: #fbf7ec; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 10px 22px -14px rgba(3,15,30,.45); transform: rotate(var(--r, 0deg)); transition: opacity .5s var(--ease); }
.feature-port_scope__ehEaA .five li:nth-child(1) { --r: -2deg; }
.feature-port_scope__ehEaA .five li:nth-child(2) { --r: 1.6deg; margin-left: 14px; }
.feature-port_scope__ehEaA .five li:nth-child(3) { --r: -1deg; }
.feature-port_scope__ehEaA .five li:nth-child(4) { --r: 2.2deg; margin-left: 8px; }
.feature-port_scope__ehEaA .five li:nth-child(5) { --r: -1.6deg; }
.feature-port_scope__ehEaA .five__k { display: block; font-family: var(--ui); font-weight: 700; font-size: 12px; color: #9a4a1c; }
.feature-port_scope__ehEaA .five__t { display: block; font-family: var(--hand); font-weight: 600; font-size: clamp(19px, 1.25vw, 23px); line-height: 1.1; color: #23272e; }
.feature-port_scope__ehEaA .five li::after { content: ""; position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5c1.2.9 2.2 2 3.1 3.4C8.8 9 11 6.2 14 4.3' fill='none' stroke='%231f7a96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px; box-shadow: 0 0 0 1px rgba(31,122,150,.35); }
.feature-port_scope__ehEaA .five li.is-filed { opacity: .62; }
.feature-port_scope__ehEaA .five li.is-filed::after { opacity: 1; }
/* the record: a ledger sheet, drawn as an illustration (not a screen) */
.feature-port_scope__ehEaA .ledger { position: relative; padding: 6px 0 4px; border-radius: 6px 6px 12px 12px; background: #fffdf6; border: 1px solid #ebe2cc;
  box-shadow: 0 1px 0 #f4ecd9, 0 4px 0 -1px #fffdf6, 0 4px 0 0 #ebe2cc, 0 26px 48px -28px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .ledger::before { content: ""; position: absolute; top: 0; bottom: 0; left: 46px; width: 1px; background: rgba(200,86,62,.35); }
.feature-port_scope__ehEaA .ledger__h { padding: 8px 16px 0 60px; font-family: var(--hand); font-weight: 600; font-size: clamp(26px, 1.9vw, 34px); line-height: 1.1; color: var(--sky-deep); }
.feature-port_scope__ehEaA .ledger__sub { padding: 0 16px 10px 60px; font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .ledger__rows li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 2px 14px; align-items: baseline; padding: 11px 16px 11px 60px; border-top: 1px solid rgba(11,55,108,.13);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.feature-port_scope__ehEaA .ledger__k { font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .ledger__t { font-weight: 600; font-size: clamp(15.5px, 1vw, 18px); line-height: 1.35; color: var(--navy); }
.feature-port_scope__ehEaA .ledger__s { position: relative; grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--sky-deep); white-space: nowrap; }
.feature-port_scope__ehEaA .ledger__s::before { content: "✓"; }
.feature-port_scope__ehEaA .ledger__rows li[data-st="wait"] .ledger__s { padding: 3px 10px; border-radius: 999px; background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .ledger__rows li[data-st="wait"] .ledger__s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.feature-port_scope__ehEaA .stage.is-done .ledger__rows li[data-st="wait"] .ledger__s::before { animation: feature-port_pulse__Tz9YZ 1.6s var(--ease) infinite; }
.feature-port_scope__ehEaA .ledger__cap { margin-top: 12px; font-size: 13px; color: var(--text-2); text-align: center; }
.feature-port_scope__ehEaA .stage__play { display: none; margin: 4px auto 0; align-items: center; gap: 8px; min-height: 40px; font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--sky-deep); }
.feature-port_scope__ehEaA.motion .stage__play { display: flex; }
.feature-port_scope__ehEaA .stage__play:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.feature-port_scope__ehEaA .stage__play[disabled] { opacity: .45; cursor: default; }
.feature-port_scope__ehEaA .stage.is-armed .ledger__rows li:not(.in) { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA .token { position: absolute; z-index: 5; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 6px rgba(72,172,200,.22), 0 0 18px rgba(72,172,200,.8); pointer-events: none; }
.feature-port_scope__ehEaA .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--inset); margin-top: clamp(40px, 5vw, 64px); }
.feature-port_scope__ehEaA .pillars li { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px, 1.8vw, 26px); color: var(--text-2); }
.feature-port_scope__ehEaA .pillars b { display: block; margin-bottom: 6px; font-family: var(--ui); font-weight: 700; font-size: clamp(16px, 1.05vw, 19px); color: var(--navy); }
.feature-port_scope__ehEaA .moat__how { margin-top: 22px; text-align: center; font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(18px, 1.3vw, 23px); color: var(--sky-deep); }
/* =========================================================
   SHORT INDUSTRY SECTIONS
   ========================================================= */
.feature-port_scope__ehEaA .isec { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px clamp(24px, 3vw, 52px); align-items: start; padding: clamp(32px, 3.6vw, 54px) 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.feature-port_scope__ehEaA .isec:first-child { padding-top: 0; border-top: 0; }
.feature-port_scope__ehEaA .isec .tsec__h { font-size: clamp(25px, 2.2vw, 36px); max-width: 20ch; }
.feature-port_scope__ehEaA .isec .tsec__day { margin-top: 12px; }
.feature-port_scope__ehEaA .isec .xlist { margin-top: 8px; }
.feature-port_scope__ehEaA .xlist--inline li { padding-top: 12px; padding-bottom: 12px; }
.feature-port_scope__ehEaA .xlist--inline li::before { top: 16px; }
.feature-port_scope__ehEaA .xlist--inline b { display: inline; margin: 0; }
.feature-port_scope__ehEaA .other { margin-top: 8px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r); background: var(--navy); color: #d5e0ec; scroll-margin-top: 84px; }
.feature-port_scope__ehEaA .other b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.8vw, 30px); color: var(--white); }
.feature-port_scope__ehEaA .other p { margin-top: 8px; max-width: 34em; }
.feature-port_scope__ehEaA .phero__cta { border-radius: 999px; min-height: 58px; padding: 0 26px; font-size: clamp(15.5px, calc(9px + .45vw), 17.5px); box-shadow: 0 12px 34px rgba(72,172,200,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.feature-port_scope__ehEaA .phero__cta span { transition: transform .25s var(--ease); }
.feature-port_scope__ehEaA .phero__cta:hover span { transform: translateX(4px); }
/* =========================================================
   REVEALS (JS adds .motion to <html>; .is-in when on screen)
   ========================================================= */
.feature-port_scope__ehEaA.motion [data-rv] { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA.motion [data-rv]:not(.is-in) { opacity: 0; transform: translateY(22px); }
.feature-port_scope__ehEaA.motion [data-rv="calm"]:not(.is-in) { transform: translateY(8px); }
.feature-port_scope__ehEaA.motion [data-rv="side"]:not(.is-in) { transform: translateX(-16px); }
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 901px) and (max-height: 760px) {
  .feature-port_scope__ehEaA .rail { top: 82px; }
  .feature-port_scope__ehEaA .rail__list { margin-top: 12px; }
  .feature-port_scope__ehEaA .rail__list a { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 1100px) {
  .feature-port_scope__ehEaA .tsec__grid { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .moat__top { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-port_scope__ehEaA .vnote { max-width: 640px; }
  .feature-port_scope__ehEaA .tjump ol { --cols: 4; }
}
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .phero__frame { min-height: 0; }
  .feature-port_scope__ehEaA .phero__photo { position: relative; width: 100%; height: 58vw; min-height: 300px; max-height: 520px; margin-top: -86px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); order: 1; z-index: -1; }
  .feature-port_scope__ehEaA .phero .nav { order: 0; }
  .feature-port_scope__ehEaA .phero__copy { order: 2; max-width: none; margin-top: -60px; padding-top: 0; }
  .feature-port_scope__ehEaA .phero__stars { top: 64px; width: 100%; height: 40%; }
  .feature-port_scope__ehEaA .tjump { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .tjump ol { grid-template-columns: repeat(2, minmax(0, 1fr)); --cols: 2; }
  .feature-port_scope__ehEaA .tjump ol a { min-height: 64px; }
  .feature-port_scope__ehEaA .tjump__more { grid-column: 1; }
  .feature-port_scope__ehEaA .tbody { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  /* phones and tablets: the rail becomes a sticky chip bar */
  .feature-port_scope__ehEaA .rail { top: 0; z-index: 30; margin: 0 calc(-1 * var(--pad)); padding: 10px var(--pad); background: rgba(247,248,250,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .feature-port_scope__ehEaA .rail__head,
.feature-port_scope__ehEaA .rail__more { display: none; }
  .feature-port_scope__ehEaA .rail--now .rail__list { display: flex; }
  .feature-port_scope__ehEaA .rail__list { display: flex; gap: 8px; margin: 0; border: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .feature-port_scope__ehEaA .rail__list::-webkit-scrollbar { display: none; }
  .feature-port_scope__ehEaA .rail__list li { flex: 0 0 auto; scroll-snap-align: start; }
  .feature-port_scope__ehEaA .rail__list a { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); align-items: center; white-space: nowrap; }
  .feature-port_scope__ehEaA .rail__list a::before { display: none; }
  .feature-port_scope__ehEaA .rail__list a b { display: none; }
  .feature-port_scope__ehEaA .rail__list a[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--white); }
  .feature-port_scope__ehEaA .tsec { scroll-margin-top: 72px; }
  .feature-port_scope__ehEaA .tsec:first-child { padding-top: 36px; }
  .feature-port_scope__ehEaA .more,
.feature-port_scope__ehEaA .nope,
.feature-port_scope__ehEaA .isec { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .isec { gap: 8px; }
  .feature-port_scope__ehEaA .roles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .phero__copy { padding-left: 16px; padding-right: 16px; }
  .feature-port_scope__ehEaA .phero__h { font-size: clamp(36px, 10.4vw, 50px); }
  .feature-port_scope__ehEaA .phero__lede { font-size: 16.5px; }
  .feature-port_scope__ehEaA .phero__act { flex-direction: column; align-items: stretch; }
  .feature-port_scope__ehEaA .phero .hero__claim { justify-content: center; white-space: normal; text-align: center; line-height: 1.25; padding-top: 7px; padding-bottom: 7px; }
  .feature-port_scope__ehEaA .phero__jump { justify-content: center; }
  .feature-port_scope__ehEaA .nav__stand { display: none; }
  .feature-port_scope__ehEaA .tsec__h { font-size: clamp(28px, 8vw, 36px); }
  .feature-port_scope__ehEaA .vnote__top { flex-wrap: wrap; }
  .feature-port_scope__ehEaA .vnote__play { margin-left: 52px; }
  .feature-port_scope__ehEaA .stage { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-port_scope__ehEaA .five li:nth-child(n) { margin-left: 0; }
  .feature-port_scope__ehEaA .five li:nth-child(5) { grid-column: 1 / -1; justify-self: center; }
  .feature-port_scope__ehEaA .pillars { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .ledger::before { left: 30px; }
  .feature-port_scope__ehEaA .ledger__h,
.feature-port_scope__ehEaA .ledger__sub { padding-left: 42px; }
  .feature-port_scope__ehEaA .ledger__rows li { grid-template-columns: 64px minmax(0, 1fr); gap: 2px 10px; padding-left: 42px; padding-right: 12px; }
  .feature-port_scope__ehEaA .eveband { padding-left: 16px; padding-right: 16px; }
  .feature-port_scope__ehEaA .eveband__head { text-align: left; }
  .feature-port_scope__ehEaA .offer { border-radius: 12px; }
}
@media (max-width: 360px) {
  .feature-port_scope__ehEaA .vnote__outs li { grid-template-columns: 22px minmax(0, 1fr); }
  .feature-port_scope__ehEaA .vnote__outs span { grid-column: 2; white-space: normal; }
}
/* the animation switch does what reduced motion does */
.feature-port_scope__ehEaA.still *,
.feature-port_scope__ehEaA.still *::before,
.feature-port_scope__ehEaA.still *::after { animation: none !important; transition-duration: .001ms !important; }
.feature-port_scope__ehEaA.still { scroll-behavior: auto; }
.feature-port_scope__ehEaA .tjump--in { max-width: none; padding: 0; margin-top: clamp(32px, 4vw, 52px); }
.feature-port_scope__ehEaA .tjump ol { border-left: 1px solid var(--line); }
/* =========================================================
   v2 LOOK (Mark, 8 Oct 2026): the inner pages leave the homepage's sky behind — no stars, no evening sky, no dusk van.
   .phero--wall   hero with a slowly moving wall of real work (the trade photos, labelled), copy on ink
   .meter         rail progress: one segment per section, filled up to the one you're reading
   .rsec          plain roles section · .npanel  "who it isn't for" on a navy panel · .cframe  closing photo frame
   ========================================================= */
.feature-port_scope__ehEaA .phero--wall .phero__frame { background:
  radial-gradient(60% 80% at 100% 40%, rgba(31,122,150,.28) 0%, rgba(3,15,30,0) 70%),
  linear-gradient(160deg, #030f1e 0%, #061933 55%, #0b2a52 100%); }
.feature-port_scope__ehEaA .phero--wall .phero__copy { max-width: min(760px, 50%); }
.feature-port_scope__ehEaA .wall { position: absolute; top: -14%; bottom: -14%; right: -3%; width: 58%; z-index: -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  transform: rotate(-6deg); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in, xor; mask-composite: intersect; }
.feature-port_scope__ehEaA .wall__col { min-width: 0; overflow: hidden; }
.feature-port_scope__ehEaA .wall__track { display: flex; flex-direction: column; gap: 14px; animation: feature-port_sw-wall__wg4Z9 80s linear infinite; will-change: transform; }
.feature-port_scope__ehEaA .wall__col:nth-child(2) .wall__track { animation-duration: 96s; animation-direction: reverse; }
.feature-port_scope__ehEaA .wall__col:nth-child(3) .wall__track { animation-duration: 70s; }
@keyframes feature-port_sw-wall__wg4Z9 { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes feature-port_sw-wall-x__OLCP_ { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
.feature-port_scope__ehEaA .wall__row { display: none; }
.feature-port_scope__ehEaA .tile { position: relative; flex: 0 0 auto; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: #0a1d33; }
.feature-port_scope__ehEaA .tile img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 55% 40%); object-position: var(--pos, 55% 40%); }
.feature-port_scope__ehEaA .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,15,30,.55) 0%, rgba(3,15,30,0) 40%); }
.feature-port_scope__ehEaA .tile figcaption { position: absolute; z-index: 1; left: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(3,15,30,.66); backdrop-filter: blur(6px);
  font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--white); white-space: nowrap; }
.feature-port_scope__ehEaA .phero.is-off .wall__track { animation-play-state: paused; }
.feature-port_scope__ehEaA .meter { display: grid; grid-template-columns: repeat(var(--n, 18), minmax(0, 1fr)); gap: 3px; margin-top: 12px; }
.feature-port_scope__ehEaA .meter i { height: 6px; border-radius: 3px; background: rgba(11,55,108,.14); overflow: hidden; }
.feature-port_scope__ehEaA .meter i::after { content: ""; display: block; height: 100%; background: var(--sky); opacity: 0; transition: opacity .35s; }
.feature-port_scope__ehEaA .meter i.on::after { opacity: 1; }
.feature-port_scope__ehEaA .rail--now .rail__now { width: 100%; }
.feature-port_scope__ehEaA .rsec { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .rsec__head { max-width: 820px; }
.feature-port_scope__ehEaA .rsec .roles li { background: var(--white); border: 1px solid var(--line); box-shadow: none; }
.feature-port_scope__ehEaA .npanel { margin: clamp(60px, 7vw, 100px) var(--inset) 0; padding: clamp(48px, 6vw, 96px) var(--pad); border-radius: var(--r); background: var(--navy); }
.feature-port_scope__ehEaA .npanel .nope { margin: 0 auto; }
.feature-port_scope__ehEaA .cframe { padding: var(--inset) var(--inset) 0; }
.feature-port_scope__ehEaA .cframe__frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); min-height: clamp(540px, 44vw, 880px); display: flex; align-items: flex-end; justify-content: flex-end; color: var(--on-ink); background: var(--ink); }
.feature-port_scope__ehEaA .cframe__img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 30% 30%); object-position: var(--pos, 30% 30%); z-index: -2; }
.feature-port_scope__ehEaA .cframe__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(3,15,30,.9) 0%, rgba(3,15,30,.66) 36%, rgba(3,15,30,0) 64%), linear-gradient(0deg, rgba(3,15,30,.5) 0%, rgba(3,15,30,0) 45%); }
.feature-port_scope__ehEaA .cframe__copy { max-width: 600px; padding: clamp(28px, 4vw, 56px); }
.feature-port_scope__ehEaA .cframe__h { font-family: var(--display); font-weight: 600; font-size: clamp(42px, 5.4vw, 80px); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.feature-port_scope__ehEaA .cframe__sub { margin: 18px 0; font-size: 18px; color: #e3e9f0; }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .phero--wall .phero__copy { max-width: none; margin-top: 0; padding-top: 8px; }
  .feature-port_scope__ehEaA .wall { position: relative; inset: auto; width: auto; height: auto; transform: none; display: block; margin: 4px 0 8px; z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); order: 1; }
  .feature-port_scope__ehEaA .wall__col { display: none; }
  .feature-port_scope__ehEaA .wall__row { display: block; overflow: hidden; }
  .feature-port_scope__ehEaA .wall__row .wall__track { flex-direction: row; width: -moz-max-content; width: max-content; gap: 12px; animation: feature-port_sw-wall-x__OLCP_ 70s linear infinite; }
  .feature-port_scope__ehEaA .wall__row .tile { width: 150px; }
  .feature-port_scope__ehEaA .cframe__frame { flex-direction: column; justify-content: flex-end; min-height: 0; }
  .feature-port_scope__ehEaA .cframe__img { position: relative; height: 64vw; min-height: 300px; }
  .feature-port_scope__ehEaA .cframe__shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(3,15,30,0) 30%); height: calc(64vw + 2px); min-height: 302px; bottom: auto; }
  .feature-port_scope__ehEaA .cframe__copy { max-width: none; margin-top: -40px; }
}
@media (max-width: 640px) { .feature-port_scope__ehEaA .cframe__copy { padding: 0 20px 28px; } }
.feature-port_scope__ehEaA .nav__stand { position: relative; z-index: 1; padding: 4px 10px; border-radius: 999px; background: rgba(3,15,30,.7); }
/* v3 (Mark, 8 Oct 2026): the wall starts right after the copy — no dead band between text and photos on wide screens */
.feature-port_scope__ehEaA .wall { left: calc(min(760px, 50%) + 20px); right: -3%; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
/* Industry finder as tiles (wide screens; idea from Mobbin: Cohere's industry cards, Retool's photo/colour grid).
   Photo tiles where SendWork has a real photo of that work; solid tiles for the rest. Phones keep the text grid. */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .tjump--tiles { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .tjump--tiles .tjump__label { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
  .feature-port_scope__ehEaA .tjump--tiles ol { border: 0; gap: 8px; }
  .feature-port_scope__ehEaA .tjump--tiles li { border: 0; }
  .feature-port_scope__ehEaA .tjump--tiles ol a { position: relative; isolation: isolate; overflow: hidden; justify-content: flex-end; min-height: 0; aspect-ratio: 4 / 3; padding: 12px 14px; border-radius: 12px; background: var(--navy); }
  .feature-port_scope__ehEaA .tjump--tiles li:nth-child(3n+2) a { background: var(--ink); }
  .feature-port_scope__ehEaA .tjump--tiles li:nth-child(4n+3) a { background: #14466f; }
  .feature-port_scope__ehEaA .tjump--tiles ol a b { position: absolute; top: 10px; left: 14px; color: var(--sky); }
  .feature-port_scope__ehEaA .tjump--tiles ol a span { color: var(--white); font-size: clamp(14.5px, .95vw, 17px); }
  .feature-port_scope__ehEaA .tjump--tiles ol a img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 55% 35%); object-position: var(--pos, 55% 35%); transition: transform .6s var(--ease); }
  .feature-port_scope__ehEaA .tjump--tiles ol a:has(img)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3,15,30,.85) 0%, rgba(3,15,30,.15) 55%, rgba(3,15,30,.55) 100%); }
  .feature-port_scope__ehEaA .tjump--tiles ol a:hover { background-color: var(--navy); }
  .feature-port_scope__ehEaA .tjump--tiles ol a:hover img { transform: scale(1.05); }
  .feature-port_scope__ehEaA .tjump--tiles .tjump__more { grid-column: 1; }
}
@media (max-width: 900px) { .feature-port_scope__ehEaA .tjump--tiles ol a img { display: none; } }
/* closing frame, split: photo left, copy on ink right — the copy never sits on the people */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .cframe--split .cframe__frame { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .feature-port_scope__ehEaA .cframe--split .cframe__img { position: relative; inset: auto; height: 100%; min-height: clamp(520px, 40vw, 820px); z-index: 0; }
  .feature-port_scope__ehEaA .cframe--split .cframe__shade { display: none; }
  .feature-port_scope__ehEaA .cframe--split .cframe__copy { max-width: 560px; }
}
/* wide screens: a fourth column (other markets' photos of the same trades), so tiles stay a sensible size */
.feature-port_scope__ehEaA .wall__col--wide { display: none; }
@media (min-width: 1400px) {
  .feature-port_scope__ehEaA .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature-port_scope__ehEaA .wall__col--wide { display: block; }
  .feature-port_scope__ehEaA .wall__col--wide .wall__track { animation-duration: 90s; animation-direction: reverse; }
}
/* anchor jumps land below the floating bar; tile numbers stay legible on photos */
.feature-port_scope__ehEaA #find-your-industry,
.feature-port_scope__ehEaA .isec,
.feature-port_scope__ehEaA .other,
.feature-port_scope__ehEaA #industries { scroll-margin-top: 96px; }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .tjump--tiles ol a b { padding: 2px 8px; border-radius: 999px; background: rgba(3,15,30,.6); line-height: 1.4; top: 8px; left: 10px; }
}
/* tablet and phone: the strip runs the full width (the desktop "start after the copy" offset must not apply here) */
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .wall { left: auto; right: auto; width: auto; margin: 6px 0 10px; }
  .feature-port_scope__ehEaA .wall__row .tile { width: clamp(150px, 24vw, 210px); }
}
/* desktop: the copy column is only as wide as the text, so the wall sits close beside it */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .phero--wall .phero__copy { max-width: min(680px, 46%); }
  .feature-port_scope__ehEaA .wall { left: calc(min(680px, 46%) + 12px); }
}
/* translation-safe (es / pt / fr run 20–30% longer): wall labels wrap, the hero headline steps down a little and its
   column may widen on big screens */
.feature-port_scope__ehEaA .tile figcaption { white-space: normal; max-width: calc(100% - 20px); line-height: 1.25; }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .phero--wall .phero__copy { max-width: min(760px, 46%); }
  .feature-port_scope__ehEaA .wall { left: calc(min(760px, 46%) + 12px); }
  .feature-port_scope__ehEaA .phero--wall .phero__h { font-size: clamp(38px, min(4.9vw, 8.6svh), 88px); }
  [data-audience-page="trades"] .feature-port_scope__ehEaA:lang(fr) .phero--wall .phero__h,
[data-audience-page="trades"] .feature-port_scope__ehEaA:lang(es) .phero--wall .phero__h,
[data-audience-page="trades"] .feature-port_scope__ehEaA:lang(pt) .phero--wall .phero__h { font-size: clamp(36px, min(4.4vw, 7.8svh), 80px); }
}
/* language switch: solid on the photo wall, plus a plain row in the prototype strip */
.feature-port_scope__ehEaA .phero .lang { background: rgba(3,15,30,.82); border-color: rgba(255,255,255,.45); }
.feature-port_scope__ehEaA .proto__langs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: var(--panel-light); border: 1px solid var(--line); }
.feature-port_scope__ehEaA .proto__langs a { padding: 2px 10px; border-radius: 999px; font-family: var(--ui); font-weight: 600; color: var(--navy); text-decoration: none; }
.feature-port_scope__ehEaA .proto__langs a:hover { background: var(--white); }
.feature-port_scope__ehEaA .proto__langs a[aria-current] { background: var(--navy); color: var(--white); }
/* =========================================================
   INDUSTRY PAGE BLOCKS (first used on /trades/plumbers, 8 Oct 2026)
   .phero--split  hero: copy on ink left, one real photo right, a ledger job card over it whose lines tick in
   .ba            before / with: the trade's week today vs on one record (Mobbin: V7, Cake, Ramp)
   .track         one job, start to finish: stops on a line that fills as you scroll (Mobbin: Deel, Oura)
   .kcards        what SendWork keeps straight, six cards with the item icons
   .duo           two ways the business is run · .back  link back to the hub
   ========================================================= */
.feature-port_scope__ehEaA .phero--split .phero__frame { background: radial-gradient(60% 80% at 100% 40%, rgba(31,122,150,.25) 0%, rgba(3,15,30,0) 70%), linear-gradient(160deg, #030f1e 0%, #061933 55%, #0b2a52 100%); }
.feature-port_scope__ehEaA .phero--split .phero__copy { max-width: min(700px, 48%); }
.feature-port_scope__ehEaA .shot { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.feature-port_scope__ehEaA .shot img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--pos, 62% 40%); object-position: var(--pos, 62% 40%); transform-origin: 60% 45%; animation: feature-port_sw-zoom__9WFE7 34s cubic-bezier(.33, 0, .45, 1) infinite alternate; }
.feature-port_scope__ehEaA .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,15,30,.55) 0%, rgba(3,15,30,0) 45%); }
.feature-port_scope__ehEaA .phero.is-off .shot img { animation-play-state: paused; }
.feature-port_scope__ehEaA .jcard { position: absolute; z-index: 1; right: clamp(20px, 4vw, 64px); bottom: clamp(24px, 4vw, 56px); width: min(360px, 34%); padding: 4px 0 6px; border-radius: 6px 6px 12px 12px; background: #fffdf6; border: 1px solid #ebe2cc; color: var(--text);
  box-shadow: 0 1px 0 #f4ecd9, 0 4px 0 -1px #fffdf6, 0 4px 0 0 #ebe2cc, 0 30px 60px -24px rgba(3,15,30,.7); }
.feature-port_scope__ehEaA .jcard::before { content: ""; position: absolute; top: 0; bottom: 0; left: 38px; width: 1px; background: rgba(200,86,62,.35); }
.feature-port_scope__ehEaA .jcard__h { padding: 8px 14px 0 50px; font-family: var(--hand); font-weight: 600; font-size: 25px; line-height: 1.1; color: var(--sky-deep); }
.feature-port_scope__ehEaA .jcard__sub { padding: 0 14px 8px 50px; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .jcard li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 10px; padding: 8px 14px 8px 50px; border-top: 1px solid rgba(11,55,108,.13); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.feature-port_scope__ehEaA .jcard li .ledger__t { font-size: 15px; }
.feature-port_scope__ehEaA .jcard li .ledger__s { font-size: 12.5px; }
.feature-port_scope__ehEaA .jcard.is-armed li:not(.in) { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA .jcard.is-done li[data-st="wait"] .ledger__s::before { animation: feature-port_pulse__Tz9YZ 1.6s var(--ease) infinite; }
.feature-port_scope__ehEaA .ba { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .ba__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--inset); margin-top: clamp(32px, 4vw, 52px); }
.feature-port_scope__ehEaA .ba__col { border-radius: var(--r); padding: clamp(22px, 2.6vw, 38px); }
.feature-port_scope__ehEaA .ba__col--now { background: var(--panel-light); border: 1px solid var(--line); }
.feature-port_scope__ehEaA .ba__col--with { background: var(--navy); color: #d5e0ec; }
.feature-port_scope__ehEaA .ba__k { font-family: var(--ui); font-weight: 700; font-size: 15px; color: var(--text-2); }
.feature-port_scope__ehEaA .ba__col--with .ba__k { color: var(--sky); }
.feature-port_scope__ehEaA .ba__col ul { margin-top: 12px; }
.feature-port_scope__ehEaA .ba__col li { position: relative; padding: 14px 0 14px 32px; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.5; }
.feature-port_scope__ehEaA .ba__col--with li { border-top-color: var(--line-ink); color: var(--white); }
.feature-port_scope__ehEaA .ba__col--now li { color: var(--text-2); }
.feature-port_scope__ehEaA .ba__col li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 16px; height: 16px; }
.feature-port_scope__ehEaA .ba__col--now li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%239a4a1c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.feature-port_scope__ehEaA .ba__col--with li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.5c1.6 1.2 3 2.7 4.2 4.6C8.9 9 11.8 5.1 15.8 2.6' fill='none' stroke='%2348acc8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.feature-port_scope__ehEaA .track { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .track__rail { position: relative; margin-top: clamp(36px, 4vw, 56px); }
.feature-port_scope__ehEaA .track__line { position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 3px; background: rgba(11,55,108,.12); }
.feature-port_scope__ehEaA .track__line i { position: absolute; inset: 0; border-radius: 3px; background: var(--sky); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.feature-port_scope__ehEaA .track ol { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.feature-port_scope__ehEaA .track li { position: relative; padding-top: 38px; transition: opacity .5s var(--ease); }
.feature-port_scope__ehEaA .track li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--light); border: 3px solid var(--sky); box-sizing: border-box; }
.feature-port_scope__ehEaA .track li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); opacity: 1; transition: opacity .4s; }
.feature-port_scope__ehEaA.motion .track li:not(.on)::after { opacity: 0; }
.feature-port_scope__ehEaA.motion .track li:not(.on) { opacity: .38; }
.feature-port_scope__ehEaA .track__when { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.3vw, 23px); color: var(--navy); }
.feature-port_scope__ehEaA .track__k { display: block; margin-top: 6px; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .track__t { display: block; margin-top: 2px; font-weight: 600; font-size: clamp(15.5px, 1vw, 18px); line-height: 1.35; color: var(--navy); }
.feature-port_scope__ehEaA .track__s { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .track__s::before { content: "✓"; }
.feature-port_scope__ehEaA .track li[data-st="wait"] .track__s { padding: 3px 10px; border-radius: 999px; background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .track li[data-st="wait"] .track__s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.feature-port_scope__ehEaA .track__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.feature-port_scope__ehEaA .track__foot b { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.3vw, 22px); color: var(--navy); }
.feature-port_scope__ehEaA .kcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--inset); margin-top: clamp(32px, 4vw, 52px); }
.feature-port_scope__ehEaA .kcards li { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 2vw, 28px); }
.feature-port_scope__ehEaA .kcards svg { width: 28px; height: 28px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .kcards h3 { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.5vw, 26px); line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .kcards p { margin-top: 8px; color: var(--text-2); }
.feature-port_scope__ehEaA .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--inset); margin-top: clamp(32px, 4vw, 52px); }
.feature-port_scope__ehEaA .duo li { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 2.6vw, 38px); }
.feature-port_scope__ehEaA .back { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 7vw, 100px) var(--pad) 0; }
.feature-port_scope__ehEaA .back a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r); background: var(--panel-light); border: 1px solid var(--line); text-decoration: none; transition: background-color .2s; }
.feature-port_scope__ehEaA .back a:hover { background: var(--white); }
.feature-port_scope__ehEaA .back b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.8vw, 30px); color: var(--navy); }
.feature-port_scope__ehEaA .back span { color: var(--text-2); }
.feature-port_scope__ehEaA .back i { font-style: normal; font-family: var(--ui); font-weight: 800; font-size: 26px; color: var(--sky-deep); }
@media (max-width: 1100px) {
  .feature-port_scope__ehEaA .track ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .feature-port_scope__ehEaA .track__line { display: none; }
  .feature-port_scope__ehEaA .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .phero--split .phero__copy { max-width: none; order: 2; margin-top: 0; }
  .feature-port_scope__ehEaA .shot { position: relative; order: 1; width: 100%; height: 62vw; min-height: 300px; max-height: 520px; margin-top: -86px; z-index: -1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%); }
  .feature-port_scope__ehEaA .jcard { position: relative; order: 1; right: auto; bottom: auto; width: auto; max-width: 420px; margin: -110px 16px 8px auto; }
  .feature-port_scope__ehEaA .ba__grid,
.feature-port_scope__ehEaA .duo { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .track ol { grid-template-columns: 1fr; row-gap: 0; }
  .feature-port_scope__ehEaA .track li { padding: 0 0 22px 34px; }
  .feature-port_scope__ehEaA .track li::before { top: 2px; }
  .feature-port_scope__ehEaA .track li::after { top: 6px; }
  .feature-port_scope__ehEaA .track__line { display: block; left: 7px; right: auto; top: 6px; bottom: 22px; width: 3px; height: auto; }
  .feature-port_scope__ehEaA .track__line i { transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
}
@media (max-width: 640px) { .feature-port_scope__ehEaA .kcards { grid-template-columns: 1fr; } .feature-port_scope__ehEaA .jcard { margin-left: 16px; } }
/* split hero: the photo starts right after the copy, like the wall (no dead band on wide screens) */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .phero--split .phero__copy { max-width: min(760px, 46%); }
  .feature-port_scope__ehEaA .shot { left: calc(min(760px, 46%) + 12px); width: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
  .feature-port_scope__ehEaA .phero--split .phero__h { font-size: clamp(38px, min(4.9vw, 8.6svh), 88px); }
}
@media (max-width: 640px) { .feature-port_scope__ehEaA .shot { height: 72vw; } .feature-port_scope__ehEaA .jcard { margin: -56px 12px 6px 28%; max-width: none; } .feature-port_scope__ehEaA .jcard li:first-child { display: none; } .feature-port_scope__ehEaA .jcard { margin: -56px 12px 6px 12px; } .feature-port_scope__ehEaA .jcard .ledger__s { white-space: normal; } }
.feature-port_scope__ehEaA .isec__more { margin-top: 14px; }
.feature-port_scope__ehEaA .isec__more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--ui); font-weight: 700; font-size: 15px; color: var(--sky-deep); text-decoration: underline; text-underline-offset: 4px; }
/* =========================================================
   FEATURE PAGE BLOCKS (first used on /features/quotes-and-invoicing, 8 Oct 2026)
   .story  scroll story: steps on the left light up as you scroll; one sample document on the right changes with them
           (Mobbin: Midday "How it works", Acctual's invoice-on-paper). States crossfade (opacity only); without JS or with
           motion off the document shows its final state and every step is lit.
   .pay    payments by market: country tabs swap the payment methods shown (Mobbin: Stripe "Global payments")
   ========================================================= */
.feature-port_scope__ehEaA .story { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(24px, 3vw, 40px); align-items: start; }
.feature-port_scope__ehEaA .story__steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; min-height: 68vh; padding: 28px 0; border-top: 1px solid var(--line); transition: opacity .45s var(--ease); }
.feature-port_scope__ehEaA .story__steps li:last-child { min-height: 0; }
.feature-port_scope__ehEaA.motion .story__steps li:not(.on) { opacity: .32; }
.feature-port_scope__ehEaA .story__n { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--sky-deep); }
.feature-port_scope__ehEaA .story__when { display: block; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .story__t { display: block; margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.6vw, 28px); line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .story__s { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--ui); font-weight: 700; font-size: 13.5px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .story__s::before { content: "✓"; }
.feature-port_scope__ehEaA .story__panel { position: sticky; top: 92px; }
.feature-port_scope__ehEaA .story__cap { margin-top: 12px; font-size: 13px; color: var(--text-2); text-align: center; }
.feature-port_scope__ehEaA .doc { position: relative; padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.4vw, 36px); border-radius: 6px; background: #fff; color: var(--text); font-size: 14.5px; line-height: 1.45;
  box-shadow: 0 1px 0 #ebe8e0, 0 6px 0 -2px #fff, 0 6px 0 -1px #e6e1d6, 0 40px 70px -40px rgba(3,15,30,.55); }
.feature-port_scope__ehEaA .doc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--navy); }
.feature-port_scope__ehEaA .doc__co { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.feature-port_scope__ehEaA .doc__type { font-family: var(--ui); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--sky-deep); text-align: right; }
.feature-port_scope__ehEaA .doc__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .doc__stamp { margin-top: 14px; }
.feature-port_scope__ehEaA .doc__stamp span { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #dff1f7; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .doc__stamp span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.feature-port_scope__ehEaA .doc__stamp span[data-s~="6"] { background: #e3f5ea; }
.feature-port_scope__ehEaA .doc__stamp span[data-s~="6"]::before { background: #2f9e62; }
.feature-port_scope__ehEaA .doc table { width: 100%; margin-top: 16px; border-collapse: collapse; }
.feature-port_scope__ehEaA .doc th { padding: 6px 0; border-bottom: 1px solid var(--line); text-align: left; font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .doc td { padding: 8px 0; border-bottom: 1px solid rgba(11,55,108,.08); vertical-align: top; }
.feature-port_scope__ehEaA .doc th:nth-child(2),
.feature-port_scope__ehEaA .doc td:nth-child(2) { width: 44px; text-align: center; }
.feature-port_scope__ehEaA .doc th:last-child,
.feature-port_scope__ehEaA .doc td:last-child { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .doc__sum { margin-top: 10px; margin-left: auto; width: min(100%, 320px); }
.feature-port_scope__ehEaA .doc__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .doc__row b { font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .doc__row--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .doc__row--due { font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .doc__how { margin-top: 18px; padding: 12px 14px; border-radius: 8px; background: var(--panel-light); }
.feature-port_scope__ehEaA .doc__how b { display: block; font-family: var(--ui); font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .doc__how span { display: block; color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .pay { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px clamp(32px, 5vw, 80px); align-items: start; }
.feature-port_scope__ehEaA .pay__points { margin-top: 22px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .pay__points li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.feature-port_scope__ehEaA .pay__points b { display: block; color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .paybox { border-radius: var(--r); background: var(--ink); color: var(--on-ink); padding: clamp(20px, 2.4vw, 34px); }
.feature-port_scope__ehEaA .paybox__pick { font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--on-ink-2); }
.feature-port_scope__ehEaA .paybox__tabs { display: none; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.feature-port_scope__ehEaA.js .paybox__tabs { display: flex; }
.feature-port_scope__ehEaA .paybox__tabs button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-ink); font-family: var(--ui); font-weight: 600; font-size: 13.5px; color: #dbe3ec; transition: background-color .2s, color .2s, border-color .2s; }
.feature-port_scope__ehEaA .paybox__tabs button:hover { border-color: var(--sky); }
.feature-port_scope__ehEaA .paybox__tabs button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.feature-port_scope__ehEaA .paylist { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA.js .paylist:not(.on) { display: none; }
.feature-port_scope__ehEaA .paylist h3 { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--white); }
.feature-port_scope__ehEaA.js .paylist h3 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feature-port_scope__ehEaA .paylist ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.feature-port_scope__ehEaA .paylist li { padding: 8px 13px; border-radius: 10px; background: #0d2742; border: 1px solid var(--line-ink); font-family: var(--ui); font-weight: 600; font-size: 14.5px; color: var(--white); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA .paylist li.paylist__online { background: var(--sky); border-color: var(--sky); color: var(--ink); font-weight: 800; }
.feature-port_scope__ehEaA .paylist.is-enter li { opacity: 0; transform: translateY(6px); }
.feature-port_scope__ehEaA .paybox__note { margin-top: 18px; font-size: 13px; color: var(--on-ink-2); }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .story__grid,
.feature-port_scope__ehEaA .pay { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .story__steps li { min-height: 0; }
  .feature-port_scope__ehEaA .story__panel { position: static; order: 2; }
  .feature-port_scope__ehEaA.motion .story__steps li:not(.on) { opacity: 1; }
}
@media (max-width: 480px) { .feature-port_scope__ehEaA .doc { font-size: 13.5px; } .feature-port_scope__ehEaA .doc th:last-child,
.feature-port_scope__ehEaA .doc td:last-child { width: 82px; } }
/* story v2 (Mark, 8 Oct 2026): states live on the panel, so one story can switch between the document and the Time tab.
   The document separates THE WORK (description + fixed price or hourly labor) from PARTS AND MATERIALS (line items:
   qty × unit). */
.feature-port_scope__ehEaA .story__panel .x { display: grid; }
.feature-port_scope__ehEaA .story__panel .x > * { grid-area: 1 / 1; opacity: 0; transition: opacity .45s var(--ease); }
.feature-port_scope__ehEaA .story__panel[data-step="1"] [data-s~="1"],
.feature-port_scope__ehEaA .story__panel[data-step="2"] [data-s~="2"],
.feature-port_scope__ehEaA .story__panel[data-step="3"] [data-s~="3"],
.feature-port_scope__ehEaA .story__panel[data-step="4"] [data-s~="4"],
.feature-port_scope__ehEaA .story__panel[data-step="5"] [data-s~="5"],
.feature-port_scope__ehEaA .story__panel[data-step="6"] [data-s~="6"] { opacity: 1; }
.feature-port_scope__ehEaA .story__panel .x > [data-s] { pointer-events: none; }
.feature-port_scope__ehEaA .story__panel[data-step="1"] .x > [data-s~="1"],
.feature-port_scope__ehEaA .story__panel[data-step="2"] .x > [data-s~="2"],
.feature-port_scope__ehEaA .story__panel[data-step="3"] .x > [data-s~="3"],
.feature-port_scope__ehEaA .story__panel[data-step="4"] .x > [data-s~="4"],
.feature-port_scope__ehEaA .story__panel[data-step="5"] .x > [data-s~="5"],
.feature-port_scope__ehEaA .story__panel[data-step="6"] .x > [data-s~="6"] { pointer-events: auto; }
.feature-port_scope__ehEaA .doc__type { min-height: 1.2em; }
.feature-port_scope__ehEaA .doc__work { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: #f6f8fb; border: 1px solid rgba(11,55,108,.08); }
.feature-port_scope__ehEaA .doc__h { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--text-2); }
.feature-port_scope__ehEaA .doc__work p { margin-top: 4px; color: var(--text); }
.feature-port_scope__ehEaA .doc__work .doc__row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(11,55,108,.18); }
.feature-port_scope__ehEaA .doc__parts { margin-top: 16px; }
.feature-port_scope__ehEaA .doc table { margin-top: 6px; }
.feature-port_scope__ehEaA .doc th:nth-child(2),
.feature-port_scope__ehEaA .doc td:nth-child(2) { width: 40px; text-align: center; }
.feature-port_scope__ehEaA .doc th:nth-child(3),
.feature-port_scope__ehEaA .doc td:nth-child(3) { width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .doc th:last-child,
.feature-port_scope__ehEaA .doc td:last-child { width: 88px; }
/* the Time tab, being filled in (hourly story step 3) */
.feature-port_scope__ehEaA .tform { padding: clamp(20px, 2.2vw, 30px); border-radius: 12px; background: #fff; color: var(--text); box-shadow: 0 40px 70px -40px rgba(3,15,30,.55); border: 1px solid var(--line); }
.feature-port_scope__ehEaA .tform__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .tform__top b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.feature-port_scope__ehEaA .tform__top span { font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .tform__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); gap: 10px 12px; margin-top: 14px; }
.feature-port_scope__ehEaA .tform__f { position: relative; }
.feature-port_scope__ehEaA .tform__f label,
.feature-port_scope__ehEaA .tform__k { display: block; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .tform__box { position: relative; display: grid; align-items: center; min-height: 42px; margin-top: 4px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(11,55,108,.22); background: #fbfcfd; font-size: 14.5px; color: var(--navy); }
.feature-port_scope__ehEaA .tform__box > * { grid-area: 1 / 1; transition: opacity .3s; }
.feature-port_scope__ehEaA .tform__f--wide { grid-column: 1 / -1; }
.feature-port_scope__ehEaA .tform__quick { margin-top: 12px; }
.feature-port_scope__ehEaA .tform__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.feature-port_scope__ehEaA .tform__chips i { position: relative; display: inline-grid; place-items: center; min-width: 40px; min-height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(11,55,108,.2); font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .tform__chips i::after { content: ""; position: absolute; inset: -1px; border-radius: 8px; background: var(--sky); opacity: 0; transition: opacity .25s; z-index: 0; }
.feature-port_scope__ehEaA .tform__chips i span { position: relative; z-index: 1; }
.feature-port_scope__ehEaA .tform__list { margin-top: 14px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .tform__list li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 48px; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(11,55,108,.08); font-size: 13.5px; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .tform__list li b { font-weight: 700; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .tform__sum { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--ui); font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .tform__sum .x2 { display: grid; }
.feature-port_scope__ehEaA .tform__sum .x2 > * { grid-area: 1 / 1; transition: opacity .35s; }
/* the fill-in sequence: JS steps data-f from 0 to 8 (empty, date, hours, description, saved, then the second entry);
   the HTML ships data-f="8" (the finished state) for no-JS, reduced motion and phones */
.feature-port_scope__ehEaA .tform .v1.d,
.feature-port_scope__ehEaA .tform .v1.h,
.feature-port_scope__ehEaA .tform .v1.t,
.feature-port_scope__ehEaA .tform .c4::after,
.feature-port_scope__ehEaA .tform .row1,
.feature-port_scope__ehEaA .tform .sum1,
.feature-port_scope__ehEaA .tform .v2.d,
.feature-port_scope__ehEaA .tform .v2.h,
.feature-port_scope__ehEaA .tform .v2.t,
.feature-port_scope__ehEaA .tform .c25::after,
.feature-port_scope__ehEaA .tform .row2,
.feature-port_scope__ehEaA .tform .sum2,
.feature-port_scope__ehEaA .tform .ph.d,
.feature-port_scope__ehEaA .tform .ph.h,
.feature-port_scope__ehEaA .tform .ph.t { opacity: 0; }
.feature-port_scope__ehEaA .tform .row1,
.feature-port_scope__ehEaA .tform .row2 { transform: translateY(6px); }
.feature-port_scope__ehEaA .tform[data-f="1"] .v1.d,
.feature-port_scope__ehEaA .tform[data-f="2"] .v1.d,
.feature-port_scope__ehEaA .tform[data-f="3"] .v1.d { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="2"] .v1.h,
.feature-port_scope__ehEaA .tform[data-f="3"] .v1.h { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="3"] .v1.t { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="2"] .c4::after,
.feature-port_scope__ehEaA .tform[data-f="3"] .c4::after { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="4"] .row1,
.feature-port_scope__ehEaA .tform[data-f="5"] .row1,
.feature-port_scope__ehEaA .tform[data-f="6"] .row1,
.feature-port_scope__ehEaA .tform[data-f="7"] .row1,
.feature-port_scope__ehEaA .tform[data-f="8"] .row1 { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="4"] .sum1,
.feature-port_scope__ehEaA .tform[data-f="5"] .sum1,
.feature-port_scope__ehEaA .tform[data-f="6"] .sum1,
.feature-port_scope__ehEaA .tform[data-f="7"] .sum1 { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="5"] .v2.d,
.feature-port_scope__ehEaA .tform[data-f="6"] .v2.d,
.feature-port_scope__ehEaA .tform[data-f="7"] .v2.d { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="6"] .v2.h,
.feature-port_scope__ehEaA .tform[data-f="7"] .v2.h { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="7"] .v2.t { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="6"] .c25::after,
.feature-port_scope__ehEaA .tform[data-f="7"] .c25::after { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="8"] .row2 { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="8"] .sum2 { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="0"] .ph.d,
.feature-port_scope__ehEaA .tform[data-f="4"] .ph.d,
.feature-port_scope__ehEaA .tform[data-f="8"] .ph.d { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="0"] .ph.h,
.feature-port_scope__ehEaA .tform[data-f="1"] .ph.h,
.feature-port_scope__ehEaA .tform[data-f="4"] .ph.h,
.feature-port_scope__ehEaA .tform[data-f="5"] .ph.h,
.feature-port_scope__ehEaA .tform[data-f="8"] .ph.h { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="0"] .ph.t,
.feature-port_scope__ehEaA .tform[data-f="1"] .ph.t,
.feature-port_scope__ehEaA .tform[data-f="2"] .ph.t,
.feature-port_scope__ehEaA .tform[data-f="4"] .ph.t,
.feature-port_scope__ehEaA .tform[data-f="5"] .ph.t,
.feature-port_scope__ehEaA .tform[data-f="6"] .ph.t,
.feature-port_scope__ehEaA .tform[data-f="8"] .ph.t { opacity: 1; }
.feature-port_scope__ehEaA .tform[data-f="4"] .row1,
.feature-port_scope__ehEaA .tform[data-f="5"] .row1,
.feature-port_scope__ehEaA .tform[data-f="6"] .row1,
.feature-port_scope__ehEaA .tform[data-f="7"] .row1,
.feature-port_scope__ehEaA .tform[data-f="8"] .row1,
.feature-port_scope__ehEaA .tform[data-f="8"] .row2 { transform: none; }
.feature-port_scope__ehEaA .tform__cap { margin-top: 12px; font-size: 13px; color: var(--text-2); text-align: center; }
/* history tab example */
.feature-port_scope__ehEaA .hist { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px clamp(32px, 5vw, 80px); align-items: start; }
.feature-port_scope__ehEaA .hpanel { border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(3,15,30,.4); overflow: hidden; }
.feature-port_scope__ehEaA .hpanel__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel-light); }
.feature-port_scope__ehEaA .hpanel__tabs span { padding: 7px 6px; border-radius: 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ui); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .hpanel__tabs span[aria-current] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(11,55,108,.12); }
.feature-port_scope__ehEaA .hpanel__title { padding: 14px 18px 4px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .hpanel ol { position: relative; padding: 6px 18px 16px; }
.feature-port_scope__ehEaA .hpanel ol::before { content: ""; position: absolute; left: 31px; top: 14px; bottom: 26px; width: 2px; background: rgba(11,55,108,.12); }
.feature-port_scope__ehEaA .hpanel li { position: relative; display: grid; grid-template-columns: 28px 86px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; font-size: 14px; transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA .hpanel li::before { content: ""; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--sky); }
.feature-port_scope__ehEaA .hpanel__t { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13px; }
.feature-port_scope__ehEaA .hpanel__e { color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .hpanel__a { justify-self: end; padding: 2px 9px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 11.5px; background: var(--panel-light); color: var(--text-2); }
.feature-port_scope__ehEaA .hpanel__a.cust { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .hpanel__a.sys { background: #f1ede2; color: #6b5a3a; }
.feature-port_scope__ehEaA.motion .hpanel:not(.in) li { opacity: 0; transform: translateX(-8px); }
.feature-port_scope__ehEaA .hpanel__cap { margin-top: 12px; font-size: 13px; color: var(--text-2); text-align: center; }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .hist { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .story__panel .x--panel { display: block; }
  .feature-port_scope__ehEaA .story__panel .x--panel > * { opacity: 1; margin-bottom: 14px; }
}
@media (max-width: 480px) {
  .feature-port_scope__ehEaA .hpanel li { grid-template-columns: 22px 70px minmax(0, 1fr); }
  .feature-port_scope__ehEaA .hpanel__a { grid-column: 3; justify-self: start; }
  .feature-port_scope__ehEaA .tform__list li { grid-template-columns: 80px minmax(0, 1fr) 40px; }
}
/* =========================================================
   VIEWS: three small animated views of the same jobs — Calendar, Kanban, Team Schedule (Mark, 8 Oct 2026).
   On screen: chips/cards appear one after another; the Henderson card moves Pending → Active once its deposit is in.
   Without JS / motion off: the finished state (card already in Active).
   ========================================================= */
.feature-port_scope__ehEaA .views { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .views__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--inset); margin-top: clamp(32px, 4vw, 52px); }
.feature-port_scope__ehEaA .vcard { display: flex; flex-direction: column; border-radius: var(--r); background: #fff; border: 1px solid var(--line); padding: 16px; box-shadow: 0 30px 60px -44px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .vcard__art { position: relative; min-height: 230px; padding: 12px; border-radius: 12px; background: var(--panel-light); }
.feature-port_scope__ehEaA .vcard h3 { margin-top: 16px; font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.5vw, 26px); color: var(--navy); }
.feature-port_scope__ehEaA .vcard p { margin-top: 6px; color: var(--text-2); }
.feature-port_scope__ehEaA .vchip { display: block; padding: 3px 6px; border-radius: 5px; font-family: var(--ui); font-weight: 700; font-size: 10.5px; line-height: 1.25; color: #fff; background: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA .vchip.b { background: var(--sky-deep); }
.feature-port_scope__ehEaA .vchip.c { background: #2f9e62; }
.feature-port_scope__ehEaA .vchip.d { background: #8a5a2b; }
.feature-port_scope__ehEaA.motion .vcard:not(.in) .vchip,
.feature-port_scope__ehEaA.motion .vcard:not(.in) .kcard { opacity: 0; transform: translateY(6px); }
/* calendar */
.feature-port_scope__ehEaA .cal__m { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--navy); }
.feature-port_scope__ehEaA .cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.feature-port_scope__ehEaA .cal__g b { font-family: var(--ui); font-weight: 700; font-size: 10px; color: var(--text-2); text-align: center; }
.feature-port_scope__ehEaA .cal__g span { min-height: 30px; padding: 2px; border-radius: 4px; background: #fff; font-size: 9.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feature-port_scope__ehEaA .cal__g span.o { background: transparent; }
.feature-port_scope__ehEaA .cal__g .vchip { font-size: 9px; padding: 2px 3px; }
/* kanban */
.feature-port_scope__ehEaA .kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feature-port_scope__ehEaA .kb__col { min-width: 0; }
.feature-port_scope__ehEaA .kb__h { font-family: var(--ui); font-weight: 700; font-size: 11.5px; color: var(--text-2); padding-bottom: 6px; border-bottom: 2px solid rgba(11,55,108,.15); }
.feature-port_scope__ehEaA .kb__list { display: grid; gap: 6px; margin-top: 8px; }
.feature-port_scope__ehEaA .kcard { position: relative; padding: 7px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--navy); line-height: 1.25;
  transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA .kcard i { display: grid; margin-top: 5px; font-style: normal; }
.feature-port_scope__ehEaA .kcard i > * { grid-area: 1 / 1; justify-self: start; padding: 1px 6px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 9.5px; transition: opacity .4s; }
.feature-port_scope__ehEaA .kb__q { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .kb__dep { background: #fde3e3; color: #9b2c2c; }
.feature-port_scope__ehEaA .kb__act { background: #dff1f7; color: var(--navy); }
/* the moving card: lives in Pending, ends in Active (one column across) */
.feature-port_scope__ehEaA .kcard--move { transform: translateX(calc(100% + 8px)); z-index: 2; }
.feature-port_scope__ehEaA .kcard--move .kb__dep { opacity: 0; }
.feature-port_scope__ehEaA.motion .vcard.in .kcard--move { animation: feature-port_sw-kmove__JsaUl 1s var(--ease) 1.8s both; }
.feature-port_scope__ehEaA.motion .vcard.in .kcard--move .kb__dep { animation: feature-port_sw-out__DERiC .3s 2.4s both; }
.feature-port_scope__ehEaA.motion .vcard.in .kcard--move .kb__act { animation: feature-port_sw-in__bImWx .3s 2.4s both; }
@keyframes feature-port_sw-kmove__JsaUl { 0%, 20% { transform: translateX(0); } 100% { transform: translateX(calc(100% + 8px)); } }
@keyframes feature-port_sw-out__DERiC { from { opacity: 1; } to { opacity: 0; } }
@keyframes feature-port_sw-in__bImWx { from { opacity: 0; } to { opacity: 1; } }
.feature-port_scope__ehEaA .kb__ghost { visibility: hidden; }
/* team schedule */
.feature-port_scope__ehEaA .ts { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 3px; }
.feature-port_scope__ehEaA .ts b { font-family: var(--ui); font-weight: 700; font-size: 10px; color: var(--text-2); text-align: center; }
.feature-port_scope__ehEaA .ts .ts__m { display: flex; align-items: center; font-family: var(--ui); font-weight: 700; font-size: 11px; color: var(--navy); }
.feature-port_scope__ehEaA .ts span { min-height: 44px; padding: 2px; border-radius: 4px; background: #fff; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feature-port_scope__ehEaA .views__cap { margin-top: 14px; font-size: 13px; color: var(--text-2); text-align: center; }
@media (max-width: 1100px) { .feature-port_scope__ehEaA .views__grid { grid-template-columns: 1fr; max-width: 560px; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .kcard--move { animation: none !important; transform: translateX(calc(100% + 8px)); } }
/* =========================================================
   PAYMENTS TAB for one job (Mark, 8 Oct 2026): automatic card payments and recorded ones together, one balance.
   On screen: data-p steps 0 → 3 (deposit by card · Cash App recorded · final by card); the HTML ships data-p="3".
   ========================================================= */
.feature-port_scope__ehEaA .ptab { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .ptab__copy .h2 { font-size: clamp(30px, 3vw, 46px); }
.feature-port_scope__ehEaA .ptab__points { margin-top: 18px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .ptab__points li { padding: 14px 0 14px 34px; position: relative; border-bottom: 1px solid var(--line); color: var(--text-2); }
.feature-port_scope__ehEaA .ptab__points li::before { content: ""; position: absolute; left: 0; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: #dff1f7; }
.feature-port_scope__ehEaA .ptab__points li:nth-child(1)::before { background: #48acc8; }
.feature-port_scope__ehEaA .ptab__points li:nth-child(2)::before { background: #e8ddc4; }
.feature-port_scope__ehEaA .ptab__points b { display: block; color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .ppanel { width: 100%; max-width: 680px; justify-self: end; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 64px -42px rgba(3,15,30,.45); overflow: hidden; }
.feature-port_scope__ehEaA .ppanel__body { padding: 16px 18px 18px; }
.feature-port_scope__ehEaA .ppanel__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .ppanel__head b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .pstat { display: grid; }
.feature-port_scope__ehEaA .pstat > * { grid-area: 1 / 1; justify-self: end; padding: 3px 10px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 12px; transition: opacity .35s; }
.feature-port_scope__ehEaA .pstat .s0 { background: #fde3e3; color: #9b2c2c; }
.feature-port_scope__ehEaA .pstat .s1,
.feature-port_scope__ehEaA .pstat .s2 { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .pstat .s3 { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .psum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.feature-port_scope__ehEaA .psum div { padding: 10px 12px; border-radius: 10px; background: var(--panel-light); }
.feature-port_scope__ehEaA .psum small { display: block; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .psum .x3 { display: grid; }
.feature-port_scope__ehEaA .psum .x3 > * { grid-area: 1 / 1; font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.3vw, 21px); color: var(--navy); font-variant-numeric: tabular-nums; transition: opacity .35s; }
.feature-port_scope__ehEaA .pbar { position: relative; height: 6px; margin-top: 12px; border-radius: 6px; background: rgba(11,55,108,.1); overflow: hidden; }
.feature-port_scope__ehEaA .pbar i { position: absolute; inset: 0; border-radius: 6px; background: var(--sky); transform-origin: 0 50%; transform: scaleX(1); transition: transform .7s var(--ease); }
.feature-port_scope__ehEaA .ppanel__rec { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.feature-port_scope__ehEaA .ppanel__rec span { font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .ppanel__btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; box-shadow: 0 0 0 0 rgba(72,172,200,.6); }
.feature-port_scope__ehEaA .plist { margin-top: 8px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .plist li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(11,55,108,.08); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .plist__ic { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .plist__ic svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .plist li.man .plist__ic { background: #f1ede2; color: #6b5a3a; }
.feature-port_scope__ehEaA .plist__t { font-weight: 600; color: var(--navy); font-size: 14.5px; }
.feature-port_scope__ehEaA .plist__t em { font-style: normal; font-weight: 500; color: var(--text-2); }
.feature-port_scope__ehEaA .plist__a { font-family: var(--display); font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .plist__w { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .plist__tag { padding: 1px 8px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 11px; background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .plist li.man .plist__tag { background: #f1ede2; color: #6b5a3a; }
.feature-port_scope__ehEaA .ppanel__cap { margin-top: 12px; font-size: 13px; color: var(--text-2); text-align: center; }
/* states: data-p 0 → 3 */
.feature-port_scope__ehEaA .ppanel [data-v] { opacity: 0; }
.feature-port_scope__ehEaA .ppanel[data-p="0"] [data-v~="0"],
.feature-port_scope__ehEaA .ppanel[data-p="1"] [data-v~="1"],
.feature-port_scope__ehEaA .ppanel[data-p="2"] [data-v~="2"],
.feature-port_scope__ehEaA .ppanel[data-p="3"] [data-v~="3"] { opacity: 1; }
.feature-port_scope__ehEaA .ppanel .plist li[data-v] { transform: translateY(8px); }
.feature-port_scope__ehEaA .ppanel[data-p="1"] li[data-v~="1"],
.feature-port_scope__ehEaA .ppanel[data-p="2"] li[data-v~="2"],
.feature-port_scope__ehEaA .ppanel[data-p="3"] li[data-v~="3"] { transform: none; }
.feature-port_scope__ehEaA .ppanel[data-p="0"] .pbar i { transform: scaleX(0); }
.feature-port_scope__ehEaA .ppanel[data-p="1"] .pbar i { transform: scaleX(.3); }
.feature-port_scope__ehEaA .ppanel[data-p="2"] .pbar i { transform: scaleX(.55); }
.feature-port_scope__ehEaA .ppanel.is-rec .ppanel__btn { animation: feature-port_sw-pulse__S7zQS 1s ease-out 1; }
@media (max-width: 1100px) { .feature-port_scope__ehEaA .ptab { grid-template-columns: 1fr; } .feature-port_scope__ehEaA .ppanel { justify-self: start; } }
@media (max-width: 480px) { .feature-port_scope__ehEaA .psum { grid-template-columns: 1fr 1fr; } .feature-port_scope__ehEaA .psum div:first-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .ppanel *,
.feature-port_scope__ehEaA .ppanel { transition: none !important; animation: none !important; } }
@media (max-width: 480px) { .feature-port_scope__ehEaA .hpanel__tabs span { font-size: 12px; padding: 7px 2px; } }
.feature-port_scope__ehEaA .ppanel__rec .ppanel__btn { color: #fff; }
.feature-port_scope__ehEaA .pstat > *,
.feature-port_scope__ehEaA .plist i { font-style: normal; }
.feature-port_scope__ehEaA .ptab__points li:nth-child(3)::before { background: var(--navy); opacity: .18; }
/* =========================================================
   OPEN A JOB (Mark, 8 Oct 2026): Tasks page (Row view) → click the job → the side drawer slides out → Start work.
   data-o 0 → 4 on .app; the HTML ships data-o="4" (drawer open, work in progress). JS moves the cursor (position only).
   ========================================================= */
.feature-port_scope__ehEaA .op { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .app { position: relative; overflow: hidden; margin-top: clamp(32px, 4vw, 52px); min-height: 590px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .app__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--panel-light); }
.feature-port_scope__ehEaA .app__bar > b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.feature-port_scope__ehEaA .app__views { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #fff; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .app__views span { padding: 4px 10px; border-radius: 7px; font-family: var(--ui); font-weight: 600; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.feature-port_scope__ehEaA .app__views span[aria-current] { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .app__list { position: relative; z-index: 0; padding: 6px 18px 18px; }
.feature-port_scope__ehEaA .app__row { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr); gap: 10px; align-items: center; padding: 12px 10px; border-bottom: 1px solid rgba(11,55,108,.08); font-size: 14px; color: var(--text-2); }
.feature-port_scope__ehEaA .app__row b { font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .app__row--h { font-family: var(--ui); font-weight: 700; font-size: 12px; padding-top: 8px; padding-bottom: 8px; }
.feature-port_scope__ehEaA .app__row--go::before { content: ""; position: absolute; inset: 2px 0; border-radius: 9px; background: #dff1f7; opacity: 0; transition: opacity .3s; z-index: -1; }
.feature-port_scope__ehEaA .app:not([data-o="0"]) .app__row--go::before { opacity: 1; }
.feature-port_scope__ehEaA .app__amt { justify-self: end; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .app__st { display: grid; justify-items: start; }
.feature-port_scope__ehEaA .app__st > * { grid-area: 1 / 1; }
.feature-port_scope__ehEaA .st { padding: 2px 9px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 11.5px; white-space: nowrap; transition: opacity .35s; background: var(--panel-light); color: var(--text-2); }
.feature-port_scope__ehEaA .st--sched { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .st--active { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .st--qp { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .st--dep { background: #fde3e3; color: #9b2c2c; }
/* drawer */
.feature-port_scope__ehEaA .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 440px); background: #fff; border-left: 1px solid var(--line); box-shadow: -30px 0 60px -40px rgba(3,15,30,.45); transition: transform .6s var(--ease), opacity .6s var(--ease); }
.feature-port_scope__ehEaA .app[data-o="0"] .drawer,
.feature-port_scope__ehEaA .app[data-o="1"] .drawer { transform: translateX(105%); opacity: 0; }
.feature-port_scope__ehEaA .drawer__body { padding: 14px 18px 18px; }
.feature-port_scope__ehEaA .drawer__t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .drawer__t b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.feature-port_scope__ehEaA .drawer__ban { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--panel-light); }
.feature-port_scope__ehEaA .drawer__ban .x2,
.feature-port_scope__ehEaA .drawer__go .x2 { display: grid; }
.feature-port_scope__ehEaA .drawer__ban .x2 > *,
.feature-port_scope__ehEaA .drawer__go .x2 > * { grid-area: 1 / 1; transition: opacity .4s; }
.feature-port_scope__ehEaA .drawer__ban b { display: block; color: var(--navy); font-weight: 600; font-size: 14.5px; }
.feature-port_scope__ehEaA .drawer__ban small { display: block; margin-top: 2px; color: var(--text-2); font-size: 13px; line-height: 1.4; }
.feature-port_scope__ehEaA .drawer__dl { margin-top: 10px; }
.feature-port_scope__ehEaA .drawer__dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(11,55,108,.08); font-size: 13.5px; }
.feature-port_scope__ehEaA .drawer__dl dt { color: var(--text-2); }
.feature-port_scope__ehEaA .drawer__dl dd { margin: 0; color: var(--navy); font-weight: 600; text-align: right; }
.feature-port_scope__ehEaA .drawer__dl dd.ok { color: #1f6b43; }
.feature-port_scope__ehEaA .drawer__go { margin-top: 14px; }
.feature-port_scope__ehEaA .drawer__btn { position: relative; display: flex; justify-content: center; align-items: center; min-height: 42px; border-radius: 9px; background: var(--sky-deep); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 14.5px; }
.feature-port_scope__ehEaA .drawer__btn--2 { background: var(--navy); }
.feature-port_scope__ehEaA .drawer__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .15s; }
.feature-port_scope__ehEaA .app.is-press .drawer__btn::after { opacity: .28; }
.feature-port_scope__ehEaA .drawer__toast { margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: #e3f5ea; color: #1f6b43; font-family: var(--ui); font-weight: 700; font-size: 12.5px; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .app [data-o-v] { opacity: 0; }
.feature-port_scope__ehEaA .app[data-o="0"] [data-o-v~="0"],
.feature-port_scope__ehEaA .app[data-o="1"] [data-o-v~="1"],
.feature-port_scope__ehEaA .app[data-o="2"] [data-o-v~="2"],
.feature-port_scope__ehEaA .app[data-o="3"] [data-o-v~="3"],
.feature-port_scope__ehEaA .app[data-o="4"] [data-o-v~="4"],
.feature-port_scope__ehEaA .app[data-o="5"] [data-o-v~="5"],
.feature-port_scope__ehEaA .app[data-o="6"] [data-o-v~="6"],
.feature-port_scope__ehEaA .app[data-o="7"] [data-o-v~="7"] { opacity: 1; }
.feature-port_scope__ehEaA .app .drawer__toast { transform: translateY(8px); }
.feature-port_scope__ehEaA .app[data-o="4"] .drawer__toast[data-o-v~="4"],
.feature-port_scope__ehEaA .app[data-o="5"] .drawer__toast[data-o-v~="5"],
.feature-port_scope__ehEaA .app[data-o="6"] .drawer__toast[data-o-v~="6"],
.feature-port_scope__ehEaA .app[data-o="7"] .drawer__toast[data-o-v~="7"] { transform: none; }
.feature-port_scope__ehEaA .drawer__toasts,
.feature-port_scope__ehEaA .drawer__go .x2,
.feature-port_scope__ehEaA .drawer__dl .x2 { display: grid; }
.feature-port_scope__ehEaA .drawer__toasts > *,
.feature-port_scope__ehEaA .drawer__dl .x2 > * { grid-area: 1 / 1; }
.feature-port_scope__ehEaA .drawer__dl dd.x2 > * { justify-self: end; transition: opacity .35s; }
.feature-port_scope__ehEaA .drawer__btn--3 { background: #2f9e62; }
.feature-port_scope__ehEaA .drawer__btn--4 { background: #fff; color: #1f6b43; border: 1.5px solid rgba(47,158,98,.5); }
.feature-port_scope__ehEaA .drawer__toasts .drawer__toast:nth-child(3) { background: #dff1f7; color: var(--navy); }
/* cursor: shown only while the sequence plays; JS sets its position */
.feature-port_scope__ehEaA .cur { position: absolute; left: 0; top: 0; z-index: 5; width: 26px; height: 26px; opacity: 0; pointer-events: none; transform: translate(var(--cx, 600px), var(--cy, 400px)); transition: transform .8s var(--ease), opacity .3s; filter: drop-shadow(0 2px 3px rgba(3,15,30,.3)); }
.feature-port_scope__ehEaA .cur svg { width: 100%; height: 100%; display: block; }
.feature-port_scope__ehEaA .app.is-play .cur { opacity: 1; }
@media (max-width: 700px) {
  .feature-port_scope__ehEaA .app { min-height: 640px; }
  .feature-port_scope__ehEaA .app__views span:not([aria-current]):nth-child(n+3) { display: none; }
  .feature-port_scope__ehEaA .app__row { grid-template-columns: minmax(0, 1fr) auto; }
  .feature-port_scope__ehEaA .app__row > span:nth-child(2),
.feature-port_scope__ehEaA .app__row > .app__amt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .app *,
.feature-port_scope__ehEaA .app { transition: none !important; } }
/* =========================================================
   BELIEF BAND (Mark, 8 Oct 2026): straight after the hero — the claim, said as a belief, and the flow it's about.
   On screen: the six stops light one after another; without JS / motion off they are all lit.
   ========================================================= */
.feature-port_scope__ehEaA .bel { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--pad) 0; text-align: center; }
.feature-port_scope__ehEaA .bel__h { max-width: 24ch; margin: 10px auto 0; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.12; letter-spacing: -.01em; color: var(--navy); }
.feature-port_scope__ehEaA .bel__flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 8px; margin-top: clamp(28px, 3.4vw, 44px); counter-reset: bel; }
.feature-port_scope__ehEaA .bel__flow li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 700; font-size: clamp(14px, 1.1vw, 16px); color: var(--navy); }
.feature-port_scope__ehEaA .bel__flow li span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -24px rgba(3,15,30,.5); white-space: nowrap;
  transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA .bel__flow li span::before { counter-increment: bel; content: counter(bel); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #dff1f7; color: var(--sky-deep); font-size: 12px; }
.feature-port_scope__ehEaA .bel__flow li:last-child span { background: var(--navy); color: #fff; border-color: var(--navy); }
.feature-port_scope__ehEaA .bel__flow li:last-child span::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .bel__flow li + li::before { content: "→"; color: var(--sky-deep); font-weight: 700; transition: opacity .45s; transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA.motion .bel:not(.in) .bel__flow li span { opacity: 0; transform: translateY(10px); }
.feature-port_scope__ehEaA.motion .bel:not(.in) .bel__flow li::before { opacity: 0; }
.feature-port_scope__ehEaA .bel__note { max-width: 56ch; margin: 22px auto 0; color: var(--text-2); }
@media (max-width: 600px) { .feature-port_scope__ehEaA .bel__flow li + li::before { display: none; } .feature-port_scope__ehEaA .bel__flow { gap: 8px; } }
/* =========================================================
   HOURLY HANDOFF (Mark, 8 Oct 2026): the Time tab slides up and out, the invoice slides in and builds line by line —
   the labour line lights up with where its hours came from. Position + opacity only; .is-build is added by JS once.
   ========================================================= */
.feature-port_scope__ehEaA .story__panel .x--panel > * { transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.feature-port_scope__ehEaA .story__panel[data-step="1"] .x--panel > [data-s~="1"],
.feature-port_scope__ehEaA .story__panel[data-step="2"] .x--panel > [data-s~="2"],
.feature-port_scope__ehEaA .story__panel[data-step="3"] .x--panel > [data-s~="3"],
.feature-port_scope__ehEaA .story__panel[data-step="4"] .x--panel > [data-s~="4"],
.feature-port_scope__ehEaA .story__panel[data-step="5"] .x--panel > [data-s~="5"],
.feature-port_scope__ehEaA .story__panel[data-step="6"] .x--panel > [data-s~="6"] { transform: none; }
.feature-port_scope__ehEaA .story__panel[data-step="4"] .x--panel > [data-s="3"],
.feature-port_scope__ehEaA .story__panel[data-step="5"] .x--panel > [data-s="3"] { transform: translateY(-18px); }
.feature-port_scope__ehEaA .doc__from { justify-self: start; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: #dff1f7; color: var(--navy); font-family: var(--ui); font-weight: 700; font-size: 12px; }
.feature-port_scope__ehEaA .doc__work { position: relative; }
.feature-port_scope__ehEaA .doc__work::after { content: ""; position: absolute; inset: -1px; border-radius: 8px; border: 2px solid var(--sky); background: rgba(72,172,200,.08); opacity: 0; pointer-events: none; }
.feature-port_scope__ehEaA .doc.is-build .doc__work::after { animation: feature-port_sw-flash__pLUHW 2.2s var(--ease) .9s both; }
.feature-port_scope__ehEaA .doc.is-build .doc__top,
.feature-port_scope__ehEaA .doc.is-build .doc__meta,
.feature-port_scope__ehEaA .doc.is-build .doc__stamp,
.feature-port_scope__ehEaA .doc.is-build .doc__work,
.feature-port_scope__ehEaA .doc.is-build .doc__from,
.feature-port_scope__ehEaA .doc.is-build .doc__parts tbody tr,
.feature-port_scope__ehEaA .doc.is-build .doc__sum > .doc__row,
.feature-port_scope__ehEaA .doc.is-build .doc__how { animation: feature-port_sw-up__D_OKH .5s var(--ease) both; animation-delay: var(--bd, 0s); }
@keyframes feature-port_sw-up__D_OKH { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes feature-port_sw-flash__pLUHW { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }
.feature-port_scope__ehEaA .doc.is-build .doc__work::after { animation-delay: 1.45s; }
/* the hours travel: the Time tab's total lifts off as a chip and flies into the labour line (JS sets the positions) */
.feature-port_scope__ehEaA .fly { position: absolute; left: 0; top: 0; z-index: 6; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; white-space: nowrap;
  box-shadow: 0 16px 30px -14px rgba(3,15,30,.6); opacity: 0; pointer-events: none; transition: transform .95s cubic-bezier(.5, 0, .2, 1), opacity .3s; }
.feature-port_scope__ehEaA .fly.on { opacity: 1; }
.feature-port_scope__ehEaA .fly svg { width: 16px; height: 16px; color: var(--sky); animation: feature-port_sw-nudge__93P6V .5s ease-in-out infinite alternate; }
@keyframes feature-port_sw-nudge__93P6V { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@media (max-width: 900px) { .feature-port_scope__ehEaA .story__panel .x--panel > * { transform: none !important; } .feature-port_scope__ehEaA .fly { display: none; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .fly { display: none; } .feature-port_scope__ehEaA .doc.is-build *,
.feature-port_scope__ehEaA .doc.is-build::after,
.feature-port_scope__ehEaA .doc__work::after { animation: none !important; } }
/* =========================================================
   SETTINGS › PAYMENTS (Mark, 8 Oct 2026): under the market's method list — one of that country's methods is configured
   (Configure → details in → Saved) and lands on your invoices. Follows the header's market like the list above it.
   data-g 0 → 3; the HTML ships data-g="3". Position + opacity only.
   ========================================================= */
.feature-port_scope__ehEaA .pay__right { display: grid; gap: 14px; align-content: start; }
.feature-port_scope__ehEaA .pay__set { margin-top: 10px; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .sset { border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 64px -42px rgba(3,15,30,.45); overflow: hidden; }
.feature-port_scope__ehEaA .sset__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px; background: var(--panel-light); border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .sset__tabs span { padding: 6px 4px; border-radius: 7px; border: 1px solid var(--line); background: #fff; text-align: center; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sset__tabs span[aria-current] { background: var(--sky); border-color: var(--sky); color: #fff; }
.feature-port_scope__ehEaA .sset__body { padding: 14px 16px 16px; }
.feature-port_scope__ehEaA .sset__h b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .sset__h small { color: var(--text-2); font-size: 13px; }
.feature-port_scope__ehEaA .sset__stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.feature-port_scope__ehEaA .sset__stats > div { padding: 8px 10px; border-radius: 8px; background: var(--panel-light); min-width: 0; }
.feature-port_scope__ehEaA .sset__stats small { display: block; font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sset__stats b { display: block; margin-top: 2px; font-weight: 600; font-size: 13.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sset__cc { font-style: normal; font-family: var(--ui); font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .sset .x2 { display: grid; }
.feature-port_scope__ehEaA .sset .x2 > * { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.feature-port_scope__ehEaA .mcard { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); transition: border-color .3s; }
.feature-port_scope__ehEaA .mcard__top { display: flex; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .mcard__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #dff1f7; color: var(--sky-deep); flex: none; }
.feature-port_scope__ehEaA .mcard__ic svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .mcard__name { font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .mcard__top .mcard__name { font-size: 16px; }
.feature-port_scope__ehEaA .mcard__st { margin-left: auto; }
.feature-port_scope__ehEaA .mcard__st i { justify-self: end; padding: 2px 9px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.feature-port_scope__ehEaA .mcard__st .nc { background: var(--panel-light); color: var(--text-2); }
.feature-port_scope__ehEaA .mcard__st .ok { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .mcard__f { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: 13.5px; }
.feature-port_scope__ehEaA .mcard__f.is-off { display: none; }
.feature-port_scope__ehEaA .mcard__k { color: var(--text-2); white-space: nowrap; }
.feature-port_scope__ehEaA .mcard__box { position: relative; min-width: 0; text-align: right; }
.feature-port_scope__ehEaA .mcard__box > * { justify-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.feature-port_scope__ehEaA .mcard__box .ns { color: var(--text-2); }
.feature-port_scope__ehEaA .mcard__v { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .mcard__box::before { content: ""; position: absolute; inset: -5px -8px; border-radius: 7px; border: 1.5px solid var(--sky); opacity: 0; transition: opacity .3s; }
.feature-port_scope__ehEaA .sset[data-g="1"] .mcard__box::before,
.feature-port_scope__ehEaA .sset[data-g="2"] .mcard__box::before { opacity: 1; }
.feature-port_scope__ehEaA .mcard__go { margin-top: 12px; }
.feature-port_scope__ehEaA .mcard__btn { display: flex; justify-content: center; align-items: center; min-height: 36px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .mcard__btn--ok { background: var(--navy); border-color: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .sset__inv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: #e3f5ea; color: #1f6b43; font-size: 13.5px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .sset__inv small { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.feature-port_scope__ehEaA .sset__inv b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.feature-port_scope__ehEaA .sset [data-g-v] { opacity: 0; }
.feature-port_scope__ehEaA .sset[data-g="0"] [data-g-v~="0"],
.feature-port_scope__ehEaA .sset[data-g="1"] [data-g-v~="1"],
.feature-port_scope__ehEaA .sset[data-g="2"] [data-g-v~="2"],
.feature-port_scope__ehEaA .sset[data-g="3"] [data-g-v~="3"] { opacity: 1; }
.feature-port_scope__ehEaA .sset .mcard__v[data-g-v] { transform: translateX(6px); }
.feature-port_scope__ehEaA .sset[data-g="2"] .mcard__v,
.feature-port_scope__ehEaA .sset[data-g="3"] .mcard__v { transform: none; }
.feature-port_scope__ehEaA .sset:not([data-g="3"]) .sset__inv { transform: translateY(8px); }
.feature-port_scope__ehEaA .sset[data-g="3"] .mcard { border-color: rgba(47,158,98,.45); }
@media (max-width: 560px) { .feature-port_scope__ehEaA .sset__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-port_scope__ehEaA .sset__stats { grid-template-columns: 1fr 1fr; } .feature-port_scope__ehEaA .sset__stats > div:first-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .sset *,
.feature-port_scope__ehEaA .sset { transition: none !important; } }
/* =========================================================
   CUSTOMER'S PHONE in step 02 of the fixed story (Mark, 8 Oct 2026): the quote email → Review Your Quote → the hosted
   quote page → Approve → "Quote approved". Slides up beside the document at step 2 only. data-c 0 → 4; HTML ships 4.
   ========================================================= */
.feature-port_scope__ehEaA .story__panel { position: sticky; }
.feature-port_scope__ehEaA .cphone { position: absolute; z-index: 4; right: -18px; bottom: -24px; width: 250px; opacity: 0; transform: translateY(40px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease); }
.feature-port_scope__ehEaA .story__panel[data-step="2"] .cphone[data-s="2"],
.feature-port_scope__ehEaA .story__panel[data-step="4"] .cphone[data-s="4"] { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .cphone__scr { position: relative; overflow: hidden; padding: 14px 14px 12px; border-radius: 30px; border: 7px solid #0d1b2a; background: #f7f9fb; height: 345px; box-shadow: 0 40px 70px -30px rgba(3,15,30,.65); font-size: 12px; line-height: 1.4; color: var(--text); }
.feature-port_scope__ehEaA .cphone__scr::before { content: ""; position: absolute; top: 6px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 6px; background: #0d1b2a; }
.feature-port_scope__ehEaA .cphone__mail,
.feature-port_scope__ehEaA .cphone__page { position: absolute; inset: 22px 14px 12px; display: flex; flex-direction: column; gap: 6px; transition: opacity .45s var(--ease), transform .5s var(--ease); }
.feature-port_scope__ehEaA .cphone__from b { display: block; font-weight: 700; color: var(--navy); font-size: 12px; }
.feature-port_scope__ehEaA .cphone__from small { display: block; color: var(--text-2); font-size: 11px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .cphone__co { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--navy); }
.feature-port_scope__ehEaA .cphone__hi { font-weight: 600; }
.feature-port_scope__ehEaA .cphone__tot { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .cphone__tot small { display: block; font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.feature-port_scope__ehEaA .cphone__tot b { display: block; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.feature-port_scope__ehEaA .cphone__tot small + b + small { margin-top: 3px; text-transform: none; letter-spacing: 0; font-size: 11px; }
.feature-port_scope__ehEaA .cphone__btn { position: relative; display: flex; justify-content: center; align-items: center; min-height: 34px; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 12.5px; }
.feature-port_scope__ehEaA .cphone__btn--b { background: #2f9e62; }
.feature-port_scope__ehEaA .cphone__btn--ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.feature-port_scope__ehEaA .cphone__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.feature-port_scope__ehEaA .cphone__badge i { justify-self: start; padding: 2px 9px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 10.5px; }
.feature-port_scope__ehEaA .cphone__badge .b1 { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .cphone__badge .b2 { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .cphone__t b { font-weight: 700; font-size: 13.5px; color: var(--navy); }
.feature-port_scope__ehEaA .cphone__done { padding: 8px 10px; border-radius: 9px; background: #e3f5ea; color: #1f6b43; font-weight: 600; }
.feature-port_scope__ehEaA .cphone__foot { margin-top: auto; text-align: center; font-size: 10px; color: var(--text-2); }
.feature-port_scope__ehEaA .cphone .x2 { display: grid; }
.feature-port_scope__ehEaA .cphone .x2 > * { grid-area: 1 / 1; transition: opacity .35s; }
.feature-port_scope__ehEaA .cphone__cap { margin-top: 8px; text-align: center; font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .cphone [data-c-v] { opacity: 0; }
.feature-port_scope__ehEaA .cphone[data-c="0"] [data-c-v~="0"],
.feature-port_scope__ehEaA .cphone[data-c="1"] [data-c-v~="1"],
.feature-port_scope__ehEaA .cphone[data-c="2"] [data-c-v~="2"],
.feature-port_scope__ehEaA .cphone[data-c="3"] [data-c-v~="3"],
.feature-port_scope__ehEaA .cphone[data-c="4"] [data-c-v~="4"] { opacity: 1; }
.feature-port_scope__ehEaA .cphone .cphone__page[data-c-v] { transform: translateX(30px); }
.feature-port_scope__ehEaA .cphone[data-c="2"] .cphone__page,
.feature-port_scope__ehEaA .cphone[data-c="3"] .cphone__page,
.feature-port_scope__ehEaA .cphone[data-c="4"] .cphone__page { transform: none; }
.feature-port_scope__ehEaA .cphone[data-c="2"] .cphone__mail,
.feature-port_scope__ehEaA .cphone[data-c="3"] .cphone__mail,
.feature-port_scope__ehEaA .cphone[data-c="4"] .cphone__mail { transform: translateX(-30px); }
/* the tap: a soft ring that appears on the button being pressed (JS sets the spot) */
.feature-port_scope__ehEaA .cphone__tap { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(72,172,200,.35); border: 2px solid rgba(255,255,255,.9); opacity: 0; transform: translate(var(--tx, 100px), var(--ty, 300px)); pointer-events: none; transition: opacity .2s; }
.feature-port_scope__ehEaA .cphone[data-c="1"] .cphone__tap,
.feature-port_scope__ehEaA .cphone[data-c="3"] .cphone__tap { opacity: 1; }
@media (max-width: 1200px) { .feature-port_scope__ehEaA .cphone { right: -8px; width: 220px; } .feature-port_scope__ehEaA .cphone__scr { height: 330px; } }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .cphone { position: relative; right: auto; bottom: auto; width: 250px; margin: 0 auto 18px; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .cphone,
.feature-port_scope__ehEaA .cphone * { transition: none !important; } }
/* =========================================================
   CREATE THE JOB → INVOICE TAB (Mark, 8 Oct 2026): the Create Task sheet fills in (title, customer, Fixed Price,
   line items, tax), Create Task is pressed, and the job's drawer appears on its Invoice tab with the invoice prepared.
   data-k 0 → 6 on .ct__grid; the HTML ships data-k="6". Position + opacity only.
   ========================================================= */
.feature-port_scope__ehEaA .ct { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .ct__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.1fr); align-items: center; gap: 0; margin-top: clamp(32px, 4vw, 52px); }
.feature-port_scope__ehEaA .ctf,
.feature-port_scope__ehEaA .ctd { border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 64px -42px rgba(3,15,30,.45); overflow: hidden; }
.feature-port_scope__ehEaA .ctf__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--panel-light); }
.feature-port_scope__ehEaA .ctf__head b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .ctf__head span { color: var(--text-2); }
.feature-port_scope__ehEaA .ctf__body { padding: 14px 18px 18px; display: grid; gap: 10px; }
.feature-port_scope__ehEaA .ctf__f { display: grid; gap: 4px; }
.feature-port_scope__ehEaA .ctf__k { font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .ctf__box { position: relative; display: grid; min-height: 38px; align-items: center; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(11,55,108,.18); background: #fff; font-size: 14px; }
.feature-port_scope__ehEaA .ctf__box > * { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .35s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .ctf__box .ph { color: #9aa7b6; }
.feature-port_scope__ehEaA .ctf__box .v { color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .ctf__seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 9px; background: var(--panel-light); }
.feature-port_scope__ehEaA .ctf__seg b { position: relative; z-index: 1; padding: 6px; text-align: center; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .ctf__on { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 7px; background: #fff; box-shadow: 0 1px 4px rgba(11,55,108,.15); transition: opacity .35s; }
.feature-port_scope__ehEaA .ctf__box--amt { margin-top: 6px; }
.feature-port_scope__ehEaA .ctf__items { display: grid; gap: 4px; }
.feature-port_scope__ehEaA .ctf__items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; background: var(--panel-light); font-size: 13px; transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc((var(--i) - 2) * .25s); }
.feature-port_scope__ehEaA .ctf__items li:first-child { transition-delay: 0s; }
.feature-port_scope__ehEaA .ctf__items li > span:first-child { color: var(--navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .ctf__items li > span:nth-child(2) { color: var(--text-2); white-space: nowrap; }
.feature-port_scope__ehEaA .ctf__items li b { color: var(--navy); font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .ctf__more { font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .ctf__q { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .ctf__q i { position: relative; width: 34px; height: 20px; border-radius: 20px; background: rgba(11,55,108,.18); }
.feature-port_scope__ehEaA .ctf__q i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.feature-port_scope__ehEaA .ctf__btn { position: relative; display: flex; justify-content: center; align-items: center; min-height: 42px; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 14.5px; }
.feature-port_scope__ehEaA .ctf__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .15s; }
.feature-port_scope__ehEaA .ct__grid.is-press .ctf__btn::after { opacity: .28; }
.feature-port_scope__ehEaA .ct__arrow { display: grid; place-items: center; color: var(--sky-deep); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.feature-port_scope__ehEaA .ct__arrow svg { width: 44px; height: 22px; }
.feature-port_scope__ehEaA .ctd__body { padding: 14px 18px 18px; }
.feature-port_scope__ehEaA .ctd__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .ctd__head b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .ctd__head i { flex: none; padding: 2px 9px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 11.5px; background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .ctd__inv { margin-top: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fbfcfd; }
.feature-port_scope__ehEaA .ctd__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 2px solid var(--navy); }
.feature-port_scope__ehEaA .ctd__top b { font-family: var(--display); font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .ctd__top span { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--sky-deep); }
.feature-port_scope__ehEaA .ctd__to { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .ctd__row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid rgba(11,55,108,.07); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .ctd__row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .ctd__row em { font-style: normal; color: var(--text-2); }
.feature-port_scope__ehEaA .ctd__row b { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .ctd__row--work { font-weight: 600; }
.feature-port_scope__ehEaA .ctd__row--sum { margin-top: 4px; }
.feature-port_scope__ehEaA .ctd__row--total { border-bottom: 0; border-top: 1.5px solid var(--navy); margin-top: 2px; }
.feature-port_scope__ehEaA .ctd__row--total span,
.feature-port_scope__ehEaA .ctd__row--total b { font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .ctd__go { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.feature-port_scope__ehEaA .ctd__btn { display: flex; justify-content: center; align-items: center; min-height: 38px; border-radius: 8px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; text-align: center; }
.feature-port_scope__ehEaA .ctd__btn--ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.feature-port_scope__ehEaA .ctd__note { margin-top: 10px; font-size: 12.5px; color: var(--text-2); text-align: center; }
/* states */
.feature-port_scope__ehEaA .ct__grid [data-k-v] { opacity: 0; }
.feature-port_scope__ehEaA .ct__grid[data-k="0"] [data-k-v~="0"],
.feature-port_scope__ehEaA .ct__grid[data-k="1"] [data-k-v~="1"],
.feature-port_scope__ehEaA .ct__grid[data-k="2"] [data-k-v~="2"],
.feature-port_scope__ehEaA .ct__grid[data-k="3"] [data-k-v~="3"],
.feature-port_scope__ehEaA .ct__grid[data-k="4"] [data-k-v~="4"],
.feature-port_scope__ehEaA .ct__grid[data-k="5"] [data-k-v~="5"],
.feature-port_scope__ehEaA .ct__grid[data-k="6"] [data-k-v~="6"],
.feature-port_scope__ehEaA .ct__grid[data-k="7"] [data-k-v~="7"],
.feature-port_scope__ehEaA .ct__grid[data-k="8"] [data-k-v~="8"] { opacity: 1; }
.feature-port_scope__ehEaA .ct__grid .ctf__items li[data-k-v] { transform: translateY(8px); }
.feature-port_scope__ehEaA .ct__grid[data-k="3"] .ctf__items li[data-k-v~="3"],
.feature-port_scope__ehEaA .ct__grid[data-k="4"] .ctf__items li[data-k-v~="4"],
.feature-port_scope__ehEaA .ct__grid[data-k="5"] .ctf__items li[data-k-v~="5"],
.feature-port_scope__ehEaA .ct__grid[data-k="6"] .ctf__items li[data-k-v~="6"],
.feature-port_scope__ehEaA .ct__grid[data-k="7"] .ctf__items li[data-k-v~="7"],
.feature-port_scope__ehEaA .ct__grid[data-k="8"] .ctf__items li[data-k-v~="8"] { transform: none; }
.feature-port_scope__ehEaA .ct__grid:not([data-k="8"]) .ctd { opacity: 0; transform: translateX(28px); }
.feature-port_scope__ehEaA .ct__grid:not([data-k="8"]) .ct__arrow { opacity: .15; transform: translateX(-10px); }
.feature-port_scope__ehEaA .ctd { transition: opacity .6s var(--ease), transform .7s var(--ease); }
.feature-port_scope__ehEaA .ct__grid:not([data-k="8"]) .ctd__row,
.feature-port_scope__ehEaA .ct__grid:not([data-k="8"]) .ctd__go,
.feature-port_scope__ehEaA .ct__grid:not([data-k="8"]) .ctd__head i { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA .ctd__go,
.feature-port_scope__ehEaA .ctd__head i { transition: opacity .4s var(--ease), transform .4s var(--ease); }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .ct__grid { grid-template-columns: 1fr; gap: 10px; }
  .feature-port_scope__ehEaA .ct__arrow svg { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .ct__grid *,
.feature-port_scope__ehEaA .ct__grid { transition: none !important; } }
/* the Payments tab as its own section, straight after the fixed-price story (Mark, 8 Oct 2026) */
.feature-port_scope__ehEaA .psec { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .ptab--own { margin-top: 0; padding-top: 0; border-top: 0; }
/* Create → Quote tab (Mark, 8 Oct 2026): Mark as Quote + Require Deposit? switch on; the drawer opens on the Quote tab */
.feature-port_scope__ehEaA .tg { position: relative; width: 34px; height: 20px; border-radius: 20px; background: rgba(11,55,108,.18); overflow: hidden; }
.feature-port_scope__ehEaA .tg b { position: absolute; inset: 0; background: #2f9e62; opacity: 0; transition: opacity .3s; }
.feature-port_scope__ehEaA .tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.feature-port_scope__ehEaA .ct__grid[data-k="6"] .tg--q b,
.feature-port_scope__ehEaA .ct__grid[data-k="7"] .tg--q b,
.feature-port_scope__ehEaA .ct__grid[data-k="8"] .tg--q b,
.feature-port_scope__ehEaA .ct__grid[data-k="7"] .tg--d b,
.feature-port_scope__ehEaA .ct__grid[data-k="8"] .tg--d b { opacity: 1; }
.feature-port_scope__ehEaA .ct__grid[data-k="6"] .tg--q::after,
.feature-port_scope__ehEaA .ct__grid[data-k="7"] .tg--q::after,
.feature-port_scope__ehEaA .ct__grid[data-k="8"] .tg--q::after,
.feature-port_scope__ehEaA .ct__grid[data-k="7"] .tg--d::after,
.feature-port_scope__ehEaA .ct__grid[data-k="8"] .tg--d::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .ctf__q i.tg::after { background: #fff; }
.feature-port_scope__ehEaA .ctf__dep { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; background: #e3f5ea; color: #1f6b43; font-size: 13px; transition: opacity .35s var(--ease); }
.feature-port_scope__ehEaA .ctf__dep b { color: #1f6b43; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .ctd__head i { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .ctd__ban { margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: var(--panel-light); font-weight: 600; font-size: 13.5px; color: var(--navy); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .ctd__row--dep { margin-top: 4px; border-top: 1px dashed rgba(11,55,108,.2); color: #1f6b43; }
.feature-port_scope__ehEaA .ctd__row--dep b { color: #1f6b43; }
.feature-port_scope__ehEaA .ctd__sent { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--navy); font-weight: 600; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .ctd__sent i { padding: 2px 9px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 11.5px; background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .ctd__go { grid-template-columns: 1fr; }
.feature-port_scope__ehEaA .ct__grid:not([data-k="8"]) .ctd__ban,
.feature-port_scope__ehEaA .ct__grid:not([data-k="8"]) .ctd__sent { opacity: 0; transform: translateY(8px); }
/* every way a job can start */
.feature-port_scope__ehEaA .ways { margin-top: clamp(40px, 5vw, 64px); }
.feature-port_scope__ehEaA .ways__h { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.6vw, 26px); color: var(--navy); }
.feature-port_scope__ehEaA .ways__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--inset); margin-top: 14px; }
.feature-port_scope__ehEaA .ways__list li { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .ways__list li:first-child { border-color: rgba(72,172,200,.6); box-shadow: 0 0 0 1px rgba(72,172,200,.4); }
.feature-port_scope__ehEaA .ways__tg { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.feature-port_scope__ehEaA .ways__tg > span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .ways__tg i { position: relative; width: 26px; height: 15px; border-radius: 15px; background: rgba(11,55,108,.18); }
.feature-port_scope__ehEaA .ways__tg i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.feature-port_scope__ehEaA .ways__tg .on { color: var(--navy); }
.feature-port_scope__ehEaA .ways__tg .on i { background: #2f9e62; }
.feature-port_scope__ehEaA .ways__tg .on i::after { left: 13px; }
.feature-port_scope__ehEaA .ways__b { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 11.5px; background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .ways__b.w3 { background: #fde3e3; color: #9b2c2c; }
.feature-port_scope__ehEaA .ways__b.w4 { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .ways__list li p:last-child { color: var(--text-2); font-size: 14.5px; }
.feature-port_scope__ehEaA .ways__note { margin-top: 12px; font-size: 14px; color: var(--text-2); }
@media (max-width: 1100px) { .feature-port_scope__ehEaA .ways__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-port_scope__ehEaA .ways__list { grid-template-columns: 1fr; } }
/* flow strip: where this section sits in the job (the belief band's six stops) */
.feature-port_scope__ehEaA .fstrip { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; counter-reset: fs; }
.feature-port_scope__ehEaA .fstrip li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(11,55,108,.06); font-family: var(--ui); font-weight: 700; font-size: 11.5px; color: #93a3b5; }
.feature-port_scope__ehEaA .fstrip li::before { counter-increment: fs; content: counter(fs); display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fff; font-size: 10px; }
.feature-port_scope__ehEaA .fstrip li.on { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .fstrip li.on::before { background: var(--sky); color: var(--navy); }
@media (max-width: 700px) { .feature-port_scope__ehEaA .fstrip li:not(.on) span { display: none; } .feature-port_scope__ehEaA .fstrip li:not(.on) { padding-right: 4px; } }
/* Settings › Payments, round 3 (Mark, 8 Oct 2026): the country's methods are the app's own tiles inside Settings; the
   picked one is set up in a panel that slides up over them, then its tile turns Configured. No dark method box. */
.feature-port_scope__ehEaA.js .smlist:not(.on) { display: none; }
.feature-port_scope__ehEaA .sset__man { margin-top: 14px; }
.feature-port_scope__ehEaA .sset__man b { display: block; font-weight: 600; font-size: 15px; color: var(--navy); }
.feature-port_scope__ehEaA .sset__man small { color: var(--text-2); font-size: 12.5px; }
.feature-port_scope__ehEaA .sset__methods { position: relative; margin-top: 10px; }
.feature-port_scope__ehEaA .smlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.feature-port_scope__ehEaA .stile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; min-width: 0; transition: border-color .3s, opacity .3s var(--ease), transform .3s var(--ease); transition-delay: var(--d, 0s); }
.feature-port_scope__ehEaA .stile b { font-weight: 600; font-size: 13.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .stile i { justify-self: start; font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .stile .x2 { display: grid; }
.feature-port_scope__ehEaA .stile .x2 > * { grid-area: 1 / 1; transition: opacity .35s; }
.feature-port_scope__ehEaA .stile .ok { color: #1f6b43; font-weight: 700; }
.feature-port_scope__ehEaA .stile::after { content: ""; position: absolute; inset: -2px; border-radius: 11px; border: 2px solid var(--sky); opacity: 0; transition: opacity .3s; }
.feature-port_scope__ehEaA .sset[data-g="1"] .stile.is-pick::after,
.feature-port_scope__ehEaA .sset[data-g="2"] .stile.is-pick::after { opacity: 1; }
.feature-port_scope__ehEaA .sset[data-g="3"] .stile.is-pick { border-color: rgba(47,158,98,.55); background: #f3faf6; }
.feature-port_scope__ehEaA .smlist.is-enter li { opacity: 0; transform: translateY(6px); }
/* the set-up panel: slides up over the tiles while the details go in */
.feature-port_scope__ehEaA .sset .mcard { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; background: #fff; box-shadow: 0 -18px 40px -24px rgba(3,15,30,.45); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .4s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .sset[data-g="1"] .mcard,
.feature-port_scope__ehEaA .sset[data-g="2"] .mcard { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .mcard__btn--ok { position: relative; }
.feature-port_scope__ehEaA .mcard__btn--ok::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .15s; }
.feature-port_scope__ehEaA .sset.is-press .mcard__btn--ok::after { opacity: .28; }
.feature-port_scope__ehEaA .sset__online { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 9px 12px; border-radius: 10px; border: 1px dashed rgba(11,55,108,.25); font-size: 13px; }
.feature-port_scope__ehEaA .sset__online b { font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .sset__online span { color: var(--sky-deep); font-family: var(--ui); font-weight: 700; font-size: 12px; }
@media (max-width: 560px) { .feature-port_scope__ehEaA .smlist { grid-template-columns: 1fr 1fr; } }
/* Create: the description box (two lines) and the work's description on the quote */
.feature-port_scope__ehEaA .ctf__box--ta { min-height: 52px; padding-top: 7px; padding-bottom: 7px; align-items: start; }
.feature-port_scope__ehEaA .ctf__box--ta > * { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.4; }
.feature-port_scope__ehEaA .ctf__box--ta .v { font-weight: 500; transition-delay: .35s; }
.feature-port_scope__ehEaA .ctd__desc { margin-top: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.feature-port_scope__ehEaA .ctd__desc small { display: block; font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.feature-port_scope__ehEaA .ctd__desc span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* step 04 phone: the deposit request on the approved quote page → paid by card (Mark, 8 Oct 2026) */
.feature-port_scope__ehEaA .cphone--dep .cphone__page { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .cphone__badge .b3 { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .cphone__msg { font-size: 11.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cphone__msg > * { grid-area: 1 / 1; transition: opacity .35s; }
.feature-port_scope__ehEaA .cphone__bd { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; gap: 4px; }
.feature-port_scope__ehEaA .cphone__bd p { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cphone__bd b { color: var(--navy); font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .cphone__bd .dep { padding: 4px 6px; margin: 0 -6px; border-radius: 6px; background: #fdf0d8; color: #8a5a00; font-weight: 700; }
.feature-port_scope__ehEaA .cphone__bd .dep b { color: #8a5a00; font-size: 13px; }
.feature-port_scope__ehEaA .cphone__btn--pay { background: var(--navy); }
.feature-port_scope__ehEaA .cphone__done--paid { display: flex; align-items: center; gap: 4px; }
.feature-port_scope__ehEaA .cphone__done--paid b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2f9e62; color: #fff; font-size: 11px; }
.feature-port_scope__ehEaA .cphone[data-c="1"] .cphone__tap { opacity: 1; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .cphone--dep { margin-top: 18px; } }
/* step 04: the document waits on the phone — it shows "Accepted" until the customer has paid, then flips to "Deposit paid" */
.feature-port_scope__ehEaA .story__panel[data-step="4"]:has(.cphone--dep:not([data-c="2"])) .doc [data-s~="4"]:not([data-s~="3"]) { opacity: 0; }
.feature-port_scope__ehEaA .story__panel[data-step="4"]:has(.cphone--dep:not([data-c="2"])) .doc [data-s~="3"] { opacity: 1; }
/* =========================================================
   ROUND 5 (Mark, 8 Oct 2026): the day ends on the customer's phone paying the balance; the Payments tab shows the deposit
   already there and the balance arriving with a ping; then the thank-you email with the paid invoice attached.
   ========================================================= */
.feature-port_scope__ehEaA .app[data-o="8"] [data-o-v~="8"],
.feature-port_scope__ehEaA .app[data-o="9"] [data-o-v~="9"] { opacity: 1; }
.feature-port_scope__ehEaA .app[data-o="8"] .drawer__toast[data-o-v~="8"],
.feature-port_scope__ehEaA .app[data-o="9"] .drawer__toast[data-o-v~="9"] { transform: none; }
.feature-port_scope__ehEaA .drawer__toasts .drawer__toast--paid { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .app .cphone { right: 22px; bottom: 16px; width: 228px; }
.feature-port_scope__ehEaA .app .cphone .cphone__scr { height: 330px; }
.feature-port_scope__ehEaA .app[data-o="8"] .cphone,
.feature-port_scope__ehEaA .app[data-o="9"] .cphone { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .cphone__bd .ok { color: #1f6b43; }
.feature-port_scope__ehEaA .cphone__bd .ok b { color: #1f6b43; }
.feature-port_scope__ehEaA .cphone__bd .due { font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .cphone__bd .due .x2 { display: grid; }
.feature-port_scope__ehEaA .cphone__bd .due .x2 > * { grid-area: 1 / 1; justify-self: end; transition: opacity .35s; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .app .cphone { position: absolute; right: 10px; bottom: 10px; width: 200px; margin: 0; opacity: 0; transform: translateY(30px); } .feature-port_scope__ehEaA .app[data-o="8"] .cphone,
.feature-port_scope__ehEaA .app[data-o="9"] .cphone { opacity: 1; transform: none; } .feature-port_scope__ehEaA .app .cphone .cphone__scr { height: 300px; } }
/* Payments tab: the old row is simply there; the new one arrives and pings */
.feature-port_scope__ehEaA .plist li.is-old { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .plist li.is-new { position: relative; }
.feature-port_scope__ehEaA .plist li.is-new::after { content: ""; position: absolute; inset: 2px -6px; border-radius: 10px; border: 2px solid var(--sky); opacity: 0; pointer-events: none; }
.feature-port_scope__ehEaA .ppanel.is-ping li.is-new::after { animation: feature-port_sw-ping__uS4Q5 1.6s ease-out 2; }
@keyframes feature-port_sw-ping__uS4Q5 { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.feature-port_scope__ehEaA .plist__now { padding: 1px 8px; border-radius: 999px; background: #e3f5ea; color: #1f6b43; font-family: var(--ui); font-weight: 700; font-size: 11px; }
.feature-port_scope__ehEaA .plist__hint { grid-template-columns: 36px minmax(0, 1fr) !important; border: 1px dashed rgba(11,55,108,.22); border-radius: 10px; margin-top: 8px; padding: 8px 10px !important; color: var(--text-2); font-size: 13px; }
.feature-port_scope__ehEaA .plist__hint .plist__ic { grid-row: auto; background: #f1ede2; color: #6b5a3a; }
.feature-port_scope__ehEaA .ppanel[data-p="1"] .pbar i { transform: scaleX(.3); }
/* the thank-you email + the paid invoice it carries */
.feature-port_scope__ehEaA .tmail { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .tmail__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; margin-top: clamp(32px, 4vw, 52px); }
.feature-port_scope__ehEaA .tmail__mail,
.feature-port_scope__ehEaA .tmail__inv { border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 64px -42px rgba(3,15,30,.45); overflow: hidden; }
.feature-port_scope__ehEaA .tmail__bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--panel-light); border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .tmail__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(11,55,108,.18); }
.feature-port_scope__ehEaA .tmail__hd { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .tmail__from b { display: block; color: var(--navy); font-weight: 700; font-size: 14px; }
.feature-port_scope__ehEaA .tmail__from small { color: var(--text-2); font-size: 12.5px; }
.feature-port_scope__ehEaA .tmail__subj { margin-top: 6px; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .tmail__body { padding: 16px 18px 18px; display: grid; gap: 10px; font-size: 14px; }
.feature-port_scope__ehEaA .tmail__co { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.feature-port_scope__ehEaA .tmail__ok { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 12px 4px 6px; border-radius: 999px; background: #e3f5ea; color: #1f6b43; font-family: var(--ui); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; }
.feature-port_scope__ehEaA .tmail__ok b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2f9e62; color: #fff; font-size: 12px; }
.feature-port_scope__ehEaA .tmail__hi { font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .tmail__dl { display: grid; gap: 0; padding: 4px 12px; border-radius: 10px; background: var(--panel-light); }
.feature-port_scope__ehEaA .tmail__dl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(11,55,108,.08); font-size: 13.5px; }
.feature-port_scope__ehEaA .tmail__dl div:last-child { border-bottom: 0; }
.feature-port_scope__ehEaA .tmail__dl dt { color: var(--text-2); }
.feature-port_scope__ehEaA .tmail__dl dd { margin: 0; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .tmail__att { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--navy); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.feature-port_scope__ehEaA .tmail__att:hover { border-color: var(--sky); }
.feature-port_scope__ehEaA .tmail__att:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.feature-port_scope__ehEaA .tmail__clip { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #fde3e3; color: #9b2c2c; flex: none; }
.feature-port_scope__ehEaA .tmail__clip svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .tmail__fn { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .tmail__go { display: grid; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .tmail__go > * { grid-area: 1 / 1; transition: opacity .25s; }
.feature-port_scope__ehEaA .tmail__grid[data-open="1"] .tmail__go .o,
.feature-port_scope__ehEaA .tmail__grid:not([data-open="1"]) .tmail__go .c { opacity: 0; }
.feature-port_scope__ehEaA .tmail__att.is-tap::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid var(--sky); animation: feature-port_sw-ping__uS4Q5 1s ease-out 1; }
.feature-port_scope__ehEaA .tmail__foot { font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .tmail__inv { position: relative; padding: 18px; transition: opacity .5s var(--ease), transform .55s var(--ease); }
.feature-port_scope__ehEaA .tmail__grid:not([data-open="1"]) .tmail__inv { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.feature-port_scope__ehEaA .tmail__inv .ctd__row.ok span,
.feature-port_scope__ehEaA .tmail__inv .ctd__row.ok b { color: #1f6b43; }
.feature-port_scope__ehEaA .tmail__stamp { position: absolute; right: 18px; top: 64px; padding: 4px 14px; border: 3px solid rgba(47,158,98,.75); border-radius: 8px; color: rgba(31,107,67,.85); font-family: var(--ui); font-weight: 800; font-size: 22px; letter-spacing: .14em; transform: rotate(-8deg); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .tmail__grid { grid-template-columns: 1fr; } .feature-port_scope__ehEaA .tmail__grid:not([data-open="1"]) .tmail__inv { display: none; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .tmail__inv,
.feature-port_scope__ehEaA .tmail__att::after,
.feature-port_scope__ehEaA .ppanel.is-ping li.is-new::after { transition: none !important; animation: none !important; } }
/* the day's phone sits over the empty task list, clear of the drawer */
@media (min-width: 901px) { .feature-port_scope__ehEaA .app .cphone { right: calc(min(100%, 440px) + 48px); bottom: 18px; } }
.feature-port_scope__ehEaA .cphone--inv .cphone__page { gap: 5px; }
.feature-port_scope__ehEaA .tmail__inv { padding-bottom: 64px; }
.feature-port_scope__ehEaA .tmail__stamp { top: auto; right: auto; left: 50%; bottom: 14px; transform: translateX(-50%) rotate(-6deg); }
/* =========================================================
   THE JOURNEY (Mark, 8 Oct 2026): one job told through its own drawer. Panel state: .jd[data-st] — f0–f4 (Create Task
   sheet), q1 q2 (Quote tab), i1 (Invoice, deposit paid), d1–d3 (Details: start, finish), v1 v2 (Invoice: send), p1 p2
   (Payments). Elements show in the states listed in data-v; the tab for the state is lit. HTML ships p2 (paid).
   ========================================================= */
.feature-port_scope__ehEaA .jr { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; }
.feature-port_scope__ehEaA .jr__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature-port_scope__ehEaA .jr__panel { position: sticky; top: 88px; }
.feature-port_scope__ehEaA .jr__panel .fstrip { margin-bottom: 10px; }
.feature-port_scope__ehEaA .jd { position: relative; height: 640px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 64px -42px rgba(3,15,30,.45); overflow: hidden; }
.feature-port_scope__ehEaA .jd [data-v] { opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .jd[data-st="f0"] [data-v~="f0"],
.feature-port_scope__ehEaA .jd[data-st="f1"] [data-v~="f1"],
.feature-port_scope__ehEaA .jd[data-st="f2"] [data-v~="f2"],
.feature-port_scope__ehEaA .jd[data-st="f3"] [data-v~="f3"],
.feature-port_scope__ehEaA .jd[data-st="f4"] [data-v~="f4"],
.feature-port_scope__ehEaA .jd[data-st="q1"] [data-v~="q1"],
.feature-port_scope__ehEaA .jd[data-st="q2"] [data-v~="q2"],
.feature-port_scope__ehEaA .jd[data-st="i1"] [data-v~="i1"],
.feature-port_scope__ehEaA .jd[data-st="d1"] [data-v~="d1"],
.feature-port_scope__ehEaA .jd[data-st="d2"] [data-v~="d2"],
.feature-port_scope__ehEaA .jd[data-st="d3"] [data-v~="d3"],
.feature-port_scope__ehEaA .jd[data-st="v1"] [data-v~="v1"],
.feature-port_scope__ehEaA .jd[data-st="v2"] [data-v~="v2"],
.feature-port_scope__ehEaA .jd[data-st="p1"] [data-v~="p1"],
.feature-port_scope__ehEaA .jd[data-st="p2"] [data-v~="p2"] { opacity: 1; }
.feature-port_scope__ehEaA .jd__scr,
.feature-port_scope__ehEaA .jd__drawer { position: absolute; inset: 0; }
.feature-port_scope__ehEaA .jd__screens { position: relative; flex: 1; }
.feature-port_scope__ehEaA .jd__screens .jd__scr { inset: 0; overflow: hidden; }
.feature-port_scope__ehEaA .jd__drawer { display: flex; flex-direction: column; }
.feature-port_scope__ehEaA .jd__body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 12px 16px 16px; }
.feature-port_scope__ehEaA .jd .hpanel__tabs span { transition: background-color .3s, color .3s, box-shadow .3s; }
.feature-port_scope__ehEaA .jd .hpanel__tabs span[data-on] { }
.feature-port_scope__ehEaA .jd[data-st="f0"] .hpanel__tabs [data-on~="f0"],
.feature-port_scope__ehEaA .jd[data-st="f1"] .hpanel__tabs [data-on~="f1"],
.feature-port_scope__ehEaA .jd[data-st="f2"] .hpanel__tabs [data-on~="f2"],
.feature-port_scope__ehEaA .jd[data-st="f3"] .hpanel__tabs [data-on~="f3"],
.feature-port_scope__ehEaA .jd[data-st="f4"] .hpanel__tabs [data-on~="f4"],
.feature-port_scope__ehEaA .jd[data-st="q1"] .hpanel__tabs [data-on~="q1"],
.feature-port_scope__ehEaA .jd[data-st="q2"] .hpanel__tabs [data-on~="q2"],
.feature-port_scope__ehEaA .jd[data-st="i1"] .hpanel__tabs [data-on~="i1"],
.feature-port_scope__ehEaA .jd[data-st="d1"] .hpanel__tabs [data-on~="d1"],
.feature-port_scope__ehEaA .jd[data-st="d2"] .hpanel__tabs [data-on~="d2"],
.feature-port_scope__ehEaA .jd[data-st="d3"] .hpanel__tabs [data-on~="d3"],
.feature-port_scope__ehEaA .jd[data-st="v1"] .hpanel__tabs [data-on~="v1"],
.feature-port_scope__ehEaA .jd[data-st="v2"] .hpanel__tabs [data-on~="v2"],
.feature-port_scope__ehEaA .jd[data-st="p1"] .hpanel__tabs [data-on~="p1"],
.feature-port_scope__ehEaA .jd[data-st="p2"] .hpanel__tabs [data-on~="p2"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(11,55,108,.14); }
.feature-port_scope__ehEaA .jd__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .jd__head > b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .jd .x2 { display: grid; }
.feature-port_scope__ehEaA .jd .x2 > * { grid-area: 1 / 1; }
.feature-port_scope__ehEaA .jd__badge i { justify-self: end; padding: 2px 9px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.feature-port_scope__ehEaA .jd__badge .w { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .jd__badge .r { background: #fde3e3; color: #9b2c2c; }
.feature-port_scope__ehEaA .jd__badge .s { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jd__badge .g { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .jd__badge .n { background: var(--panel-light); color: var(--text-2); }
.feature-port_scope__ehEaA .jd__ban { margin: 10px 0; padding: 9px 12px; border-radius: 9px; background: var(--panel-light); font-weight: 600; font-size: 13.5px; color: var(--navy); }
.feature-port_scope__ehEaA .jd__dep em { font-style: normal; padding: 1px 7px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 10.5px; background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jd__dep em.p { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .jd__dep i { display: inline-grid; vertical-align: middle; font-style: normal; }
.feature-port_scope__ehEaA .jd__dep.ok span,
.feature-port_scope__ehEaA .jd__dep.ok > b { color: #1f6b43; }
.feature-port_scope__ehEaA .jd__tick { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #2f9e62; color: #fff !important; font-size: 10px; }
.feature-port_scope__ehEaA .jd .ctd__sent i { font-style: normal; }
.feature-port_scope__ehEaA .jd .ctd__sent i.ok { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .jd .ctd__sent > span { display: flex; align-items: center; gap: 8px; }
.feature-port_scope__ehEaA .jd__ifoot { margin-top: 10px; }
.feature-port_scope__ehEaA .jd__note { font-size: 12.5px; color: var(--text-2); text-align: center; padding-top: 4px; }
.feature-port_scope__ehEaA .jd__how { padding: 8px 10px; border-radius: 8px; background: var(--panel-light); font-size: 12.5px; color: var(--navy); }
.feature-port_scope__ehEaA .jd__go { margin-top: 10px; }
.feature-port_scope__ehEaA .jd__toasts { margin-top: 10px; }
.feature-port_scope__ehEaA .jd__toasts .drawer__toast { margin: 0; transform: none; }
.feature-port_scope__ehEaA .jd .drawer__dl { margin-top: 0; }
.feature-port_scope__ehEaA .jd__bar i { transition: transform .7s var(--ease); }
.feature-port_scope__ehEaA .jd[data-st="p1"] .jd__bar i { transform: scaleX(.3); }
.feature-port_scope__ehEaA .jd .plist li.jd__new { position: relative; }
.feature-port_scope__ehEaA .jd .plist li.jd__new::after { content: ""; position: absolute; inset: 2px -6px; border-radius: 10px; border: 2px solid var(--sky); opacity: 0; pointer-events: none; }
.feature-port_scope__ehEaA .jd.is-ping .plist li.jd__new::after { animation: feature-port_sw-ping__uS4Q5 1.6s ease-out 2; }
/* the Create Task sheet inside the panel */
.feature-port_scope__ehEaA .jd__form { display: flex; flex-direction: column; overflow: hidden; }
.feature-port_scope__ehEaA .jd__form .ctf__body { gap: 8px; padding: 12px 16px 14px; }
.feature-port_scope__ehEaA .jd__form .ctf__box { min-height: 34px; }
.feature-port_scope__ehEaA .jd__form .ctf__items { display: grid; gap: 4px; }
.feature-port_scope__ehEaA .jd__form .ctf__items li { transition-delay: calc((var(--i) - 1) * .25s); }
.feature-port_scope__ehEaA .jd[data-st="f4"] .tg b { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="f4"] .tg::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .jd .ctf__btn.is-press::after,
.feature-port_scope__ehEaA .jd .drawer__btn.is-press::after { opacity: .28; }
/* the cursor */
.feature-port_scope__ehEaA .jd__cur { z-index: 6; }
.feature-port_scope__ehEaA .jd.is-cur .jd__cur { opacity: 1; }
/* the customer's phones: one per customer moment */
.feature-port_scope__ehEaA .jr__panel .cphone { right: -26px; bottom: -22px; }
.feature-port_scope__ehEaA .jr__panel[data-step="2"] .cphone[data-s="2"],
.feature-port_scope__ehEaA .jr__panel[data-step="3"] .cphone[data-s="3"],
.feature-port_scope__ehEaA .jr__panel[data-step="7"] .cphone[data-s="7"] { opacity: 1; transform: none; }
/* live flow strip: the stop for the current step is lit, the ones before it are done */
.feature-port_scope__ehEaA .jr__panel .fstrip li { transition: background-color .3s, color .3s; }
.feature-port_scope__ehEaA .jr__panel[data-step="1"] .fstrip li:nth-child(1) { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__panel[data-step="1"] .fstrip li:nth-child(1)::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="2"] .fstrip li:nth-child(-n+1) { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="2"] .fstrip li:nth-child(2) { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__panel[data-step="2"] .fstrip li:nth-child(2)::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="3"] .fstrip li:nth-child(-n+2) { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="3"] .fstrip li:nth-child(3) { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__panel[data-step="3"] .fstrip li:nth-child(3)::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="4"] .fstrip li:nth-child(-n+3) { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="4"] .fstrip li:nth-child(4) { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__panel[data-step="4"] .fstrip li:nth-child(4)::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="5"] .fstrip li:nth-child(-n+4) { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="5"] .fstrip li:nth-child(5) { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__panel[data-step="5"] .fstrip li:nth-child(5)::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="6"] .fstrip li:nth-child(-n+4) { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="6"] .fstrip li:nth-child(5) { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__panel[data-step="6"] .fstrip li:nth-child(5)::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="7"] .fstrip li:nth-child(-n+5) { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jr__panel[data-step="7"] .fstrip li:nth-child(6) { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__panel[data-step="7"] .fstrip li:nth-child(6)::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .ways-sec { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--pad) 0; }
.feature-port_scope__ehEaA .ways-sec .ways { margin-top: 0; }
@media (max-width: 1200px) { .feature-port_scope__ehEaA .jr__panel .cphone { right: -8px; } }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .jr__grid { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .jr__panel { position: static; }
  .feature-port_scope__ehEaA .jr__panel .cphone { display: none; }
  .feature-port_scope__ehEaA .jd { height: 600px; }
}
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .jd *,
.feature-port_scope__ehEaA .jd { transition: none !important; animation: none !important; } }
/* journey fixes: a slightly taller frame, a compact Create Task sheet, the deposit pill on one line,
   and on wide screens the drawer steps aside for the customer's phone instead of being covered by it */
.feature-port_scope__ehEaA .jd { height: 680px; }
.feature-port_scope__ehEaA .jd__form .ctf__head { padding: 10px 16px; }
.feature-port_scope__ehEaA .jd__form .ctf__body { gap: 6px; padding: 10px 16px 12px; }
.feature-port_scope__ehEaA .jd__form .ctf__f { gap: 3px; }
.feature-port_scope__ehEaA .jd__form .ctf__k { font-size: 11px; }
.feature-port_scope__ehEaA .jd__form .ctf__box { min-height: 31px; font-size: 13px; }
.feature-port_scope__ehEaA .jd__form .ctf__box--ta { min-height: 46px; }
.feature-port_scope__ehEaA .jd__form .ctf__items li { padding: 6px 10px; }
.feature-port_scope__ehEaA .jd__form .ctf__q { font-size: 13px; }
.feature-port_scope__ehEaA .jd__form .ctf__btn { min-height: 38px; }
.feature-port_scope__ehEaA .jd__dep > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (min-width: 1280px) {
  .feature-port_scope__ehEaA .jd { width: calc(100% - 236px); margin-left: 118px; transition: transform .6s var(--ease); }
  .feature-port_scope__ehEaA .jr__panel[data-step="2"] .jd,
.feature-port_scope__ehEaA .jr__panel[data-step="3"] .jd,
.feature-port_scope__ehEaA .jr__panel[data-step="7"] .jd { transform: translateX(-118px); }
  .feature-port_scope__ehEaA .jr__panel .cphone { right: 0; top: 120px; bottom: auto; transform: translateX(30px); }
}
.feature-port_scope__ehEaA .jr__steps li:last-child { min-height: 72vh; }
.feature-port_scope__ehEaA .jr__panel .fstrip { justify-content: center; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .jr__steps li:last-child { min-height: 0; } }
/* =========================================================
   JOURNEY v2 (Mark, 8 Oct 2026): in sync, bigger, and the customer's turn on the left.
   Each step is one screen tall with its text centred beside the drawer; the drawer changes when the step reaches the
   middle of the screen. Your steps carry "You · in SendWork"; the customer's (02 03 07) carry a green cue and their phone.
   ========================================================= */
.feature-port_scope__ehEaA .jr__grid { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(28px, 4vw, 64px); }
.feature-port_scope__ehEaA .jr__steps li.jr__st { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; align-content: center; min-height: 100vh; padding: 0; border-top: 0; }
.feature-port_scope__ehEaA .jr__steps li.jr__st:last-child { min-height: 100vh; }
.feature-port_scope__ehEaA .jr__txt { display: flex; flex-direction: column; align-items: flex-start; }
.feature-port_scope__ehEaA .jr__who { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 4px 12px 4px 5px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; }
.feature-port_scope__ehEaA .jr__who i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.feature-port_scope__ehEaA .jr__who svg { width: 13px; height: 13px; }
.feature-port_scope__ehEaA .jr__who.y { background: rgba(11,55,108,.07); color: var(--navy); }
.feature-port_scope__ehEaA .jr__who.y i { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jr__who.c { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .jr__who.c i { background: #2f9e62; color: #fff; }
.feature-port_scope__ehEaA .jr__st.is-cust .story__t { color: var(--navy); }
.feature-port_scope__ehEaA .jr__cue { margin-top: 10px; padding: 10px 14px; border-left: 3px solid #2f9e62; border-radius: 0 10px 10px 0; background: #f1faf4; color: #1f6b43; font-weight: 600; max-width: 34ch; }
.feature-port_scope__ehEaA .jr__st .story__s { margin-top: 12px; }
/* the customer's phone lives in their step, on the left */
.feature-port_scope__ehEaA .jr__st .cphone { position: relative; right: auto; left: auto; top: auto; bottom: auto; width: 240px; margin-top: 16px; opacity: 1; transform: none; pointer-events: none; }
.feature-port_scope__ehEaA .jr__st .cphone .cphone__scr { height: 350px; }
/* the drawer: the whole right column, a touch bigger, vertically centred while sticky */
.feature-port_scope__ehEaA .jr__panel { top: max(76px, calc(50vh - 380px)); }
.feature-port_scope__ehEaA .jd { width: 100% !important; margin-left: 0 !important; transform: none !important; height: 700px; }
.feature-port_scope__ehEaA .jd .hpanel__tabs span { font-size: 14px; padding: 8px 6px; }
.feature-port_scope__ehEaA .jd__head > b { font-size: 19px; }
.feature-port_scope__ehEaA .jd__ban { font-size: 14.5px; }
.feature-port_scope__ehEaA .jd .ctd__inv { padding: 16px 18px; }
.feature-port_scope__ehEaA .jd .ctd__top b { font-size: 21px; }
.feature-port_scope__ehEaA .jd .ctd__top span { font-size: 13px; }
.feature-port_scope__ehEaA .jd .ctd__row { font-size: 14.5px; padding: 7px 0; }
.feature-port_scope__ehEaA .jd .drawer__dl div { font-size: 14.5px; padding: 10px 0; }
.feature-port_scope__ehEaA .jd .drawer__btn { min-height: 46px; font-size: 15px; }
.feature-port_scope__ehEaA .jd .psum b { font-size: 21px; }
.feature-port_scope__ehEaA .jd .plist__t { font-size: 15px; }
.feature-port_scope__ehEaA .jd__form .ctf__box { font-size: 14px; }
/* phones: one copy of the drawer per step (built by JS), hidden on wide screens */
.feature-port_scope__ehEaA .jd--m { display: none; }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .jr__panel { display: none; }
  .feature-port_scope__ehEaA .jr__steps li.jr__st { min-height: 0; padding: 36px 0; border-top: 1px solid var(--line); align-content: start; }
  .feature-port_scope__ehEaA .jr__steps li.jr__st:last-child { min-height: 0; }
  .feature-port_scope__ehEaA.motion .jr__steps li.jr__st:not(.on) { opacity: 1; }
  .feature-port_scope__ehEaA .jr__st .cphone { margin: 16px 0 0; width: 230px; }
  .feature-port_scope__ehEaA .jd--m { display: block; grid-column: 1 / -1; position: relative; height: 640px; margin-top: 18px; }
  .feature-port_scope__ehEaA .jd--m .hpanel__tabs span { font-size: 12.5px; }
}
.feature-port_scope__ehEaA .jr__cust { margin-top: 16px; padding: 14px 16px 16px; border-radius: 16px; background: #f1faf4; border: 1px solid rgba(47,158,98,.25); }
.feature-port_scope__ehEaA .jr__cust .jr__who { margin-bottom: 8px; background: #fff; }
.feature-port_scope__ehEaA .jr__cust .jr__cue { margin-top: 0; padding: 0; border: 0; background: none; }
.feature-port_scope__ehEaA .jr__cust .cphone { margin-top: 14px; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .jr__grid { grid-template-columns: minmax(0, 1fr); } }
/* phones: each drawer copy sizes to its content; only the current screen takes space */
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .jd--m { height: auto; }
  .feature-port_scope__ehEaA .jd--m .jd__scr,
.feature-port_scope__ehEaA .jd--m .jd__drawer { position: relative; inset: auto; }
  .feature-port_scope__ehEaA .jd--m .jd__screens { flex: none; }
  .feature-port_scope__ehEaA .jd--m[data-st="f0"] .jd__scr:not([data-v~="f0"]),
.feature-port_scope__ehEaA .jd--m[data-st="f0"] .jd__drawer:not([data-v~="f0"]),
.feature-port_scope__ehEaA .jd--m[data-st="f1"] .jd__scr:not([data-v~="f1"]),
.feature-port_scope__ehEaA .jd--m[data-st="f1"] .jd__drawer:not([data-v~="f1"]),
.feature-port_scope__ehEaA .jd--m[data-st="f2"] .jd__scr:not([data-v~="f2"]),
.feature-port_scope__ehEaA .jd--m[data-st="f2"] .jd__drawer:not([data-v~="f2"]),
.feature-port_scope__ehEaA .jd--m[data-st="f3"] .jd__scr:not([data-v~="f3"]),
.feature-port_scope__ehEaA .jd--m[data-st="f3"] .jd__drawer:not([data-v~="f3"]),
.feature-port_scope__ehEaA .jd--m[data-st="f4"] .jd__scr:not([data-v~="f4"]),
.feature-port_scope__ehEaA .jd--m[data-st="f4"] .jd__drawer:not([data-v~="f4"]),
.feature-port_scope__ehEaA .jd--m[data-st="q1"] .jd__scr:not([data-v~="q1"]),
.feature-port_scope__ehEaA .jd--m[data-st="q1"] .jd__drawer:not([data-v~="q1"]),
.feature-port_scope__ehEaA .jd--m[data-st="q2"] .jd__scr:not([data-v~="q2"]),
.feature-port_scope__ehEaA .jd--m[data-st="q2"] .jd__drawer:not([data-v~="q2"]),
.feature-port_scope__ehEaA .jd--m[data-st="i1"] .jd__scr:not([data-v~="i1"]),
.feature-port_scope__ehEaA .jd--m[data-st="i1"] .jd__drawer:not([data-v~="i1"]),
.feature-port_scope__ehEaA .jd--m[data-st="d1"] .jd__scr:not([data-v~="d1"]),
.feature-port_scope__ehEaA .jd--m[data-st="d1"] .jd__drawer:not([data-v~="d1"]),
.feature-port_scope__ehEaA .jd--m[data-st="d2"] .jd__scr:not([data-v~="d2"]),
.feature-port_scope__ehEaA .jd--m[data-st="d2"] .jd__drawer:not([data-v~="d2"]),
.feature-port_scope__ehEaA .jd--m[data-st="d3"] .jd__scr:not([data-v~="d3"]),
.feature-port_scope__ehEaA .jd--m[data-st="d3"] .jd__drawer:not([data-v~="d3"]),
.feature-port_scope__ehEaA .jd--m[data-st="v1"] .jd__scr:not([data-v~="v1"]),
.feature-port_scope__ehEaA .jd--m[data-st="v1"] .jd__drawer:not([data-v~="v1"]),
.feature-port_scope__ehEaA .jd--m[data-st="v2"] .jd__scr:not([data-v~="v2"]),
.feature-port_scope__ehEaA .jd--m[data-st="v2"] .jd__drawer:not([data-v~="v2"]),
.feature-port_scope__ehEaA .jd--m[data-st="p1"] .jd__scr:not([data-v~="p1"]),
.feature-port_scope__ehEaA .jd--m[data-st="p1"] .jd__drawer:not([data-v~="p1"]),
.feature-port_scope__ehEaA .jd--m[data-st="p2"] .jd__scr:not([data-v~="p2"]),
.feature-port_scope__ehEaA .jd--m[data-st="p2"] .jd__drawer:not([data-v~="p2"]) { display: none; }
}
.feature-port_scope__ehEaA .jd .ctd__row b,
.feature-port_scope__ehEaA .jd .plist__a { white-space: nowrap; }
/* =========================================================
   JOURNEY v3 (Mark, 8 Oct 2026): every step acted out, and the customer's block in our own sky/navy style (no green
   block — green stays for "paid", as in the app).
   ========================================================= */
.feature-port_scope__ehEaA .jr__who.c { background: #e6f4f9; color: var(--navy); }
.feature-port_scope__ehEaA .jr__who.c i { background: var(--sky-deep); color: #fff; }
.feature-port_scope__ehEaA .jr__cust { background: #f0f8fb; border: 1px solid rgba(72,172,200,.35); }
.feature-port_scope__ehEaA .jr__cust .jr__who { background: #fff; }
.feature-port_scope__ehEaA .jr__cust .jr__cue { color: var(--navy); font-weight: 600; }
/* the customer's cursor on their phone */
.feature-port_scope__ehEaA .cphone__cur { position: absolute; left: 0; top: 0; z-index: 6; width: 24px; height: 24px; opacity: 0; pointer-events: none; transform: translate(var(--px, 150px), var(--py, 330px));
  transition: transform .85s cubic-bezier(.45, 0, .2, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(3,15,30,.35)); }
.feature-port_scope__ehEaA .cphone__cur svg { width: 100%; height: 100%; display: block; }
.feature-port_scope__ehEaA .cphone.is-cur .cphone__cur { opacity: 1; }
/* your cursor: a slower, deliberate glide */
.feature-port_scope__ehEaA .jd .jd__cur { transition: transform .85s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
/* what changed after an action: a soft ring on the banner and the lit tab */
.feature-port_scope__ehEaA .jd__ban,
.feature-port_scope__ehEaA .jd .hpanel__tabs span { position: relative; }
.feature-port_scope__ehEaA .jd__ban::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid var(--sky); opacity: 0; pointer-events: none; }
.feature-port_scope__ehEaA .jd.is-upd .jd__ban::after { animation: feature-port_sw-ping__uS4Q5 1.3s ease-out 1; }
.feature-port_scope__ehEaA .jd.is-upd[data-st="q1"] .hpanel__tabs [data-on~="q1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="q2"] .hpanel__tabs [data-on~="q2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="i1"] .hpanel__tabs [data-on~="i1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="d1"] .hpanel__tabs [data-on~="d1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="d2"] .hpanel__tabs [data-on~="d2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="d3"] .hpanel__tabs [data-on~="d3"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="v1"] .hpanel__tabs [data-on~="v1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="v2"] .hpanel__tabs [data-on~="v2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="p1"] .hpanel__tabs [data-on~="p1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="p2"] .hpanel__tabs [data-on~="p2"]::after { content: ""; position: absolute; inset: -2px; border-radius: 9px; border: 2px solid var(--sky); animation: feature-port_sw-ping__uS4Q5 1.3s ease-out 1; pointer-events: none; }
.feature-port_scope__ehEaA .jd .hpanel__tabs span.is-press::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: rgba(72,172,200,.25); }
/* named cursors (Mural / Framer multiplayer style): the arrow + a name pill; a ring at the tip on each click */
.feature-port_scope__ehEaA .jd .jd__cur,
.feature-port_scope__ehEaA .cphone__cur { width: auto; height: auto; }
.feature-port_scope__ehEaA .jd .jd__cur svg,
.feature-port_scope__ehEaA .cphone__cur svg { width: 22px; height: 22px; display: block; }
.feature-port_scope__ehEaA .curname { position: absolute; left: 16px; top: 18px; padding: 2px 9px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 11.5px; white-space: nowrap; color: #fff; box-shadow: 0 6px 14px -6px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .jd__cur .curname { background: var(--navy); }
.feature-port_scope__ehEaA .cphone__cur .curname { background: var(--sky-deep); font-size: 10.5px; }
.feature-port_scope__ehEaA .jd__cur::after,
.feature-port_scope__ehEaA .cphone__cur::after { content: ""; position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sky); opacity: 0; }
.feature-port_scope__ehEaA .jd__cur.is-click::after,
.feature-port_scope__ehEaA .cphone__cur.is-click::after { animation: feature-port_sw-ping__uS4Q5 .7s ease-out 1; }
.feature-port_scope__ehEaA .cphone__tap { display: none; }
/* =========================================================
   THE HOURLY JOURNEY (Mark, 8 Oct 2026): same drawer, same pacing as the fixed-price one. States: hf0–hf4 (Create Task,
   Hourly Rate) · hq1 hq2 (Quote: sent → approved) · ht (Time Tracking: the time form fills in, data-f 0–8) · hi1 hi2
   (Invoice: hours logged × rate → sent) · hp (Payments: paid). HTML ships hp.
   ========================================================= */
.feature-port_scope__ehEaA .jd[data-st="hf0"] [data-v~="hf0"],
.feature-port_scope__ehEaA .jd[data-st="hf1"] [data-v~="hf1"],
.feature-port_scope__ehEaA .jd[data-st="hf2"] [data-v~="hf2"],
.feature-port_scope__ehEaA .jd[data-st="hf3"] [data-v~="hf3"],
.feature-port_scope__ehEaA .jd[data-st="hf4"] [data-v~="hf4"],
.feature-port_scope__ehEaA .jd[data-st="hq1"] [data-v~="hq1"],
.feature-port_scope__ehEaA .jd[data-st="hq2"] [data-v~="hq2"],
.feature-port_scope__ehEaA .jd[data-st="ht"] [data-v~="ht"],
.feature-port_scope__ehEaA .jd[data-st="hi1"] [data-v~="hi1"],
.feature-port_scope__ehEaA .jd[data-st="hi2"] [data-v~="hi2"],
.feature-port_scope__ehEaA .jd[data-st="hp"] [data-v~="hp"] { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="hf0"] .hpanel__tabs [data-on~="hf0"],
.feature-port_scope__ehEaA .jd[data-st="hf1"] .hpanel__tabs [data-on~="hf1"],
.feature-port_scope__ehEaA .jd[data-st="hf2"] .hpanel__tabs [data-on~="hf2"],
.feature-port_scope__ehEaA .jd[data-st="hf3"] .hpanel__tabs [data-on~="hf3"],
.feature-port_scope__ehEaA .jd[data-st="hf4"] .hpanel__tabs [data-on~="hf4"],
.feature-port_scope__ehEaA .jd[data-st="hq1"] .hpanel__tabs [data-on~="hq1"],
.feature-port_scope__ehEaA .jd[data-st="hq2"] .hpanel__tabs [data-on~="hq2"],
.feature-port_scope__ehEaA .jd[data-st="ht"] .hpanel__tabs [data-on~="ht"],
.feature-port_scope__ehEaA .jd[data-st="hi1"] .hpanel__tabs [data-on~="hi1"],
.feature-port_scope__ehEaA .jd[data-st="hi2"] .hpanel__tabs [data-on~="hi2"],
.feature-port_scope__ehEaA .jd[data-st="hp"] .hpanel__tabs [data-on~="hp"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(11,55,108,.14); }
.feature-port_scope__ehEaA .jd.is-upd[data-st="hf0"] .hpanel__tabs [data-on~="hf0"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hf1"] .hpanel__tabs [data-on~="hf1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hf2"] .hpanel__tabs [data-on~="hf2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hf3"] .hpanel__tabs [data-on~="hf3"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hf4"] .hpanel__tabs [data-on~="hf4"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hq1"] .hpanel__tabs [data-on~="hq1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hq2"] .hpanel__tabs [data-on~="hq2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="ht"] .hpanel__tabs [data-on~="ht"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hi1"] .hpanel__tabs [data-on~="hi1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hi2"] .hpanel__tabs [data-on~="hi2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="hp"] .hpanel__tabs [data-on~="hp"]::after { content: ""; position: absolute; inset: -2px; border-radius: 9px; border: 2px solid var(--sky); animation: feature-port_sw-ping__uS4Q5 1.3s ease-out 1; pointer-events: none; }
.feature-port_scope__ehEaA .ctf__seg--h .ctf__on { left: calc(50% + 0px); }
.feature-port_scope__ehEaA .jd[data-st="hf4"] .tg--hq b { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="hf4"] .tg--hq::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .jd__time .tform { padding: 0; border: 0; box-shadow: none; background: none; }
.feature-port_scope__ehEaA .jd__time .tform__top b { font-size: 17px; }
.feature-port_scope__ehEaA .jd__savebar { margin-top: 12px; }
.feature-port_scope__ehEaA .jd__save { min-height: 40px !important; font-size: 14px !important; }
.feature-port_scope__ehEaA .jd__time .tform__list { margin-top: 12px; }
.feature-port_scope__ehEaA .jd .tform__chips i.is-press::after { opacity: .55; }
.feature-port_scope__ehEaA .jd__labor { position: relative; }
.feature-port_scope__ehEaA .jd__from { justify-self: start; display: inline-block; margin: 2px 0 6px; padding: 2px 10px; border-radius: 999px; background: #dff1f7; color: var(--navy); font-family: var(--ui); font-weight: 700; font-size: 12px; }
.feature-port_scope__ehEaA .jd.is-upd[data-st="hi1"] .jd__labor::after { content: ""; position: absolute; inset: -2px -8px; border-radius: 8px; border: 2px solid var(--sky); animation: feature-port_sw-ping__uS4Q5 1.3s ease-out 2; }
/* the example logo for "Your Company" */
.feature-port_scope__ehEaA .yco { display: inline-flex; align-items: center; gap: 8px; }
.feature-port_scope__ehEaA .ylogo { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 28%; background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%); flex: none; }
.feature-port_scope__ehEaA .ylogo svg { width: 64%; height: 64%; display: block; }
.feature-port_scope__ehEaA .cphone__co.yco { gap: 6px; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .jd--m[data-st="hf0"] .jd__scr:not([data-v~="hf0"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf0"] .jd__drawer:not([data-v~="hf0"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf1"] .jd__scr:not([data-v~="hf1"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf1"] .jd__drawer:not([data-v~="hf1"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf2"] .jd__scr:not([data-v~="hf2"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf2"] .jd__drawer:not([data-v~="hf2"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf3"] .jd__scr:not([data-v~="hf3"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf3"] .jd__drawer:not([data-v~="hf3"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf4"] .jd__scr:not([data-v~="hf4"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf4"] .jd__drawer:not([data-v~="hf4"]),
.feature-port_scope__ehEaA .jd--m[data-st="hq1"] .jd__scr:not([data-v~="hq1"]),
.feature-port_scope__ehEaA .jd--m[data-st="hq1"] .jd__drawer:not([data-v~="hq1"]),
.feature-port_scope__ehEaA .jd--m[data-st="hq2"] .jd__scr:not([data-v~="hq2"]),
.feature-port_scope__ehEaA .jd--m[data-st="hq2"] .jd__drawer:not([data-v~="hq2"]),
.feature-port_scope__ehEaA .jd--m[data-st="ht"] .jd__scr:not([data-v~="ht"]),
.feature-port_scope__ehEaA .jd--m[data-st="ht"] .jd__drawer:not([data-v~="ht"]),
.feature-port_scope__ehEaA .jd--m[data-st="hi1"] .jd__scr:not([data-v~="hi1"]),
.feature-port_scope__ehEaA .jd--m[data-st="hi1"] .jd__drawer:not([data-v~="hi1"]),
.feature-port_scope__ehEaA .jd--m[data-st="hi2"] .jd__scr:not([data-v~="hi2"]),
.feature-port_scope__ehEaA .jd--m[data-st="hi2"] .jd__drawer:not([data-v~="hi2"]),
.feature-port_scope__ehEaA .jd--m[data-st="hp"] .jd__scr:not([data-v~="hp"]),
.feature-port_scope__ehEaA .jd--m[data-st="hp"] .jd__drawer:not([data-v~="hp"]) { display: none; } }
.feature-port_scope__ehEaA .sset { position: relative; }
.feature-port_scope__ehEaA .sset .sset__cur { z-index: 8; transition: transform .85s cubic-bezier(.45, 0, .2, 1), opacity .3s; width: auto; height: auto; }
.feature-port_scope__ehEaA .sset .sset__cur svg { width: 22px; height: 22px; display: block; }
.feature-port_scope__ehEaA .sset__cur .curname { background: var(--navy); }
.feature-port_scope__ehEaA .sset.is-cur .sset__cur { opacity: 1; }
.feature-port_scope__ehEaA .tmail__inv .ctd__top b { font-family: var(--display); font-size: 19px; }
.feature-port_scope__ehEaA .ctd__top b.yco span { font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
/* =========================================================
   ROUND 10 (Mark, 8 Oct 2026): the customer's phone on the RIGHT, next to the drawer (they react to what you start);
   "Automated" marks the moments SendWork acts with no action from you.
   ========================================================= */
.feature-port_scope__ehEaA .jr__who.a { background: rgba(72,172,200,.14); color: var(--sky-deep); }
.feature-port_scope__ehEaA .jr__who.a i { background: var(--sky); color: #fff; }
.feature-port_scope__ehEaA .auto { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 1px 8px 1px 5px; border-radius: 999px; background: var(--sky); color: #fff; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 11px; vertical-align: 1px; }
.feature-port_scope__ehEaA .auto svg { width: 11px; height: 11px; }
.feature-port_scope__ehEaA .drawer__toast--auto { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.feature-port_scope__ehEaA .drawer__toast:not(.drawer__toast--paid).drawer__toast--auto { background: #e6f4f9; color: var(--navy); }
.feature-port_scope__ehEaA .jd__note { display: grid; gap: 8px; text-align: left; }
.feature-port_scope__ehEaA .jd__prep { text-align: center; font-size: 12.5px; color: var(--text-2); }
/* wide screens: the phone docks to the right of the drawer, in the page margin; if the margin is short, the drawer
   steps left just enough for it */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel { --m: calc((100vw - min(var(--max), 100vw)) / 2 + var(--pad) - 18px); --s: max(0px, calc(256px - var(--m))); }
  .feature-port_scope__ehEaA .jr__panel > .cphone { position: absolute; top: 96px; right: calc(var(--s) - 256px); bottom: auto; left: auto; width: 240px; margin: 0; opacity: 0; transform: translateX(24px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
  .feature-port_scope__ehEaA .jr__panel > .cphone .cphone__scr { height: 360px; }
  .feature-port_scope__ehEaA .jr__panel[data-step="2"] > .cphone[data-s="2"],
.feature-port_scope__ehEaA .jr__panel[data-step="3"] > .cphone[data-s="3"],
.feature-port_scope__ehEaA .jr__panel[data-step="7"] > .cphone[data-s="7"] { opacity: 1; transform: none; }
  .feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel .jd { transition: transform .6s var(--ease); }
  .feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel[data-step="2"] .jd,
.feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel[data-step="3"] .jd,
.feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel[data-step="7"] .jd { transform: translateX(calc(-1 * var(--s))) !important; }
}
/* scroll-driven journeys (Mark, 8 Oct 2026): each step's text stays pinned beside the drawer while its actions play out
   along the scroll; busy steps get more room. */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .jr__steps li.jr__st { min-height: 130vh; align-content: start; padding-top: 22vh; }
  .feature-port_scope__ehEaA .jr__steps li.jr__st.is-long { min-height: 210vh; }
  .feature-port_scope__ehEaA .jr__steps li.jr__st:last-child { min-height: 130vh; }
  .feature-port_scope__ehEaA .jr__st .jr__txt,
.feature-port_scope__ehEaA .jr__st .story__n { position: sticky; top: 22vh; align-self: start; }
}
/* =========================================================
   ROUND 12 (Mark, 8 Oct 2026): Create Task acted out field by field in both journeys (click → outline → the text types
   in; Add line items / Add another item; the toggles clicked), and the hourly journey gets its customer's phone too.
   ========================================================= */
.feature-port_scope__ehEaA .jd[data-st="f5"] [data-v~="f5"],
.feature-port_scope__ehEaA .jd[data-st="f6"] [data-v~="f6"],
.feature-port_scope__ehEaA .jd[data-st="f7"] [data-v~="f7"],
.feature-port_scope__ehEaA .jd[data-st="f8"] [data-v~="f8"],
.feature-port_scope__ehEaA .jd[data-st="f9"] [data-v~="f9"],
.feature-port_scope__ehEaA .jd[data-st="hf5"] [data-v~="hf5"],
.feature-port_scope__ehEaA .jd[data-st="hf6"] [data-v~="hf6"],
.feature-port_scope__ehEaA .jd[data-st="hf7"] [data-v~="hf7"],
.feature-port_scope__ehEaA .jd[data-st="hf8"] [data-v~="hf8"],
.feature-port_scope__ehEaA .jd[data-st="hf9"] [data-v~="hf9"] { opacity: 1; }
.feature-port_scope__ehEaA .jd__form .ctf__box .v { transition: none; }
.feature-port_scope__ehEaA .jd__form .tv .ch { opacity: 0; transition: opacity .05s linear; transition-delay: calc(var(--ci, 0) * 24ms); }
.feature-port_scope__ehEaA .jd[data-st="f0"] [data-v~="f0"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f1"] [data-v~="f1"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f2"] [data-v~="f2"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f3"] [data-v~="f3"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f4"] [data-v~="f4"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f5"] [data-v~="f5"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f6"] [data-v~="f6"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f7"] [data-v~="f7"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f8"] [data-v~="f8"] .ch,
.feature-port_scope__ehEaA .jd[data-st="f9"] [data-v~="f9"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf0"] [data-v~="hf0"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf1"] [data-v~="hf1"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf2"] [data-v~="hf2"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf3"] [data-v~="hf3"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf4"] [data-v~="hf4"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf5"] [data-v~="hf5"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf6"] [data-v~="hf6"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf7"] [data-v~="hf7"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf8"] [data-v~="hf8"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf9"] [data-v~="hf9"] .ch { opacity: 1; }
.feature-port_scope__ehEaA .ctf__box.is-focus { box-shadow: 0 0 0 2px var(--sky); border-color: var(--sky); }
.feature-port_scope__ehEaA .ctf__items li { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .jd .ctf__items li[data-v] { transform: translateY(8px); }
.feature-port_scope__ehEaA .jd[data-st="f0"] .ctf__items li[data-v~="f0"],
.feature-port_scope__ehEaA .jd[data-st="f1"] .ctf__items li[data-v~="f1"],
.feature-port_scope__ehEaA .jd[data-st="f2"] .ctf__items li[data-v~="f2"],
.feature-port_scope__ehEaA .jd[data-st="f3"] .ctf__items li[data-v~="f3"],
.feature-port_scope__ehEaA .jd[data-st="f4"] .ctf__items li[data-v~="f4"],
.feature-port_scope__ehEaA .jd[data-st="f5"] .ctf__items li[data-v~="f5"],
.feature-port_scope__ehEaA .jd[data-st="f6"] .ctf__items li[data-v~="f6"],
.feature-port_scope__ehEaA .jd[data-st="f7"] .ctf__items li[data-v~="f7"],
.feature-port_scope__ehEaA .jd[data-st="f8"] .ctf__items li[data-v~="f8"],
.feature-port_scope__ehEaA .jd[data-st="f9"] .ctf__items li[data-v~="f9"],
.feature-port_scope__ehEaA .jd[data-st="hf0"] .ctf__items li[data-v~="hf0"],
.feature-port_scope__ehEaA .jd[data-st="hf1"] .ctf__items li[data-v~="hf1"],
.feature-port_scope__ehEaA .jd[data-st="hf2"] .ctf__items li[data-v~="hf2"],
.feature-port_scope__ehEaA .jd[data-st="hf3"] .ctf__items li[data-v~="hf3"],
.feature-port_scope__ehEaA .jd[data-st="hf4"] .ctf__items li[data-v~="hf4"],
.feature-port_scope__ehEaA .jd[data-st="hf5"] .ctf__items li[data-v~="hf5"],
.feature-port_scope__ehEaA .jd[data-st="hf6"] .ctf__items li[data-v~="hf6"],
.feature-port_scope__ehEaA .jd[data-st="hf7"] .ctf__items li[data-v~="hf7"],
.feature-port_scope__ehEaA .jd[data-st="hf8"] .ctf__items li[data-v~="hf8"],
.feature-port_scope__ehEaA .jd[data-st="hf9"] .ctf__items li[data-v~="hf9"] { transform: none; }
.feature-port_scope__ehEaA .ctf__adds { margin-top: 4px; }
.feature-port_scope__ehEaA .ctf__adds > * { grid-area: 1 / 1; }
.feature-port_scope__ehEaA .ctf__add { position: relative; justify-self: start; padding: 4px 8px; border-radius: 7px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .tgl { position: relative; width: 34px; height: 20px; border-radius: 20px; background: rgba(11,55,108,.18); overflow: hidden; }
.feature-port_scope__ehEaA .tgl b { position: absolute; inset: 0; background: #2f9e62; opacity: 0; transition: opacity .3s; }
.feature-port_scope__ehEaA .tgl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.feature-port_scope__ehEaA .jd[data-st="f8"] .tgl--q b,
.feature-port_scope__ehEaA .jd[data-st="f9"] .tgl--q b,
.feature-port_scope__ehEaA .jd[data-st="hf8"] .tgl--q b,
.feature-port_scope__ehEaA .jd[data-st="hf9"] .tgl--q b,
.feature-port_scope__ehEaA .jd[data-st="f9"] .tgl--d b { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="f8"] .tgl--q::after,
.feature-port_scope__ehEaA .jd[data-st="f9"] .tgl--q::after,
.feature-port_scope__ehEaA .jd[data-st="hf8"] .tgl--q::after,
.feature-port_scope__ehEaA .jd[data-st="hf9"] .tgl--q::after,
.feature-port_scope__ehEaA .jd[data-st="f9"] .tgl--d::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .jd__form .ctf__seg b,
.feature-port_scope__ehEaA .ctf__add,
.feature-port_scope__ehEaA .tgl { position: relative; }
.feature-port_scope__ehEaA .jd__form .is-press::before { content: ""; position: absolute; inset: -2px; border-radius: 9px; background: rgba(72,172,200,.28); pointer-events: none; }
.feature-port_scope__ehEaA .jd__form { overflow: hidden; }
.feature-port_scope__ehEaA .jd__form .ctf__body { gap: 5px; }
/* the hourly journey: phones on the right too (steps 02 and 05) */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .jr--h .jr__panel { --m: calc((100vw - min(var(--max), 100vw)) / 2 + var(--pad) - 18px); --s: max(0px, calc(256px - var(--m))); }
  .feature-port_scope__ehEaA .jr__panel[data-step="5"] > .cphone[data-s="5"] { opacity: 1; transform: none; }
  .feature-port_scope__ehEaA .jr--h .jr__panel[data-step="2"] > .cphone[data-s="2"] { opacity: 1; transform: none; }
  .feature-port_scope__ehEaA .jr--h .jr__panel .jd { transition: transform .6s var(--ease); }
  .feature-port_scope__ehEaA .jr--h .jr__panel[data-step="2"] .jd,
.feature-port_scope__ehEaA .jr--h .jr__panel[data-step="5"] .jd { transform: translateX(calc(-1 * var(--s))) !important; }
  .feature-port_scope__ehEaA .jr .jr__panel[data-step="5"]:not(.x) > .cphone[data-s="5"] { opacity: 1; }
}
@media (max-width: 900px) { .feature-port_scope__ehEaA .jd--m[data-st="f5"] .jd__scr:not([data-v~="f5"]),
.feature-port_scope__ehEaA .jd--m[data-st="f5"] .jd__drawer:not([data-v~="f5"]),
.feature-port_scope__ehEaA .jd--m[data-st="f6"] .jd__scr:not([data-v~="f6"]),
.feature-port_scope__ehEaA .jd--m[data-st="f6"] .jd__drawer:not([data-v~="f6"]),
.feature-port_scope__ehEaA .jd--m[data-st="f7"] .jd__scr:not([data-v~="f7"]),
.feature-port_scope__ehEaA .jd--m[data-st="f7"] .jd__drawer:not([data-v~="f7"]),
.feature-port_scope__ehEaA .jd--m[data-st="f8"] .jd__scr:not([data-v~="f8"]),
.feature-port_scope__ehEaA .jd--m[data-st="f8"] .jd__drawer:not([data-v~="f8"]),
.feature-port_scope__ehEaA .jd--m[data-st="f9"] .jd__scr:not([data-v~="f9"]),
.feature-port_scope__ehEaA .jd--m[data-st="f9"] .jd__drawer:not([data-v~="f9"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf5"] .jd__scr:not([data-v~="hf5"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf5"] .jd__drawer:not([data-v~="hf5"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf6"] .jd__scr:not([data-v~="hf6"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf6"] .jd__drawer:not([data-v~="hf6"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf7"] .jd__scr:not([data-v~="hf7"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf7"] .jd__drawer:not([data-v~="hf7"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf8"] .jd__scr:not([data-v~="hf8"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf8"] .jd__drawer:not([data-v~="hf8"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf9"] .jd__scr:not([data-v~="hf9"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf9"] .jd__drawer:not([data-v~="hf9"]) { display: none; } }
/* hero job card, in the app's own style (Mark, 8 Oct 2026): the job's drawer in miniature — no more paper/handwriting */
.feature-port_scope__ehEaA .jcard--app { padding: 0; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(3,15,30,.55); overflow: hidden; }
.feature-port_scope__ehEaA .jcard--app::before { display: none; }
.feature-port_scope__ehEaA .jcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 0; }
.feature-port_scope__ehEaA .jcard--app .jcard__h { padding: 0; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); }
.feature-port_scope__ehEaA .jcard--app .jcard__sub { padding: 2px 14px 10px; }
.feature-port_scope__ehEaA .jcard--app li { padding: 9px 14px; grid-template-columns: 62px minmax(0, 1fr); }
.feature-port_scope__ehEaA .jcard__badge { display: grid; }
.feature-port_scope__ehEaA .jcard__badge i { grid-area: 1 / 1; justify-self: end; padding: 2px 9px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 11px; white-space: nowrap; opacity: 0; transition: opacity .35s; }
.feature-port_scope__ehEaA .jcard__badge .w { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .jcard__badge .r { background: #fde3e3; color: #9b2c2c; }
.feature-port_scope__ehEaA .jcard__badge .s { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .jcard[data-b="0"] [data-b~="0"],
.feature-port_scope__ehEaA .jcard[data-b="1"] [data-b~="1"],
.feature-port_scope__ehEaA .jcard[data-b="2"] [data-b~="2"],
.feature-port_scope__ehEaA .jcard[data-b="3"] [data-b~="3"] { opacity: 1; }
/* round 13 (Mark, 8 Oct 2026): hero card shows the whole job (six rows); Create Task gets "Assigned to" (team) + "Repeat" */
.feature-port_scope__ehEaA .jd[data-st="f10"] [data-v~="f10"],
.feature-port_scope__ehEaA .jd[data-st="hf10"] [data-v~="hf10"] { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="f10"] [data-v~="f10"] .ch,
.feature-port_scope__ehEaA .jd[data-st="hf10"] [data-v~="hf10"] .ch { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="f10"] .ctf__items li[data-v~="f10"],
.feature-port_scope__ehEaA .jd[data-st="hf10"] .ctf__items li[data-v~="hf10"] { transform: none; }
.feature-port_scope__ehEaA .jd[data-st="f10"] .tgl--q b,
.feature-port_scope__ehEaA .jd[data-st="hf10"] .tgl--q b,
.feature-port_scope__ehEaA .jd[data-st="f10"] .tgl--d b { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="f10"] .tgl--q::after,
.feature-port_scope__ehEaA .jd[data-st="hf10"] .tgl--q::after,
.feature-port_scope__ehEaA .jd[data-st="f10"] .tgl--d::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .ctf__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.feature-port_scope__ehEaA .ctf__box.f-rep .ph { color: #9aa7b6; }
.feature-port_scope__ehEaA .jd { height: 740px; }
.feature-port_scope__ehEaA .jd__form .ctf__body { gap: 4px; padding-top: 8px; }
.feature-port_scope__ehEaA .jd__form .ctf__head { padding: 8px 16px; }
.feature-port_scope__ehEaA .jd__form .ctf__box { min-height: 30px; }
.feature-port_scope__ehEaA .jd__form .ctf__box--ta { min-height: 44px; }
.feature-port_scope__ehEaA .jcard__badge .g { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .jcard__badge .n { background: var(--panel-light); color: var(--text-2); }
.feature-port_scope__ehEaA .jcard__badge .ok { background: #2f9e62; color: #fff; }
.feature-port_scope__ehEaA .jcard[data-b="4"] [data-b~="4"],
.feature-port_scope__ehEaA .jcard[data-b="5"] [data-b~="5"],
.feature-port_scope__ehEaA .jcard[data-b="6"] [data-b~="6"] { opacity: 1; }
.feature-port_scope__ehEaA .jcard--app li { padding: 7px 14px; }
.feature-port_scope__ehEaA .jcard--app li .ledger__t { font-size: 14px; }
.feature-port_scope__ehEaA .jcard--app li .ledger__s { font-size: 12px; }
.feature-port_scope__ehEaA .ways__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--inset); margin-top: 14px; }
.feature-port_scope__ehEaA .ways__extra li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .ways__extra i { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .ways__extra svg { width: 20px; height: 20px; }
.feature-port_scope__ehEaA .ways__extra b { font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .ways__extra p { color: var(--text-2); font-size: 14.5px; }
@media (max-width: 700px) { .feature-port_scope__ehEaA .ways__extra { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .feature-port_scope__ehEaA .jd--m[data-st="f10"] .jd__scr:not([data-v~="f10"]),
.feature-port_scope__ehEaA .jd--m[data-st="f10"] .jd__drawer:not([data-v~="f10"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf10"] .jd__scr:not([data-v~="hf10"]),
.feature-port_scope__ehEaA .jd--m[data-st="hf10"] .jd__drawer:not([data-v~="hf10"]) { display: none; } }
/* =========================================================
   ROUND 14 (Mark, 8 Oct 2026)
   ========================================================= */
/* how to pay: two clear options, card online OR Zelle */
.feature-port_scope__ehEaA .jd__how { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.feature-port_scope__ehEaA .jd__how > b { margin-right: 4px; }
.feature-port_scope__ehEaA .jd__opt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 600; }
.feature-port_scope__ehEaA .jd__opt i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .jd__opt svg { width: 14px; height: 14px; }
.feature-port_scope__ehEaA .jd__how em { font-style: normal; color: var(--text-2); font-size: 12px; }
.feature-port_scope__ehEaA .cphone__opts { display: grid; gap: 5px; }
.feature-port_scope__ehEaA .cphone__opts small { font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.feature-port_scope__ehEaA .cphone__or { justify-self: center; font-size: 10.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cphone__opt2 { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 11px; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .cphone__opt2 i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #dff1f7; color: var(--sky-deep); flex: none; }
.feature-port_scope__ehEaA .cphone__opt2 svg { width: 12px; height: 12px; }
.feature-port_scope__ehEaA .cphone--inv .cphone__page { gap: 4px; }
.feature-port_scope__ehEaA .jr__panel > .cphone--inv .cphone__scr { height: 400px; }
/* Save entry: a clear press, an "Entry saved" tag, and the new row lit */
.feature-port_scope__ehEaA .jd__savebar { display: flex; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .jd__savebar .jd__save { flex: 1; }
.feature-port_scope__ehEaA .tform__saved { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #e3f5ea; color: #1f6b43; font-family: var(--ui); font-weight: 700; font-size: 12px; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.feature-port_scope__ehEaA .tform[data-f="4"] .tform__saved,
.feature-port_scope__ehEaA .tform[data-f="8"] .tform__saved { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .tform[data-f="4"] .row1,
.feature-port_scope__ehEaA .tform[data-f="8"] .row2 { background: #eef7fb; border-radius: 6px; }
.feature-port_scope__ehEaA .jd .jd__save.is-press::after { opacity: .45; }
/* the thank-you email: pinned in the middle of the screen while the scroll plays it */
.feature-port_scope__ehEaA .tmail__grid { position: relative; align-items: center; }
.feature-port_scope__ehEaA .tm__cur { position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; pointer-events: none; transform: translate(var(--cx, 300px), var(--cy, 300px)); transition: transform .85s cubic-bezier(.45, 0, .2, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(3,15,30,.35)); }
.feature-port_scope__ehEaA .tm__cur svg { width: 22px; height: 22px; display: block; }
.feature-port_scope__ehEaA .tm__cur .curname { background: var(--sky-deep); }
.feature-port_scope__ehEaA .tmail__grid.is-cur .tm__cur { opacity: 1; }
.feature-port_scope__ehEaA .tmail__stamp { transition: opacity .4s var(--ease), transform .5s var(--ease); }
.feature-port_scope__ehEaA .tmail__grid:not(.is-stamp) .tmail__stamp { opacity: 0; transform: translateX(-50%) translateY(-18px) rotate(-6deg); }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .tmail__track { height: 210vh; }
  .feature-port_scope__ehEaA .tmail__pin { position: sticky; top: max(80px, calc(50vh - 330px)); }
}
/* twelve cards */
.feature-port_scope__ehEaA .kcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .tmail__mail { transition: transform .6s var(--ease); }
  .feature-port_scope__ehEaA .tmail__grid:not([data-open="1"]) .tmail__mail { transform: translateX(calc(50% + clamp(8px, 1vw, 14px))); }
}
/* =========================================================
   /trades (Mark, 8 Oct 2026): the record card in the app's own style (the scraps stay paper — they are the mess it
   replaces), and a smoother photo wall (kept on the compositor: 3D transforms, no repaints, steadier pace).
   ========================================================= */
.feature-port_scope__ehEaA .moat .ledger { padding: 0; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 64px -42px rgba(3,15,30,.45); overflow: hidden; }
.feature-port_scope__ehEaA .moat .ledger::before { display: none; }
.feature-port_scope__ehEaA .moat .ledger__h { padding: 14px 18px 0; font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.5vw, 26px); color: var(--navy); }
.feature-port_scope__ehEaA .moat .ledger__sub { padding: 2px 18px 12px; border-bottom: 1px solid var(--line); background: none; }
.feature-port_scope__ehEaA .moat .ledger__rows li { padding: 11px 18px; border-top: 1px solid rgba(11,55,108,.08); }
.feature-port_scope__ehEaA .moat .ledger__rows li:first-child { border-top: 0; }
.feature-port_scope__ehEaA .moat .ledger__s { margin-top: 3px; padding: 2px 9px 2px 7px; border-radius: 999px; background: #e3f5ea; color: #1f6b43; font-size: 12px; }
.feature-port_scope__ehEaA .moat .ledger__rows li[data-st="wait"] .ledger__s { background: #fdf0d8; color: #8a5a00; }
.feature-port_scope__ehEaA .moat .ledger__rows li[data-st="wait"] .ledger__s::before { background: #e0a32e; }
.feature-port_scope__ehEaA .wall__track { animation-name: feature-port_sw-wall3__5Q0hr; backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.feature-port_scope__ehEaA .wall__row .wall__track { animation-name: feature-port_sw-wall3-x__g37gY; }
.feature-port_scope__ehEaA .wall__col:nth-child(1) .wall__track { animation-duration: 64s; }
.feature-port_scope__ehEaA .wall__col:nth-child(2) .wall__track { animation-duration: 76s; }
.feature-port_scope__ehEaA .wall__col:nth-child(3) .wall__track { animation-duration: 58s; }
.feature-port_scope__ehEaA .wall .tile,
.feature-port_scope__ehEaA .wall img { backface-visibility: hidden; transform: translateZ(0); }
.feature-port_scope__ehEaA .wall__col { contain: paint; }
@keyframes feature-port_sw-wall3__5Q0hr { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - 7px), 0); } }
@keyframes feature-port_sw-wall3-x__g37gY { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 6px), 0, 0); } }
.feature-port_scope__ehEaA .wall .tile figcaption { backdrop-filter: none; background: rgba(3,15,30,.8); }
/* /trades one-record scene (Mark, 8 Oct 2026): pinned in the middle of the screen with room to watch; one ball at a time */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .moat__track { height: 250vh; }
  .feature-port_scope__ehEaA .moat__pin { position: sticky; top: max(70px, calc(50vh - 300px)); }
}
.feature-port_scope__ehEaA .token.ball { opacity: 0; transition: opacity .2s; will-change: transform; }
.feature-port_scope__ehEaA .token.ball.is-on { opacity: 1; }
.feature-port_scope__ehEaA .five li.is-now { opacity: 1; box-shadow: 0 0 0 2px var(--sky), 0 14px 26px -14px rgba(3,15,30,.5); }
/* /trades rail card (Mark, 8 Oct 2026): fills the empty rail on desktop with the industry being read — its line icon,
   its name, and what SendWork keeps straight for it, ticking in as you read. Not on phones. */
.feature-port_scope__ehEaA .railcard { margin: 26px 0 0; padding: 18px 18px 20px; border-radius: var(--r); background: linear-gradient(160deg, var(--navy) 0%, #14507a 60%, var(--sky-deep) 100%); color: #fff; box-shadow: 0 30px 60px -36px rgba(3,15,30,.6); }
.feature-port_scope__ehEaA .railcard__art { position: relative; height: clamp(110px, 16vh, 160px); border-radius: 12px; background: rgba(255,255,255,.07); }
.feature-port_scope__ehEaA .railcard__ic { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.feature-port_scope__ehEaA .railcard__ic svg { width: 46%; height: 70%; filter: drop-shadow(0 6px 14px rgba(3,15,30,.35)); }
.feature-port_scope__ehEaA .railcard__ic.on { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .railcard__name { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.5vw, 24px); line-height: 1.15; }
.feature-port_scope__ehEaA .railcard__k { margin-top: 4px; font-family: var(--ui); font-weight: 600; font-size: 12px; color: rgba(255,255,255,.7); }
.feature-port_scope__ehEaA .railcard__tags { display: grid; gap: 6px; margin-top: 10px; }
.feature-port_scope__ehEaA .railcard__tags li { display: flex; gap: 8px; align-items: baseline; font-weight: 600; font-size: 14px; line-height: 1.3; opacity: .28; transform: translateX(-4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.feature-port_scope__ehEaA .railcard__tags li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.14); color: #8fd3e6; font-size: 11px; }
.feature-port_scope__ehEaA .railcard__tags li.on { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .railcard__tags li.on::before { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .railcard.is-swap .railcard__name { animation: feature-port_sw-in__bImWx .45s var(--ease) 1; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .railcard { display: none; } }
@media (max-height: 760px) { .feature-port_scope__ehEaA .railcard__art { height: 90px; } }
/* =========================================================
   THE USUAL WAY vs SENDWORK (Mark, 8 Oct 2026). Pinned and scroll-driven: on the left a grey cursor plods through seven
   steps across five screens; on the right one form, two switches, one press — and it's done while the left is on step 3.
   .vs__grid[data-k] = 0…10 (the HTML ships 99 = finished).
   ========================================================= */
.feature-port_scope__ehEaA .vs { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--pad) 0; }
.feature-port_scope__ehEaA .vs__h { max-width: 24ch; }
.feature-port_scope__ehEaA .vs__h1 { display: block; color: #9aa9b9; }
.feature-port_scope__ehEaA .vs__h2 { display: block; margin-top: .2em; }
.feature-port_scope__ehEaA .vs__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; margin-top: clamp(28px, 3.5vw, 44px); }
.feature-port_scope__ehEaA .vs__old,
.feature-port_scope__ehEaA .vs__new { position: relative; display: flex; flex-direction: column; padding: 18px 18px 20px; border-radius: var(--r); }
.feature-port_scope__ehEaA .vs__old { background: #eef1f5; border: 1px dashed rgba(11,55,108,.22); color: var(--text-2); }
.feature-port_scope__ehEaA .vs__new { background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 64px -42px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .vs__top b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.feature-port_scope__ehEaA .vs__old .vs__top b { color: #5b6b7d; }
.feature-port_scope__ehEaA .vs__top small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .vs__chain { position: relative; display: grid; gap: 8px; margin-top: 14px; }
.feature-port_scope__ehEaA .vs__chain::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; border-left: 2px dashed rgba(11,55,108,.18); }
.feature-port_scope__ehEaA .vs__chain li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px 8px 0; border-radius: 10px; opacity: .45; transition: opacity .3s, background-color .3s; }
.feature-port_scope__ehEaA .vs__chain li i { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid rgba(11,55,108,.2); font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 13px; color: #5b6b7d; }
.feature-port_scope__ehEaA .vs__chain li span { font-weight: 600; color: #3d4b5c; }
.feature-port_scope__ehEaA .vs__chain li em { font-style: normal; padding: 2px 8px; border-radius: 6px; background: rgba(11,55,108,.07); font-family: var(--ui); font-weight: 700; font-size: 11px; color: #5b6b7d; }
.feature-port_scope__ehEaA .vs__chain li.on { opacity: 1; }
.feature-port_scope__ehEaA .vs__chain li.now { background: #fff; box-shadow: 0 8px 20px -14px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .vs__chain li.on i { background: #5b6b7d; color: #fff; border-color: #5b6b7d; }
.feature-port_scope__ehEaA .vs__count { margin-top: 12px; font-family: var(--ui); font-weight: 700; font-size: 13px; color: #5b6b7d; }
.feature-port_scope__ehEaA .vs__sum { margin-top: auto; padding-top: 14px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 30px); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .vs__sum--old { color: #7b8a9a; }
.feature-port_scope__ehEaA .vs__sum--new { color: var(--navy); }
.feature-port_scope__ehEaA .vs__form { display: grid; gap: 6px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--panel-light); }
.feature-port_scope__ehEaA .vs__f { display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid rgba(11,55,108,.12); font-size: 13.5px; color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .vs__f small { font-family: var(--ui); font-weight: 700; font-size: 10.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .vs__f--row { grid-template-columns: 1fr auto; gap: 12px; }
.feature-port_scope__ehEaA .vs__f--row > span { display: grid; gap: 1px; }
.feature-port_scope__ehEaA .vs__q { font-size: 13px; padding: 0 2px; }
.feature-port_scope__ehEaA .vs__out { display: grid; gap: 6px; margin-top: 12px; }
.feature-port_scope__ehEaA .vs__out li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #e6f4f9; color: var(--navy); font-weight: 600; font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.feature-port_scope__ehEaA .vs__out li > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2f9e62; color: #fff; font-size: 11px; flex: none; }
.feature-port_scope__ehEaA .vs__out .auto { margin-right: 0; }
.feature-port_scope__ehEaA .vs__done { margin-top: 10px; padding: 8px 12px; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
/* the two cursors: grey on the old way, navy "You" on SendWork */
.feature-port_scope__ehEaA .vs__cur { position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; pointer-events: none; transform: translate(var(--cx, 60px), var(--cy, 60px)); transition: transform .6s cubic-bezier(.45, 0, .2, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(3,15,30,.3)); }
.feature-port_scope__ehEaA .vs__cur svg { width: 22px; height: 22px; display: block; }
.feature-port_scope__ehEaA .vs__cur--old .curname { background: #7b8a9a; }
.feature-port_scope__ehEaA .vs__cur--new .curname { background: var(--navy); }
.feature-port_scope__ehEaA .vs__grid.is-old .vs__cur--old,
.feature-port_scope__ehEaA .vs__grid.is-new .vs__cur--new { opacity: 1; }
.feature-port_scope__ehEaA .vs__create { position: relative; }
.feature-port_scope__ehEaA .vs__create.is-press::after { opacity: .3; }
/* states — data-k 0…10 */
.feature-port_scope__ehEaA .vs__grid[data-k="2"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="3"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="4"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="5"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="6"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__t1 b,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__t1 b { opacity: 1; }
.feature-port_scope__ehEaA .vs__grid[data-k="2"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="3"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="4"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="5"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="6"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__t1::after,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__t1::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .vs__grid[data-k="3"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="4"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="5"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="6"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__t2 b,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__t2 b { opacity: 1; }
.feature-port_scope__ehEaA .vs__grid[data-k="3"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="4"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="5"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="6"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__t2::after,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__t2::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .vs__grid[data-k="5"] .vs__out .o1,
.feature-port_scope__ehEaA .vs__grid[data-k="6"] .vs__out .o1,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__out .o1,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__out .o1,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__out .o1,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__out .o1,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__out .o1,
.feature-port_scope__ehEaA .vs__grid[data-k="6"] .vs__out .o2,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__out .o2,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__out .o2,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__out .o2,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__out .o2,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__out .o2,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__out .o3,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__out .o3,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__out .o3,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__out .o3,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__out .o3,
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__done,
.feature-port_scope__ehEaA .vs__grid[data-k="8"] .vs__done,
.feature-port_scope__ehEaA .vs__grid[data-k="9"] .vs__done,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__done,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__done { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__sum,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__sum { opacity: 1; transform: none; }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .vs__track { height: 240vh; }
  .feature-port_scope__ehEaA .vs__pin { position: sticky; top: max(76px, calc(50vh - 330px)); }
}
@media (max-width: 900px) { .feature-port_scope__ehEaA .vs__grid { grid-template-columns: 1fr; } .feature-port_scope__ehEaA .vs__chain li em { display: none; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .vs__grid *,
.feature-port_scope__ehEaA .vs__grid { transition: none !important; } }
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__chain li { opacity: 1; }
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__chain li i { background: #5b6b7d; color: #fff; border-color: #5b6b7d; }
/* "Done." — loud, and its line stays true as the usual way keeps plodding (Mark, 8 Oct 2026) */
.feature-port_scope__ehEaA .vs__done { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 18px 36px -20px rgba(3,15,30,.6); }
.feature-port_scope__ehEaA .vs__tick { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #2f9e62; color: #fff; font-size: 22px; }
.feature-port_scope__ehEaA .vs__doneh { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; }
.feature-port_scope__ehEaA .vs__donesub { display: grid; margin-top: 4px; font-family: var(--ui); font-weight: 700; font-size: 13px; color: #b9dcea; }
.feature-port_scope__ehEaA .vs__donesub > * { grid-area: 1 / 1; transition: opacity .3s; }
.feature-port_scope__ehEaA .vs__ds2 { opacity: 0; }
.feature-port_scope__ehEaA .vs__grid.is-caught .vs__ds1,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__ds1 { opacity: 0; }
.feature-port_scope__ehEaA .vs__grid.is-caught .vs__ds2,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__ds2 { opacity: 1; }
.feature-port_scope__ehEaA .vs__grid[data-k="7"] .vs__done,
.feature-port_scope__ehEaA .vs__grid[data-k="10"] .vs__done,
.feature-port_scope__ehEaA .vs__grid[data-k="99"] .vs__done { opacity: 1; transform: none; }
/* full-width background bands (Mark, 8 Oct 2026): a soft sky tint marks a new chapter on a long page */
.feature-port_scope__ehEaA .band { position: relative; isolation: isolate; margin-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.feature-port_scope__ehEaA .band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: linear-gradient(180deg, #eaf2f7 0%, #edf4f8 50%, #eaf2f7 100%); border-top: 1px solid rgba(11,55,108,.07); border-bottom: 1px solid rgba(11,55,108,.07); }
.feature-port_scope__ehEaA .band .kcards li { background: #fff; }
.feature-port_scope__ehEaA .band + section,
.feature-port_scope__ehEaA .band + .sec { padding-top: clamp(72px, 9vw, 120px); }
/* make it read as a head-to-head (Mark, 8 Oct 2026): contender header bars + a VS badge between them */
.feature-port_scope__ehEaA .vs__old,
.feature-port_scope__ehEaA .vs__new { padding-top: 0; overflow: visible; }
.feature-port_scope__ehEaA .vs__top--old,
.feature-port_scope__ehEaA .vs__top--new { margin: 0 -18px; padding: 14px 18px 12px; border-radius: var(--r) var(--r) 0 0; }
.feature-port_scope__ehEaA .vs__top--old { background: #dfe5ec; border-bottom: 1px dashed rgba(11,55,108,.18); }
.feature-port_scope__ehEaA .vs__top--old b { font-family: var(--display); font-size: clamp(20px, 1.7vw, 26px); color: #4f5f71; }
.feature-port_scope__ehEaA .vs__top--old small { color: #6b7a8b; }
.feature-port_scope__ehEaA .vs__top--new { background: var(--navy); }
.feature-port_scope__ehEaA .vs__logo { display: block; height: clamp(28px, 2.2vw, 34px); width: auto; }
.feature-port_scope__ehEaA .vs__top--new small { color: #b9dcea; }
.feature-port_scope__ehEaA .vs__old { border-top-style: dashed; }
.feature-port_scope__ehEaA .vs__new { border: 2px solid var(--navy); }
.feature-port_scope__ehEaA .vs__vs { position: absolute; z-index: 6; left: 50%; top: 34px; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(54px, 4.6vw, 70px); height: clamp(54px, 4.6vw, 70px); border-radius: 50%; background: var(--sky); color: #fff; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .02em; border: 5px solid var(--light, #f6f8fa); box-shadow: 0 12px 26px -12px rgba(3,15,30,.6); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .vs__vs { top: auto; left: 50%; } .feature-port_scope__ehEaA .vs__grid { gap: 40px; } .feature-port_scope__ehEaA .vs__vs { position: relative; justify-self: center; transform: none; margin: -30px 0; } }
.feature-port_scope__ehEaA .vs__logo { height: clamp(36px, 2.9vw, 46px); }
.feature-port_scope__ehEaA .vs__top--old b { font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
.feature-port_scope__ehEaA .vs__top--old,
.feature-port_scope__ehEaA .vs__top--new { min-height: 84px; display: flex; flex-direction: column; justify-content: center; }
.feature-port_scope__ehEaA .vs__vs { top: 42px; width: clamp(62px, 5.2vw, 80px); height: clamp(62px, 5.2vw, 80px); font-size: clamp(20px, 1.8vw, 28px); }
.feature-port_scope__ehEaA .vs__top--new,
.feature-port_scope__ehEaA .vs__top--old { align-items: flex-start; }
/* history: entries appear as you scroll (Mark, 8 Oct 2026) */
.feature-port_scope__ehEaA.motion .hpanel.is-scrub li:not(.on) { opacity: 0; transform: translateX(-8px); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .vs__vs { left: auto; } }
/* =========================================================
   JUMP BAR (Mark, 9 Oct 2026): the page is long — a sticky bar to skim to any part; the part you're in is lit.
   Sits under the floating header on desktop, at the top on phones. Appears after the hero, leaves before the close.
   ========================================================= */
.feature-port_scope__ehEaA .jumpbar { position: fixed; z-index: 44; left: 50%; top: 78px; max-width: min(calc(100% - 20px), 1100px); transform: translate(-50%, -12px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.feature-port_scope__ehEaA .jumpbar.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
.feature-port_scope__ehEaA .jumpbar ol { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(3,15,30,.45); overflow-x: auto; scrollbar-width: none; backdrop-filter: blur(10px); }
.feature-port_scope__ehEaA .jumpbar ol::-webkit-scrollbar { display: none; }
.feature-port_scope__ehEaA .jumpbar a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.feature-port_scope__ehEaA .jumpbar a i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(11,55,108,.08); font-style: normal; font-size: 10px; color: var(--navy); }
.feature-port_scope__ehEaA .jumpbar a:hover { color: var(--navy); background: rgba(11,55,108,.06); }
.feature-port_scope__ehEaA .jumpbar a[aria-current] { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jumpbar a[aria-current] i { background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .jumpbar a:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.feature-port_scope__ehEaA .jumpbar__sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); flex: none; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .jumpbar { top: 8px; } .feature-port_scope__ehEaA .jumpbar a { padding: 6px 9px; font-size: 12px; } }
/* shorter scroll room in the pinned scenes (Mark, 9 Oct: "too long") */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .jr__steps li.jr__st { min-height: 112vh; } .feature-port_scope__ehEaA .jr__steps li.jr__st.is-long { min-height: 175vh; } .feature-port_scope__ehEaA .jr__steps li.jr__st:last-child { min-height: 112vh; }
  .feature-port_scope__ehEaA .vs__track { height: 200vh; } .feature-port_scope__ehEaA .tmail__track { height: 175vh; }
}
/* "Card online — or however payment works where you are" pinned like the other scenes (Mark, 9 Oct 2026): the Settings
   card stays put while the scroll plays it; on tall screens the copy column pins with it. */
/* Unpinned again (Mark, 9 Oct, shorter page): the section scrolls past like any other; the Settings card still plays
   from the scroll as it crosses the screen (the controller's non-sticky path). */
@media (min-width: 901px) { .feature-port_scope__ehEaA .pay { align-items: center; } }
/* =========================================================
   SIMPLER (Mark, 9 Oct 2026): "it should feel easy, not like a lot of software".
   1. The short path — three calm beats under the claim.  2. One journey, two versions (Fixed price | Hourly).
   3. Spotlight — in the drawer, only what changes in a step is at full strength.
   ========================================================= */
.feature-port_scope__ehEaA .beats { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(10px, 1.6vw, 22px); max-width: 1040px; margin: clamp(32px, 4vw, 52px) auto 0; text-align: left; }
.feature-port_scope__ehEaA .beat { display: grid; gap: 6px; }
.feature-port_scope__ehEaA .beat__art { display: grid; place-items: center; height: clamp(150px, 15vw, 190px); border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .beat__n { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 10px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; }
.feature-port_scope__ehEaA .beat__h { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.7vw, 26px); color: var(--navy); }
.feature-port_scope__ehEaA .beat__p { color: var(--text-2); font-size: 15.5px; max-width: 28ch; }
.feature-port_scope__ehEaA .beat__arrow { align-self: center; margin-top: -80px; font-family: var(--ui); font-weight: 700; font-size: 26px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .bform { display: grid; gap: 8px; width: min(78%, 240px); }
.feature-port_scope__ehEaA .bform__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .tgl.on b { opacity: 1; }
.feature-port_scope__ehEaA .tgl.on::after { transform: translateX(14px); }
.feature-port_scope__ehEaA .bform__btn { display: flex; justify-content: center; align-items: center; min-height: 36px; margin-top: 4px; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13.5px; }
.feature-port_scope__ehEaA .bphone { display: grid; gap: 8px; width: 118px; padding: 16px 12px; border-radius: 22px; border: 6px solid #0d1b2a; background: #f7f9fb; }
.feature-port_scope__ehEaA .bphone__ok { display: flex; justify-content: center; padding: 7px; border-radius: 8px; background: #2f9e62; color: #fff; font-family: var(--ui); font-weight: 700; font-size: 12.5px; }
.feature-port_scope__ehEaA .bphone__paid { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px; border-radius: 8px; background: #e3f5ea; color: #1f6b43; font-family: var(--ui); font-weight: 700; font-size: 12px; }
.feature-port_scope__ehEaA .bphone__paid b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #2f9e62; color: #fff; font-size: 10px; }
.feature-port_scope__ehEaA .bpaid { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .bpaid__tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2f9e62; font-size: 22px; }
.feature-port_scope__ehEaA .bpaid span b { display: block; font-family: var(--display); font-weight: 600; font-size: 22px; }
.feature-port_scope__ehEaA .bpaid small { color: #b9dcea; font-family: var(--ui); font-weight: 700; font-size: 13px; }
.feature-port_scope__ehEaA .beats__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: clamp(26px, 3vw, 36px); }
.feature-port_scope__ehEaA .beats__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; text-decoration: none; }
.feature-port_scope__ehEaA .beats__alt { align-self: center; color: var(--sky-deep); font-weight: 600; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .beats { grid-template-columns: 1fr; max-width: 420px; } .feature-port_scope__ehEaA .beat__arrow { margin: -6px auto; transform: rotate(90deg); } }
/* one journey, two versions */
.feature-port_scope__ehEaA .jtoggle { display: inline-flex; gap: 3px; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .jtoggle button { min-height: 38px; padding: 0 18px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--text-2); transition: background-color .2s, color .2s; }
.feature-port_scope__ehEaA .jtoggle button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .jtoggle button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.feature-port_scope__ehEaA.js:not(.job-hourly) #hourly { display: none; }
.feature-port_scope__ehEaA.js.job-hourly #price-to-paid { display: none; }
/* spotlight: in a step, only what changes stays at full strength */
.feature-port_scope__ehEaA .jd .jd__scr :is(.ctd__row, .ctd__top, .ctd__sent, .jd__toasts, .jd__how, .jd__go, .drawer__dl, .psum, .pbar, .ppanel__rec, .plist li, .jd__note, .jd__from) { transition: opacity .35s var(--ease); }
.feature-port_scope__ehEaA .jd.is-spot .jd__scr :is(.ctd__row, .ctd__top, .ctd__sent, .jd__toasts, .jd__how, .jd__go, .drawer__dl, .psum, .pbar, .ppanel__rec, .plist li, .jd__note, .jd__from):not(.spot) { opacity: .28; }
/* the usual routine as a long grey run, then the one line (Mark, 9 Oct 2026 — no "who's speaking" confusion) */
.feature-port_scope__ehEaA .vs__run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; max-width: 980px; margin-top: 14px; }
.feature-port_scope__ehEaA .vs__run li { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.2; color: #a3b1c0; }
.feature-port_scope__ehEaA .vs__run li + li::before { content: "→"; font-family: var(--ui); font-weight: 700; font-size: .7em; color: #c3ccd6; }
.feature-port_scope__ehEaA .vs__run li:last-child { color: #b8c3cf; }
.feature-port_scope__ehEaA .vs__h { max-width: 22ch; margin-top: 18px; }
@media (max-width: 600px) { .feature-port_scope__ehEaA .vs__run li { font-size: 18px; } }
/* nine steps on the usual-way side (Mark, 9 Oct): tighter rows so the pinned scene still fits a laptop screen */
@media (min-width: 901px) { .feature-port_scope__ehEaA .vs__chain { gap: 4px; } .feature-port_scope__ehEaA .vs__chain li { padding: 5px 12px 5px 0; } .feature-port_scope__ehEaA .vs__chain li i { width: 26px; height: 26px; font-size: 12px; } .feature-port_scope__ehEaA .vs__chain::before { left: 13px; } .feature-port_scope__ehEaA .vs__chain li { grid-template-columns: 26px minmax(0, 1fr) auto; } }
/* one word a step: the run sits on one line on a laptop (Round 18b) */
@media (min-width: 1000px) { .feature-port_scope__ehEaA .vs__run { flex-wrap: nowrap; gap: 4px; } .feature-port_scope__ehEaA .vs__run li { font-size: clamp(18px, 1.45vw, 22px); white-space: nowrap; } }
/* =========================================================
   THE SHORT PATH, v2 (Mark, 9 Oct: "could be slicker, certainly the middle one").
   Each card is a crop of the real UI further down: the Create Task form, the customer's phone (cropped by the card,
   with "Deposit paid" landing on it), and the invoice going to paid. Sky/navy; green only for paid.
   On reveal: the form's switches flip and Create Task is pressed; the phone rises and the chip lands; the invoice rows
   come in and the PAID stamp lands. Position and opacity only. Motion off / reduced motion: the finished cards.
   ========================================================= */
.feature-port_scope__ehEaA .beat__art { position: relative; overflow: hidden; height: clamp(190px, 17vw, 228px); }
/* 1 · Create Task */
.feature-port_scope__ehEaA .bct { display: grid; gap: 7px; width: min(84%, 252px); }
.feature-port_scope__ehEaA .bct__f { display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.feature-port_scope__ehEaA .bct__f small { font-family: var(--ui); font-weight: 700; font-size: 10px; color: var(--text-3, #6b7a8a); }
.feature-port_scope__ehEaA .bct__f span,
.feature-port_scope__ehEaA .bct__f b { font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--navy); }
.feature-port_scope__ehEaA .bct__f--row { display: flex; justify-content: space-between; align-items: center; background: #f2f7fb; border-color: transparent; }
.feature-port_scope__ehEaA .bct__f--row span { font-weight: 600; color: var(--text-2); }
.feature-port_scope__ehEaA .bct__q { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--navy); }
.feature-port_scope__ehEaA .bct__btn { display: flex; justify-content: center; align-items: center; min-height: 34px; margin-top: 2px; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 13px; }
/* 2 · the customer's phone, cropped by the card */
.feature-port_scope__ehEaA .beat__art:has(.bph) { place-items: start center; background: linear-gradient(180deg, #fff 0%, #eef5fa 100%); }
.feature-port_scope__ehEaA .bph { width: 168px; margin-top: 22px; padding: 7px; border-radius: 30px; background: #0d1b2a; box-shadow: 0 26px 40px -24px rgba(3,15,30,.55); }
.feature-port_scope__ehEaA .bph__scr { display: grid; gap: 9px; min-height: 260px; padding: 18px 12px 12px; border-radius: 24px; background: #fff; position: relative; }
.feature-port_scope__ehEaA .bph__scr::before { content: ""; position: absolute; top: 7px; left: 50%; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: #dfe6ee; }
.feature-port_scope__ehEaA .bph__co { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .bph__job,
.feature-port_scope__ehEaA .bph__tot { display: grid; gap: 1px; }
.feature-port_scope__ehEaA .bph__job small,
.feature-port_scope__ehEaA .bph__tot small { font-family: var(--ui); font-weight: 700; font-size: 9.5px; letter-spacing: .06em; color: var(--sky-deep); }
.feature-port_scope__ehEaA .bph__job b { font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--navy); }
.feature-port_scope__ehEaA .bph__tot { padding: 7px 9px; border-radius: 9px; background: #f2f7fb; }
.feature-port_scope__ehEaA .bph__tot b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); }
.feature-port_scope__ehEaA .bph__ok { display: flex; justify-content: center; align-items: center; min-height: 32px; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 12px; }
.feature-port_scope__ehEaA .bchip { position: absolute; right: clamp(10px, 8%, 30px); bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; border: 1px solid #cfe9da; box-shadow: 0 16px 30px -16px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .bchip > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2f9e62; color: #fff; font-size: 12px; }
.feature-port_scope__ehEaA .bchip span { display: grid; }
.feature-port_scope__ehEaA .bchip span b { font-family: var(--ui); font-weight: 700; font-size: 12px; color: #1f6b43; }
.feature-port_scope__ehEaA .bchip small { font-family: var(--ui); font-weight: 700; font-size: 11px; color: var(--text-2); }
/* 3 · the invoice, paid */
.feature-port_scope__ehEaA .binv { position: relative; display: grid; gap: 6px; width: min(86%, 262px); padding: 14px 14px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 34px -24px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .binv__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.feature-port_scope__ehEaA .binv__h b { font-family: var(--ui); font-weight: 800; font-size: 11px; letter-spacing: .12em; color: var(--navy); }
.feature-port_scope__ehEaA .binv__st { padding: 2px 8px; border: 2px solid #2f9e62; border-radius: 6px; font-style: normal; font-family: var(--ui); font-weight: 800; font-size: 11px; letter-spacing: .14em; color: #2f9e62; }
.feature-port_scope__ehEaA .binv__r { display: flex; justify-content: space-between; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .binv__r span:last-child { font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .binv__done { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 12.5px; }
.feature-port_scope__ehEaA .binv__done b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2f9e62; font-size: 11px; }
.feature-port_scope__ehEaA .binv__done span:last-child { margin-left: auto; color: #b9dcea; }
/* the reveal: each card plays once as it comes on screen */
.feature-port_scope__ehEaA .beat .tgl::after,
.feature-port_scope__ehEaA .beat .tgl b { transition: transform .3s var(--ease), opacity .3s; }
.feature-port_scope__ehEaA .beat .bct__q:nth-of-type(3) .tgl::after,
.feature-port_scope__ehEaA .beat .bct__q:nth-of-type(3) .tgl b { transition-delay: .5s; }
.feature-port_scope__ehEaA .beat .bct__q:nth-of-type(4) .tgl::after,
.feature-port_scope__ehEaA .beat .bct__q:nth-of-type(4) .tgl b { transition-delay: .8s; }
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .tgl.on::after { transform: none; }
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .tgl.on b { opacity: 0; }
.feature-port_scope__ehEaA .bct__btn { transition: opacity .2s 1.15s; }
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .bct__btn { opacity: .55; }
.feature-port_scope__ehEaA .bph { transition: transform .8s var(--ease) .15s; }
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .bph { transform: translateY(70px); }
.feature-port_scope__ehEaA .bchip { transition: opacity .4s var(--ease) 1s, transform .4s var(--ease) 1s; }
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .bchip { opacity: 0; transform: translateY(12px); }
.feature-port_scope__ehEaA .binv__r,
.feature-port_scope__ehEaA .binv__done,
.feature-port_scope__ehEaA .binv__st { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.feature-port_scope__ehEaA .binv__r:nth-of-type(2) { transition-delay: .35s; }
.feature-port_scope__ehEaA .binv__r:nth-of-type(3) { transition-delay: .6s; }
.feature-port_scope__ehEaA .binv__r:nth-of-type(4) { transition-delay: .85s; }
.feature-port_scope__ehEaA .binv__done { transition-delay: 1.15s; }
.feature-port_scope__ehEaA .binv__st { transition-delay: 1.4s; }
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .binv__r,
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .binv__done { opacity: 0; transform: translateY(6px); }
.feature-port_scope__ehEaA.motion .beat:not(.is-in) .binv__st { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .beat *,
.feature-port_scope__ehEaA .beat *::after { transition: none !important; } }
/* short path v2, phone fit: the whole screen down to Approve shows above the crop; the chip sits beside the total */
.feature-port_scope__ehEaA .bph { width: 190px; margin-top: 18px; }
.feature-port_scope__ehEaA .bph__scr { gap: 7px; padding: 16px 12px 12px; }
.feature-port_scope__ehEaA .bph__job b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.feature-port_scope__ehEaA .bph__tot b { font-size: 16px; }
.feature-port_scope__ehEaA .bchip { right: clamp(6px, 4%, 18px); bottom: 54px; padding: 7px 10px 7px 7px; }
.feature-port_scope__ehEaA .beat__art:has(.bph) { place-items: start center; }
.feature-port_scope__ehEaA .bph__scr { align-content: start; min-height: 250px; }
/* Quotes mobile fix (Mark, 19 Oct 2026): on phones and tablets the cards keep the full desktop height, so Approve and
   Create Task sit inside the crop with room below them; the chip keeps its place beside the total. In the hero card the
   status badge drops under the title only when the two can't share a line (its width is set by the longest status). */
@media (max-width: 900px) {
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .beat__art { height: 228px; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .bchip { bottom: 92px; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jcard__top:has(> .jcard__badge) { flex-wrap: wrap; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jcard__top:has(> .jcard__badge) > .jcard__h { flex: 1 1 0; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jcard__badge { margin-left: auto; }
}
/* =========================================================
   THE VIEWS CARD (Mark, 9 Oct): the calendar section folded into What's included as one wide card. Left: what it is
   and the current view's line. Right: an app window with a sliding tab switcher; the three views cross-fade, and each
   view's jobs come in one after another when it shows. Scroll walks the views; a tab press takes over.
   ========================================================= */
.feature-port_scope__ehEaA .kcards li.kview { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(20px, 2.4vw, 34px); background: linear-gradient(135deg, #fff 0%, #f1f7fb 100%); }
.feature-port_scope__ehEaA .kview__txt p { max-width: 40ch; }
.feature-port_scope__ehEaA .kview__cap { display: grid; margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; }
.feature-port_scope__ehEaA .kview__c { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.feature-port_scope__ehEaA .kview__c b { color: var(--navy); font-family: var(--ui); }
.feature-port_scope__ehEaA .kview[data-v="1"] .kview__c--1,
.feature-port_scope__ehEaA .kview[data-v="2"] .kview__c--2,
.feature-port_scope__ehEaA .kview[data-v="3"] .kview__c--3,
.feature-port_scope__ehEaA .kview:not([data-v]) .kview__c--1 { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .kview__win.vcard { padding: 0; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 60px -40px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .kview__bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #f7f9fb; }
.feature-port_scope__ehEaA .kview__dots { display: flex; gap: 5px; }
.feature-port_scope__ehEaA .kview__dots i { width: 9px; height: 9px; border-radius: 50%; background: #dbe2ea; }
.feature-port_scope__ehEaA .kview__tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: auto; padding: 3px; border-radius: 10px; background: rgba(11,55,108,.07); }
.feature-port_scope__ehEaA .kview__tab { position: relative; z-index: 1; padding: 6px 14px; border: 0; border-radius: 8px; background: none; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: color .3s; }
.feature-port_scope__ehEaA .kview__tab[aria-pressed="true"] { color: #fff; }
.feature-port_scope__ehEaA .kview__tab:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.feature-port_scope__ehEaA .kview__ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--navy); box-shadow: 0 6px 14px -8px rgba(3,15,30,.6); transition: transform .45s var(--ease); }
.feature-port_scope__ehEaA .kview__win[data-v="2"] .kview__ind { transform: translateX(100%); }
.feature-port_scope__ehEaA .kview__win[data-v="3"] .kview__ind { transform: translateX(200%); }
.feature-port_scope__ehEaA .kview__panes { display: grid; padding: 12px; }
.feature-port_scope__ehEaA .kview__pane { grid-area: 1 / 1; min-height: 250px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.feature-port_scope__ehEaA .kview__win[data-v="1"] .kview__pane--1,
.feature-port_scope__ehEaA .kview__win[data-v="2"] .kview__pane--2,
.feature-port_scope__ehEaA .kview__win[data-v="3"] .kview__pane--3 { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s; }
/* each view's jobs come in when it shows */
.feature-port_scope__ehEaA.motion .kview__win:not([data-v="1"]) .kview__pane--1 .vchip,
.feature-port_scope__ehEaA.motion .kview__win:not([data-v="2"]) .kview__pane--2 .kcard,
.feature-port_scope__ehEaA.motion .kview__win:not([data-v="3"]) .kview__pane--3 .vchip { opacity: 0; transform: translateY(6px); }
/* the Kanban card moves Pending → Active each time the Kanban view shows */
.feature-port_scope__ehEaA.motion .kview__win.vcard.in:not([data-v="2"]) .kcard--move,
.feature-port_scope__ehEaA.motion .kview__win.vcard.in:not([data-v="2"]) .kcard--move .kb__dep,
.feature-port_scope__ehEaA.motion .kview__win.vcard.in:not([data-v="2"]) .kcard--move .kb__act { animation: none; }
.feature-port_scope__ehEaA.motion .kview__win.vcard.in:not([data-v="2"]) .kcard--move { transform: translateX(0); }
.feature-port_scope__ehEaA.motion .kview__win.vcard.in:not([data-v="2"]) .kcard--move .kb__dep { opacity: 1; }
.feature-port_scope__ehEaA.motion .kview__win.vcard.in:not([data-v="2"]) .kcard--move .kb__act { opacity: 0; }
.feature-port_scope__ehEaA.motion .kview__win.vcard.in[data-v="2"] .kcard--move { animation: feature-port_sw-kmove__JsaUl 1s var(--ease) .9s both; }
.feature-port_scope__ehEaA.motion .kview__win.vcard.in[data-v="2"] .kcard--move .kb__dep { animation: feature-port_sw-out__DERiC .3s 1.5s both; }
.feature-port_scope__ehEaA.motion .kview__win.vcard.in[data-v="2"] .kcard--move .kb__act { animation: feature-port_sw-in__bImWx .3s 1.5s both; }
.feature-port_scope__ehEaA .kcards .kview__pane p { margin-top: 0; }
.feature-port_scope__ehEaA .kcards .kview__pane .cal__m { color: var(--navy); }
.feature-port_scope__ehEaA .kcards .kview__pane .kb__h { color: var(--text-2); }
.feature-port_scope__ehEaA .kview__note { padding: 0 12px 10px; font-size: 12px !important; color: var(--text-2); }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .kcards li.kview { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .kview__bar { gap: 8px; } .feature-port_scope__ehEaA .kview__dots { display: none; } .feature-port_scope__ehEaA .kview__tabs { margin: 0 auto; } .feature-port_scope__ehEaA .kview__tab { padding: 6px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .kview__ind,
.feature-port_scope__ehEaA .kview__pane,
.feature-port_scope__ehEaA .kview__c { transition: none !important; } }
.feature-port_scope__ehEaA .kcards .kview__pane { min-height: 0; }
/* =========================================================
   WHAT'S INCLUDED AS A BENTO (Mark, 9 Oct: "could be slicker in design and style").
   Four columns. Wide tiles (price, quote tracking, payments, PDF) put the words left and a small piece of the real UI
   right; tax, recurring and team carry a strip of UI under their words; the rest stay compact. Sky/navy, green only
   for paid. Reveal: tiles rise in; each tile's UI settles a beat later (position and opacity only).
   ========================================================= */
.feature-port_scope__ehEaA .kcards--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin-left: auto; margin-right: auto; }
.feature-port_scope__ehEaA .kcards--bento li.kt { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 1.8vw, 26px); border-radius: 18px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 44px -38px rgba(3,15,30,.45); transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .6s var(--ease); }
.feature-port_scope__ehEaA .kcards--bento li.kt:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -34px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .kcards--bento li.kt--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(14px, 2vw, 26px); }
.feature-port_scope__ehEaA .kcards--bento .kt__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #e3f3f9 0%, #cfe9f3 100%); color: var(--navy); }
.feature-port_scope__ehEaA .kcards--bento .kt__ic svg { width: 22px; height: 22px; color: var(--navy); }
.feature-port_scope__ehEaA .kcards--bento h3 { margin-top: 14px; font-size: clamp(19px, 1.35vw, 23px); }
.feature-port_scope__ehEaA .kcards--bento p { font-size: 15px; line-height: 1.5; }
.feature-port_scope__ehEaA .kcards--bento .kt__vis { min-width: 0; }
.feature-port_scope__ehEaA .kcards--bento li.kt:not(.kt--wide) .kt__vis { margin-top: auto; }
/* shared UI bits */
.feature-port_scope__ehEaA .bx { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #f3f7fa; border: 1px solid rgba(11,55,108,.06); font-family: var(--ui); }
.feature-port_scope__ehEaA .kcards--bento .bx p { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--navy); }
.feature-port_scope__ehEaA .bx small { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.feature-port_scope__ehEaA .bx__chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.feature-port_scope__ehEaA .bx__chip--on { background: var(--navy); border-color: var(--navy); color: #fff; }
/* price */
.feature-port_scope__ehEaA .bx__seg { display: grid !important; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: rgba(11,55,108,.08); }
.feature-port_scope__ehEaA .bx__seg span { padding: 6px 8px; border-radius: 8px; text-align: center; font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .bx__seg span.on { background: #fff; color: var(--navy); box-shadow: 0 4px 10px -6px rgba(3,15,30,.4); }
.feature-port_scope__ehEaA .bx__row { display: flex !important; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: #fff; font-weight: 600; }
.feature-port_scope__ehEaA .bx__row b { font-weight: 800; white-space: nowrap; }
.feature-port_scope__ehEaA .bx__row--h { opacity: .55; }
/* tax, recurring, team: a wrap of chips */
.feature-port_scope__ehEaA .bx--tax,
.feature-port_scope__ehEaA .bx--rep,
.feature-port_scope__ehEaA .bx--team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feature-port_scope__ehEaA .bx--rep small { flex-basis: 100%; margin-top: 2px; }
.feature-port_scope__ehEaA .bx__av { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -10px; border-radius: 50%; border: 2px solid #f3f7fa; background: var(--navy); color: #fff; font-weight: 800; font-size: 12px; }
.feature-port_scope__ehEaA .bx__av.b { background: var(--sky-deep); }
.feature-port_scope__ehEaA .bx__av.c { background: #5b6b7d; margin-right: 6px; }
/* quote tracking */
.feature-port_scope__ehEaA .bx__steps { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
.feature-port_scope__ehEaA .bx__steps span { padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 11.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .bx__steps .bx__ok { background: var(--navy); border-color: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .bx__steps i { font-style: normal; font-weight: 700; color: var(--sky-deep); }
/* payments */
.feature-port_scope__ehEaA .bx__pr { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: #fff; font-weight: 600; }
.feature-port_scope__ehEaA .bx__pr b { font-weight: 800; white-space: nowrap; }
.feature-port_scope__ehEaA .bx__pr--done { background: var(--navy); color: #fff !important; }
.feature-port_scope__ehEaA .bx__pr--done span { margin-right: auto; }
.feature-port_scope__ehEaA .bx__pr--done b:last-child { color: #b9dcea; }
.feature-port_scope__ehEaA .bx__tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2f9e62; color: #fff; font-size: 11px; }
/* pdf */
.feature-port_scope__ehEaA .bx--pdf { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.feature-port_scope__ehEaA .bx__doc { position: relative; display: grid; align-content: start; gap: 5px; width: 58px; height: 74px; padding: 12px 9px; border-radius: 6px; background: #fff; box-shadow: 0 10px 20px -12px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .bx__doc i { height: 4px; border-radius: 2px; background: #dfe6ee; }
.feature-port_scope__ehEaA .bx__doc i:first-child { width: 60%; background: var(--navy); }
.feature-port_scope__ehEaA .bx__doc b { position: absolute; right: -8px; bottom: 8px; padding: 2px 6px; border-radius: 5px; background: #c0392b; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }
.feature-port_scope__ehEaA .bx__file { display: grid; gap: 8px; min-width: 0; }
.feature-port_scope__ehEaA .bx__file > b { font-size: 12.5px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .bx__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-port_scope__ehEaA .bx__btns span { padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 11.5px; color: var(--navy); }
.feature-port_scope__ehEaA .bx__btns span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
/* reveal: the tile's UI settles a beat after the tile */
.feature-port_scope__ehEaA .kt__vis { transition: opacity .5s var(--ease) .25s, transform .5s var(--ease) .25s; }
.feature-port_scope__ehEaA.motion .kcards--bento li.kt:not(.is-in) .kt__vis { opacity: 0; transform: translateY(10px); }
/* the views card keeps its own look, full width */
.feature-port_scope__ehEaA .kcards--bento li.kview { grid-column: 1 / -1; border-radius: 18px; }
@media (max-width: 1100px) { .feature-port_scope__ehEaA .kcards--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-port_scope__ehEaA .kcards--bento li.kt--wide { grid-column: 1 / -1; } }
@media (max-width: 640px) { .feature-port_scope__ehEaA .kcards--bento { grid-template-columns: 1fr; } .feature-port_scope__ehEaA .kcards--bento li.kt--wide { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .kcards--bento li.kt,
.feature-port_scope__ehEaA .kt__vis { transition: none !important; } .feature-port_scope__ehEaA .kcards--bento li.kt:hover { transform: none; } }
/* bento v2: every compact tile ends on a one-line strip of UI, so each row lines up */
.feature-port_scope__ehEaA .bx--dep,
.feature-port_scope__ehEaA .bx--cust,
.feature-port_scope__ehEaA .bx--chart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feature-port_scope__ehEaA .bx--rep small { flex-basis: auto; margin-top: 0; }
.feature-port_scope__ehEaA .bx--cust .bx__av { margin-right: 0; border-color: #fff; }
.feature-port_scope__ehEaA .bx__who { display: grid; min-width: 0; }
.feature-port_scope__ehEaA .bx__who b { font-size: 12.5px; color: var(--navy); }
.feature-port_scope__ehEaA .bx__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .bx__bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.feature-port_scope__ehEaA .bx__bars i { width: 9px; border-radius: 3px 3px 1px 1px; background: #bfe0ec; transform-origin: bottom; }
.feature-port_scope__ehEaA .bx__bars i:last-child { background: var(--navy); }
.feature-port_scope__ehEaA .bx--line .bx__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the bento lines up with the section heading, not centred narrower */
.feature-port_scope__ehEaA .kcards--bento { max-width: none; margin-left: 0; margin-right: 0; }
/* photos per market: the new market's photo fades in over a moment (opacity only) */
.feature-port_scope__ehEaA img[data-mphoto].is-swap { animation: feature-port_sw-phfade__5h2VQ .6s var(--ease) both, feature-port_sw-zoom__9WFE7 34s cubic-bezier(.33, 0, .45, 1) infinite alternate; }
.feature-port_scope__ehEaA .cframe__img.is-swap { animation: feature-port_sw-phfade__5h2VQ .6s var(--ease) both; }
@keyframes feature-port_sw-phfade__5h2VQ { from { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA img[data-mphoto].is-swap { animation: none; } }
/* Round 25 (Mark, 9 Oct): the drawer spotlight dims the rest less, so the whole job still reads */
.feature-port_scope__ehEaA .jd.is-spot .jd__scr :is(.ctd__row, .ctd__top, .ctd__sent, .jd__toasts, .jd__how, .jd__go, .drawer__dl, .psum, .pbar, .ppanel__rec, .plist li, .jd__note, .jd__from):not(.spot) { opacity: .48; }
/* the thank-you email reads as an email: From / To / Subject rows */
.feature-port_scope__ehEaA .tmail__hd { display: grid; gap: 4px; margin: 0; padding: 12px 18px; font-family: var(--ui); font-size: 13px; }
.feature-port_scope__ehEaA .tmail__hd > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.feature-port_scope__ehEaA .tmail__hd dt { color: var(--text-2); font-weight: 600; }
.feature-port_scope__ehEaA .tmail__hd dd { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; color: var(--navy); }
.feature-port_scope__ehEaA .tmail__hd dd b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .tmail__hd time { margin-left: auto; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.feature-port_scope__ehEaA .tmail__hd .tmail__subj { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .tmail__hd .tmail__subj dd { font-weight: 700; font-size: 14px; }
.feature-port_scope__ehEaA .tmail__go .c { display: inline-flex; align-items: center; gap: 4px; }
.feature-port_scope__ehEaA .tmail__go .c svg { width: 14px; height: 14px; }
/* Round 26 (Mark, 9 Oct: the Fixed price | Hourly pill was easy to miss). The switch now sits in the left column,
   above step 01 and level with the top of the drawer: a "Try it both ways" card with two big choices. */
.feature-port_scope__ehEaA .jr__left { min-width: 0; }
.feature-port_scope__ehEaA .jswitch { max-width: 440px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 44px -34px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .jswitch__k { margin: 0 0 10px 4px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-deep); }
.feature-port_scope__ehEaA .jswitch__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feature-port_scope__ehEaA .jswitch button { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #f6f9fb; font: inherit; text-align: left; color: var(--navy); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.feature-port_scope__ehEaA .jswitch button:hover { border-color: var(--sky); transform: translateY(-1px); }
.feature-port_scope__ehEaA .jswitch button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.feature-port_scope__ehEaA .jswitch button i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #e3f3f9; color: var(--navy); }
.feature-port_scope__ehEaA .jswitch button i svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .jswitch button span { display: grid; gap: 2px; min-width: 0; }
.feature-port_scope__ehEaA .jswitch button b { font-family: var(--ui); font-weight: 800; font-size: 15px; }
.feature-port_scope__ehEaA .jswitch button small { font-size: 12px; line-height: 1.3; color: var(--text-2); }
.feature-port_scope__ehEaA .jswitch button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 14px 26px -16px rgba(11,55,108,.7); }
.feature-port_scope__ehEaA .jswitch button[aria-pressed="true"] i { background: rgba(255,255,255,.14); color: #fff; }
.feature-port_scope__ehEaA .jswitch button[aria-pressed="true"] small { color: #b9dcea; }
.feature-port_scope__ehEaA .jr__other { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-weight: 700; color: var(--sky-deep); text-decoration: none; }
.feature-port_scope__ehEaA .jr__other:hover { text-decoration: underline; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .jswitch { max-width: none; margin-bottom: 8px; } }
@media (max-width: 420px) { .feature-port_scope__ehEaA .jswitch button { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .jswitch button { transition: none; } .feature-port_scope__ehEaA .jswitch button:hover { transform: none; } }
/* =========================================================
   ROUND 27 (Mark, 9 Oct): three journeys behind one switch — Fixed price (quote + deposit), Hourly (quote, hours) and a
   Basic task (no price, quote or deposit). States for the basic one: bf0–bf3, bf9 (assigned), bf10 (repeat) on Create
   Task; bd1 Scheduled → bd2 Work In Progress → bd3 Completed in the drawer. HTML ships bd3.
   ========================================================= */
.feature-port_scope__ehEaA.js:not(.job-basic) #basic { display: none; }
.feature-port_scope__ehEaA.js.job-basic #price-to-paid,
.feature-port_scope__ehEaA.js.job-basic #hourly { display: none; }
.feature-port_scope__ehEaA .jd[data-st="bf0"] [data-v~="bf0"],
.feature-port_scope__ehEaA .jd[data-st="bf1"] [data-v~="bf1"],
.feature-port_scope__ehEaA .jd[data-st="bf2"] [data-v~="bf2"],
.feature-port_scope__ehEaA .jd[data-st="bf3"] [data-v~="bf3"],
.feature-port_scope__ehEaA .jd[data-st="bf9"] [data-v~="bf9"],
.feature-port_scope__ehEaA .jd[data-st="bf10"] [data-v~="bf10"],
.feature-port_scope__ehEaA .jd[data-st="bd1"] [data-v~="bd1"],
.feature-port_scope__ehEaA .jd[data-st="bd2"] [data-v~="bd2"],
.feature-port_scope__ehEaA .jd[data-st="bd3"] [data-v~="bd3"] { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="bf0"] [data-v~="bf0"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bf1"] [data-v~="bf1"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bf2"] [data-v~="bf2"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bf3"] [data-v~="bf3"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bf9"] [data-v~="bf9"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bf10"] [data-v~="bf10"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bd1"] [data-v~="bd1"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bd2"] [data-v~="bd2"] .ch,
.feature-port_scope__ehEaA .jd[data-st="bd3"] [data-v~="bd3"] .ch { opacity: 1; }
.feature-port_scope__ehEaA .jd[data-st="bf0"] .hpanel__tabs [data-on~="bf0"],
.feature-port_scope__ehEaA .jd[data-st="bf1"] .hpanel__tabs [data-on~="bf1"],
.feature-port_scope__ehEaA .jd[data-st="bf2"] .hpanel__tabs [data-on~="bf2"],
.feature-port_scope__ehEaA .jd[data-st="bf3"] .hpanel__tabs [data-on~="bf3"],
.feature-port_scope__ehEaA .jd[data-st="bf9"] .hpanel__tabs [data-on~="bf9"],
.feature-port_scope__ehEaA .jd[data-st="bf10"] .hpanel__tabs [data-on~="bf10"],
.feature-port_scope__ehEaA .jd[data-st="bd1"] .hpanel__tabs [data-on~="bd1"],
.feature-port_scope__ehEaA .jd[data-st="bd2"] .hpanel__tabs [data-on~="bd2"],
.feature-port_scope__ehEaA .jd[data-st="bd3"] .hpanel__tabs [data-on~="bd3"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(11,55,108,.14); }
.feature-port_scope__ehEaA .jd.is-upd[data-st="bf0"] .hpanel__tabs [data-on~="bf0"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bf1"] .hpanel__tabs [data-on~="bf1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bf2"] .hpanel__tabs [data-on~="bf2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bf3"] .hpanel__tabs [data-on~="bf3"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bf9"] .hpanel__tabs [data-on~="bf9"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bf10"] .hpanel__tabs [data-on~="bf10"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bd1"] .hpanel__tabs [data-on~="bd1"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bd2"] .hpanel__tabs [data-on~="bd2"]::after,
.feature-port_scope__ehEaA .jd.is-upd[data-st="bd3"] .hpanel__tabs [data-on~="bd3"]::after { content: ""; position: absolute; inset: -2px; border-radius: 9px; border: 2px solid var(--sky); animation: feature-port_sw-ping__uS4Q5 1.3s ease-out 1; pointer-events: none; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .jd--m[data-st="bf0"] .jd__scr:not([data-v~="bf0"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf0"] .jd__drawer:not([data-v~="bf0"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf1"] .jd__scr:not([data-v~="bf1"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf1"] .jd__drawer:not([data-v~="bf1"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf2"] .jd__scr:not([data-v~="bf2"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf2"] .jd__drawer:not([data-v~="bf2"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf3"] .jd__scr:not([data-v~="bf3"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf3"] .jd__drawer:not([data-v~="bf3"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf9"] .jd__scr:not([data-v~="bf9"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf9"] .jd__drawer:not([data-v~="bf9"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf10"] .jd__scr:not([data-v~="bf10"]),
.feature-port_scope__ehEaA .jd--m[data-st="bf10"] .jd__drawer:not([data-v~="bf10"]),
.feature-port_scope__ehEaA .jd--m[data-st="bd1"] .jd__scr:not([data-v~="bd1"]),
.feature-port_scope__ehEaA .jd--m[data-st="bd1"] .jd__drawer:not([data-v~="bd1"]),
.feature-port_scope__ehEaA .jd--m[data-st="bd2"] .jd__scr:not([data-v~="bd2"]),
.feature-port_scope__ehEaA .jd--m[data-st="bd2"] .jd__drawer:not([data-v~="bd2"]),
.feature-port_scope__ehEaA .jd--m[data-st="bd3"] .jd__scr:not([data-v~="bd3"]),
.feature-port_scope__ehEaA .jd--m[data-st="bd3"] .jd__drawer:not([data-v~="bd3"]) { display: none; } }
/* no customer phone in the basic journey, so the drawer never slides aside */
.feature-port_scope__ehEaA .jr--b .jr__panel .jd { transform: none !important; }
.feature-port_scope__ehEaA .jr--b .drawer__btn--4 b { margin-right: 4px; }
/* the switch: three choices in a row, a line on mixing them underneath */
.feature-port_scope__ehEaA .jswitch { max-width: 560px; }
.feature-port_scope__ehEaA .jswitch__opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-port_scope__ehEaA .jswitch button { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px; }
.feature-port_scope__ehEaA .jswitch__mix { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.feature-port_scope__ehEaA .jr__others { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; }
@media (max-width: 420px) { .feature-port_scope__ehEaA .jswitch__opts { gap: 6px; } .feature-port_scope__ehEaA .jswitch button { padding: 10px 9px; } .feature-port_scope__ehEaA .jswitch button small { font-size: 11.5px; } }
/* the basic journey has no phone: the drawer never slides aside (beats the hourly step rules) */
.feature-port_scope__ehEaA .jr.jr--b .jr__panel[data-step] .jd { transform: none !important; }
/* green stays for paid: the basic task's Completed is navy on sky */
.feature-port_scope__ehEaA .jr--b .drawer__btn--4 { background: #eef7fb !important; border-color: var(--sky) !important; color: var(--navy) !important; }
/* Round 28 (Mark, 9 Oct): the email after each journey matches that journey */
.feature-port_scope__ehEaA.js:not(.job-hourly) .tmail--h,
.feature-port_scope__ehEaA.js:not(.job-basic) .tmail--b,
.feature-port_scope__ehEaA.js.job-hourly .tmail--f,
.feature-port_scope__ehEaA.js.job-basic .tmail--f { display: none; }
.feature-port_scope__ehEaA .tmail--b .tmail__grid { grid-template-columns: minmax(0, 620px); justify-content: center; }
.feature-port_scope__ehEaA .tmail--b .tmail__mail { transform: none !important; }
.feature-port_scope__ehEaA .tmail__ok--done { background: #e3f3f9 !important; color: var(--navy) !important; }
.feature-port_scope__ehEaA .tmail__ok--done b { background: var(--navy) !important; color: #fff !important; }
/* the basic task's email says what was done (Mark, 9 Oct) */
.feature-port_scope__ehEaA .tmail__work { display: grid; gap: 3px; margin: 12px 0 4px; padding: 12px 14px; border-left: 3px solid var(--sky); border-radius: 4px 10px 10px 4px; background: #f3f8fb; }
.feature-port_scope__ehEaA .tmail__work small { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.feature-port_scope__ehEaA .tmail__work span { color: var(--navy); font-weight: 600; }
/* =========================================================
   ROUND 29 (Mark, 9 Oct): the Time Tracking tab as the app draws it — Hourly Rate card with the estimate, Simple /
   Enhanced / Professional, a live Summary (hours, cost, progress vs estimate), Date + Total Hours, quick-select hours,
   Description, Save, Recent Entries. Same states as before (data-f 0–8): the Summary moves at each save.
   ========================================================= */
.feature-port_scope__ehEaA .tform--app { display: grid; gap: 8px; font-family: var(--ui); }
.feature-port_scope__ehEaA .tform--app svg { width: 14px; height: 14px; flex: none; }
.feature-port_scope__ehEaA .tf__rate { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #f1f5f9; border: 1px solid #dbe3ea; }
.feature-port_scope__ehEaA .tf__rate small { display: block; font-weight: 700; font-size: 11.5px; color: #4b5b6c; }
.feature-port_scope__ehEaA .tf__rate p { margin: 2px 0 0; color: #334155; }
.feature-port_scope__ehEaA .tf__rate p b { font-size: 21px; font-weight: 700; color: #1e293b; }
.feature-port_scope__ehEaA .tf__rate p span { font-size: 12.5px; color: #64748b; }
.feature-port_scope__ehEaA .tf__est { text-align: right; }
.feature-port_scope__ehEaA .tf__est small { font-weight: 500; }
.feature-port_scope__ehEaA .tf__est b { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 800; color: #1e293b; }
.feature-port_scope__ehEaA .tf__modes { display: flex; gap: 6px; }
.feature-port_scope__ehEaA .tf__modes > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; border: 1px solid #dbe3ea; background: #fff; font-weight: 700; font-size: 12px; color: #334155; }
.feature-port_scope__ehEaA .tf__modes > span.on { background: #5ec3d1; border-color: #5ec3d1; color: #0f2a3a; }
.feature-port_scope__ehEaA .tf__sum { padding: 10px 14px; border-radius: 10px; background: #f1f5f9; border: 1px solid #dbe3ea; }
.feature-port_scope__ehEaA .tf__sumh { display: flex; align-items: center; gap: 7px; margin: 0; color: #1e293b; }
.feature-port_scope__ehEaA .tf__sumh b { font-size: 13px; font-weight: 800; }
.feature-port_scope__ehEaA .tf__sumg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.feature-port_scope__ehEaA .tf__sumg small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; }
.feature-port_scope__ehEaA .tf__sumg svg { width: 12px; height: 12px; }
.feature-port_scope__ehEaA .tf__sumg > div > b { display: grid; margin-top: 2px; font-size: 17px; font-weight: 800; color: #1e293b; }
.feature-port_scope__ehEaA .tf__sumg .tf__cost { color: #3aaebf; }
.feature-port_scope__ehEaA .tf__x3 { display: inline-grid; }
.feature-port_scope__ehEaA .tf__x3 > * { grid-area: 1 / 1; transition: opacity .35s var(--ease); }
.feature-port_scope__ehEaA .tf__prog { display: flex; justify-content: space-between; margin: 8px 0 4px; font-size: 11px; color: #4b5b6c; }
.feature-port_scope__ehEaA .tf__prog b { font-weight: 800; color: #1e293b; justify-items: end; }
.feature-port_scope__ehEaA .tf__bar { height: 7px; border-radius: 7px; background: #cbd5e1; overflow: hidden; }
.feature-port_scope__ehEaA .tf__bar i { display: block; height: 100%; border-radius: 7px; background: #3aaebf; transform: translateX(-100%); transition: transform .6s var(--ease); }
.feature-port_scope__ehEaA .tf__pc { display: grid; margin-top: 4px; font-size: 11px; color: #64748b; }
.feature-port_scope__ehEaA .jd__time .tform--app .tform__fields { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; }
.feature-port_scope__ehEaA .tform--app .tform__k { font-size: 12px; font-weight: 700; color: #334155; }
.feature-port_scope__ehEaA .tform--app .tform__box { min-height: 34px; margin-top: 3px; border-color: #dbe3ea; background: #f8fafc; font-size: 13px; }
.feature-port_scope__ehEaA .tf__ibox { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.feature-port_scope__ehEaA .tf__ibox > i { grid-area: 1 / 1; display: grid; color: #475569; }
.feature-port_scope__ehEaA .tf__ibox > .tf__iv { grid-area: 1 / 2; }
.feature-port_scope__ehEaA .tf__iv { display: grid; }
.feature-port_scope__ehEaA .tf__iv > * { grid-area: 1 / 1; transition: opacity .3s; }
.feature-port_scope__ehEaA .tform--app .ph { color: #94a3b8; }
.feature-port_scope__ehEaA .tform--app .tform__quick { margin-top: 0; }
.feature-port_scope__ehEaA .tform--app .tform__quick .tform__k { font-size: 11px; font-weight: 500; color: #94a3b8; }
.feature-port_scope__ehEaA .tform--app .tform__chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 4px; }
.feature-port_scope__ehEaA .tform--app .tform__chips i { min-width: 0; min-height: 28px; border-color: #dbe3ea; background: #fff; font-size: 11.5px; color: #334155; }
.feature-port_scope__ehEaA .tf__desc .tform__box { min-height: 40px; align-items: start; padding-top: 8px; }
.feature-port_scope__ehEaA .tform--app .jd__savebar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; }
.feature-port_scope__ehEaA .tform--app .jd__save { min-height: 32px !important; padding: 0 18px !important; background: #5ec3d1 !important; color: #0f2a3a !important; font-size: 13px !important; }
.feature-port_scope__ehEaA .tf__rh { margin: 0; }
.feature-port_scope__ehEaA .tf__entries { display: grid; border: 1px solid #dbe3ea; border-radius: 10px; overflow: hidden; }
.feature-port_scope__ehEaA .tf__entries > * { grid-area: 1 / 1; }
.feature-port_scope__ehEaA .tf__none { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 12px; font-size: 12.5px; color: #475569; transition: opacity .3s; }
.feature-port_scope__ehEaA .tf__none svg { width: 22px; height: 22px; color: #94a3b8; }
.feature-port_scope__ehEaA .jd__time .tform--app .tform__list { margin: 0; border-top: 0; }
.feature-port_scope__ehEaA .tform--app .tform__list li { padding: 7px 12px; font-size: 12px; }
/* states: s0 before any entry, s1 after the first save, s2 after the second; the bar fills to 67% then 100% */
.feature-port_scope__ehEaA .tform--app .s0,
.feature-port_scope__ehEaA .tform--app .s1,
.feature-port_scope__ehEaA .tform--app .s2 { opacity: 0; }
.feature-port_scope__ehEaA .tform--app[data-f="0"] .s0,
.feature-port_scope__ehEaA .tform--app[data-f="1"] .s0,
.feature-port_scope__ehEaA .tform--app[data-f="2"] .s0,
.feature-port_scope__ehEaA .tform--app[data-f="3"] .s0 { opacity: 1; }
.feature-port_scope__ehEaA .tform--app[data-f="4"] .s1,
.feature-port_scope__ehEaA .tform--app[data-f="5"] .s1,
.feature-port_scope__ehEaA .tform--app[data-f="6"] .s1,
.feature-port_scope__ehEaA .tform--app[data-f="7"] .s1 { opacity: 1; }
.feature-port_scope__ehEaA .tform--app[data-f="8"] .s2 { opacity: 1; }
.feature-port_scope__ehEaA .tform--app[data-f="4"] .tf__bar i,
.feature-port_scope__ehEaA .tform--app[data-f="5"] .tf__bar i,
.feature-port_scope__ehEaA .tform--app[data-f="6"] .tf__bar i,
.feature-port_scope__ehEaA .tform--app[data-f="7"] .tf__bar i { transform: translateX(-33.3%); }
.feature-port_scope__ehEaA .tform--app[data-f="8"] .tf__bar i { transform: none; }
.feature-port_scope__ehEaA .tform--app[data-f="4"] .tf__none,
.feature-port_scope__ehEaA .tform--app[data-f="5"] .tf__none,
.feature-port_scope__ehEaA .tform--app[data-f="6"] .tf__none,
.feature-port_scope__ehEaA .tform--app[data-f="7"] .tf__none,
.feature-port_scope__ehEaA .tform--app[data-f="8"] .tf__none { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .tf__bar i,
.feature-port_scope__ehEaA .tf__x3 > *,
.feature-port_scope__ehEaA .tf__none { transition: none; } }
/* Round 29: a tighter time form; after a save the tab slides up to Recent Entries (position only) */
.feature-port_scope__ehEaA .tform--app { gap: 6px; transform: translateY(var(--tfy, 0px)); transition: transform .6s var(--ease); }
.feature-port_scope__ehEaA .tf__rate { padding: 8px 12px; }
.feature-port_scope__ehEaA .tf__rate p b { font-size: 19px; }
.feature-port_scope__ehEaA .tf__modes > span { padding: 5px 10px; }
.feature-port_scope__ehEaA .tf__sum { padding: 8px 12px; }
.feature-port_scope__ehEaA .tf__sumg { margin-top: 4px; }
.feature-port_scope__ehEaA .tf__prog { margin: 6px 0 4px; }
.feature-port_scope__ehEaA .tf__desc .tform__box { min-height: 32px; padding-top: 7px; }
.feature-port_scope__ehEaA .tform--app .tform__chips i { min-height: 25px; }
.feature-port_scope__ehEaA .tf__none { padding: 8px; }
.feature-port_scope__ehEaA .tf__none svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .tform--app .tform__list li { padding: 6px 12px; }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .tform--app { transition: none; } }
.feature-port_scope__ehEaA .tform--app .jd__save { width: auto !important; flex: none !important; }
.feature-port_scope__ehEaA .jd__time:has(.tform--app[data-f="4"], .tform--app[data-f="5"], .tform--app[data-f="6"], .tform--app[data-f="7"], .tform--app[data-f="8"]) { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
/* phones: the time-tracking copy of the drawer grows to fit the whole form; the mode buttons shrink to fit */
@media (max-width: 900px) { .feature-port_scope__ehEaA .jd.jd--m[data-st="ht"] { height: auto; } }
.feature-port_scope__ehEaA .tf__modes > span { min-width: 0; }
@media (max-width: 480px) { .feature-port_scope__ehEaA .tf__modes > span { padding: 5px 8px; font-size: 11px; gap: 4px; } .feature-port_scope__ehEaA .tf__modes svg { display: none; } .feature-port_scope__ehEaA .tf__rate p b { font-size: 17px; } }
/* Round 30 (Mark, 9 Oct): the hourly invoice shows the time entries behind its labour line; invoices show bill-to + issued */
.feature-port_scope__ehEaA .ctd__time { display: grid; gap: 2px; margin: -2px 0 6px 12px; padding: 6px 0 6px 10px; border-left: 2px solid #cfe9f3; }
.feature-port_scope__ehEaA .ctd__time small { font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.feature-port_scope__ehEaA .ctd__time p { display: grid; grid-template-columns: 78px minmax(0, 1fr) 40px auto; gap: 8px; align-items: baseline; margin: 0; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .ctd__time p span:nth-child(2) { color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .ctd__time p span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .ctd__time p b { font-weight: 700; color: var(--navy); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .tmail__inv .ctd__time p span:nth-child(2) { white-space: normal; }
.feature-port_scope__ehEaA .ctd__meta { display: flex !important; justify-content: space-between; gap: 12px; }
.feature-port_scope__ehEaA .ctd__meta span { display: grid; gap: 1px; }
.feature-port_scope__ehEaA .ctd__meta span:last-child { text-align: right; }
.feature-port_scope__ehEaA .ctd__meta small { font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.feature-port_scope__ehEaA .ctd__meta b { font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .cphone__bd p.sub { padding-left: 10px; font-size: .86em; opacity: .8; }
@media (max-width: 480px) { .feature-port_scope__ehEaA .ctd__time p { grid-template-columns: 56px minmax(0, 1fr) 32px auto; gap: 6px; font-size: 11.5px; } .feature-port_scope__ehEaA .ctd__time p span:nth-child(2) { white-space: normal; } }
/* the work description: market words (150-litre…) stay inline; the attached invoices show it in full, never clipped */
.feature-port_scope__ehEaA .ctd__desc span span { display: inline !important; -webkit-line-clamp: none !important; overflow: visible !important; }
.feature-port_scope__ehEaA .tmail__inv .ctd__desc > span { display: block !important; -webkit-line-clamp: none !important; overflow: visible !important; }
/* phone buttons are flex: keep the spaces around an amount (Pay $668.33 by card) */
.feature-port_scope__ehEaA .cphone__btn { gap: .28em; }
/* =========================================================
   ROUND 32 (Mark, 9 Oct): Settings › Payments as the app draws it (app/(app)/dashboard/settings/payments) — a Payment
   Methods card (icon, title, Payment Country / Currency / Methods Configured), Manual Payment Information with the
   methods as cards in two columns (icon, name, Not Configured / Configured, Not set rows, Configure button), the
   "Configure <method>" dialog (fields, Cancel, Save Configuration), Online card processing. States data-g 0–3.
   ========================================================= */
.feature-port_scope__ehEaA .sset--app .sset__body { position: relative; display: grid; gap: 10px; padding: 12px; background: #f6f8fa; }
.feature-port_scope__ehEaA .sa__card { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #e3e8ee; }
.feature-port_scope__ehEaA .sa__hd,
.feature-port_scope__ehEaA .sa__online { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.feature-port_scope__ehEaA .sa__hi { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #e3f3f9; color: var(--sky-deep); }
.feature-port_scope__ehEaA .sa__hi svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .sa__hi--muted { background: #f1f4f7; color: var(--text-2); }
.feature-port_scope__ehEaA .sa__hd > span,
.feature-port_scope__ehEaA .sa__online > span { display: grid; gap: 1px; min-width: 0; }
.feature-port_scope__ehEaA .sa__hd b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .sa__hd small,
.feature-port_scope__ehEaA .sa__online small,
.feature-port_scope__ehEaA .sa__h2 small { font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .sa__facts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; margin: 10px 0 0; }
.feature-port_scope__ehEaA .sa__facts > div { min-width: 0; padding: 7px 10px; border-radius: 8px; background: #f3f6f9; }
.feature-port_scope__ehEaA .sa__facts dt { font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sa__facts dd { margin: 3px 0 0; font-weight: 600; font-size: 13px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sa__pill { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid #cfd8e2; font-family: var(--ui); font-weight: 700; font-size: 11.5px; }
.feature-port_scope__ehEaA .sa__info { margin: 8px 0 0; font-size: 11.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .sa__h2 { display: grid; gap: 2px; margin: 0 0 10px; }
.feature-port_scope__ehEaA .sa__h2 b { font-weight: 700; font-size: 15px; color: var(--navy); }
.feature-port_scope__ehEaA .sset--app .sa__grid { position: relative; display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .sset--app .sa__grid.on { display: grid; }
.feature-port_scope__ehEaA .sa__m { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid #e3e8ee; background: #fff; transition: border-color .35s, box-shadow .35s; }
.feature-port_scope__ehEaA .sa__mt { display: flex; align-items: flex-start; gap: 9px; margin: 0; min-width: 0; }
.feature-port_scope__ehEaA .sa__mi { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #f1f4f7; color: var(--navy); }
.feature-port_scope__ehEaA .sa__mi svg { width: 17px; height: 17px; }
.feature-port_scope__ehEaA .sa__mt > span { display: grid; gap: 3px; min-width: 0; }
.feature-port_scope__ehEaA .sa__mt b { font-weight: 700; font-size: 13.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sa__bd { display: grid; justify-items: start; }
.feature-port_scope__ehEaA .sa__bd > * { grid-area: 1 / 1; }
.feature-port_scope__ehEaA .sa__bd i { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.feature-port_scope__ehEaA .sa__bd .nc { background: #eef1f4; color: #7a8796; }
.feature-port_scope__ehEaA .sa__bd .ok { background: #e3f5ea; color: #1f6b43; }
.feature-port_scope__ehEaA .sa__bd .ok svg { width: 10px; height: 10px; }
.feature-port_scope__ehEaA .sa__dl { display: grid; gap: 3px; margin: 0; }
.feature-port_scope__ehEaA .sa__dl > div { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, .55fr); gap: 6px; font-size: 11.5px; }
.feature-port_scope__ehEaA .sa__dl dt { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .sa__dl dd { display: grid; margin: 0; text-align: right; color: #7a8796; }
.feature-port_scope__ehEaA .sa__dl dd > * { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .sa__dl dd b { color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .sa__btn { position: relative; display: grid; place-items: center; margin-top: auto; min-height: 30px; border-radius: 8px; border: 1px solid #d6dee6; background: #fff; font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--navy); }
.feature-port_scope__ehEaA .sa__btn > * { grid-area: 1 / 1; }
.feature-port_scope__ehEaA .sa__more { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-2); text-align: center; }
.feature-port_scope__ehEaA .sset[data-g="3"] .sa__m.is-pick { border-color: rgba(47,158,98,.45); box-shadow: 0 0 0 3px rgba(47,158,98,.08); }
/* the dialog: over the methods, as the app's modal sits over the page */
.feature-port_scope__ehEaA .sa__dlg { position: absolute; inset: -46px -6px -6px; z-index: 4; display: grid; place-items: center; padding: 8px; border-radius: 12px; background: rgba(15,32,52,.28); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.feature-port_scope__ehEaA .sa__dlgc { width: min(100%, 340px); padding: 14px; border-radius: 12px; background: #fff; border: 2px solid #e3e8ee; box-shadow: 0 24px 50px -20px rgba(3,15,30,.5); transform: translateY(14px); transition: transform .4s var(--ease); }
.feature-port_scope__ehEaA .sset[data-g="1"] .sa__dlg,
.feature-port_scope__ehEaA .sset[data-g="2"] .sa__dlg { opacity: 1; }
.feature-port_scope__ehEaA .sset[data-g="1"] .sa__dlgc,
.feature-port_scope__ehEaA .sset[data-g="2"] .sa__dlgc { transform: none; }
.feature-port_scope__ehEaA .sa__dh { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; }
.feature-port_scope__ehEaA .sa__dh b { font-weight: 700; font-size: 15px; color: var(--navy); }
.feature-port_scope__ehEaA .sa__x { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; color: var(--text-2); }
.feature-port_scope__ehEaA .sa__x svg { width: 15px; height: 15px; }
.feature-port_scope__ehEaA .sa__fl { display: grid; gap: 4px; margin-bottom: 10px; }
.feature-port_scope__ehEaA .sa__fl > span:first-child { font-weight: 600; font-size: 12.5px; color: var(--navy); }
.feature-port_scope__ehEaA .sa__fl i { font-style: normal; color: #c0392b; }
.feature-port_scope__ehEaA .sa__in { display: grid; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #cfd8e2; background: #fff; font-size: 13px; transition: border-color .3s, box-shadow .3s; }
.feature-port_scope__ehEaA .sa__in > * { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .sa__in .ph { color: #9aa7b6; }
.feature-port_scope__ehEaA .sa__in b { color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .sset[data-g="1"] .sa__in,
.feature-port_scope__ehEaA .sset[data-g="2"] .sa__in { border-color: var(--sky); box-shadow: 0 0 0 2px rgba(72,172,200,.2); }
.feature-port_scope__ehEaA .sa__dgo { display: flex; justify-content: flex-end; gap: 8px; margin: 2px 0 0; }
.feature-port_scope__ehEaA .sa__dgo span { display: grid; place-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; }
.feature-port_scope__ehEaA .sa__b2 { border: 1px solid #d6dee6; color: var(--navy); }
.feature-port_scope__ehEaA .sa__b1 { position: relative; background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .sa__btn.is-press,
.feature-port_scope__ehEaA .sa__b1.is-press { box-shadow: 0 0 0 3px rgba(72,172,200,.45); }
.feature-port_scope__ehEaA .sa__inv { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 9px 12px; border-radius: 9px; background: #e3f5ea; color: #1f6b43; font-size: 13px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .sa__inv small { font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.feature-port_scope__ehEaA .sa__inv b { font-weight: 600; overflow-wrap: anywhere; }
.feature-port_scope__ehEaA .sset:not([data-g="3"]) .sa__inv { transform: translateY(6px); }
.feature-port_scope__ehEaA .sa__online b { font-weight: 700; font-size: 14px; color: var(--navy); }
/* pointer */
.feature-port_scope__ehEaA .sset .sset__ptr { z-index: 8; width: auto; height: auto; transition: transform .85s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
.feature-port_scope__ehEaA .sset .sset__ptr svg { width: 22px; height: 22px; display: block; }
.feature-port_scope__ehEaA .sset__ptr .curname { background: var(--navy); }
.feature-port_scope__ehEaA .sset .sset__ptr.is-on { opacity: 1; }
@media (max-width: 560px) { .feature-port_scope__ehEaA .sset--app .sset__body { padding: 8px; } .feature-port_scope__ehEaA .sa__facts { grid-template-columns: 1fr 1fr; } .feature-port_scope__ehEaA .sa__facts > div:first-child { grid-column: 1 / -1; } .feature-port_scope__ehEaA .sa__dlg { inset: -46px -4px -4px; } }
@media (max-width: 400px) { .feature-port_scope__ehEaA .sset--app .sa__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .sa__dlg,
.feature-port_scope__ehEaA .sa__dlgc,
.feature-port_scope__ehEaA .sa__m,
.feature-port_scope__ehEaA .sa__inv { transition: none; } }
/* phones: keep the app's two columns, just tighter */
@media (max-width: 400px) { .feature-port_scope__ehEaA .sset--app .sa__grid { grid-template-columns: 1fr 1fr; gap: 6px; } .feature-port_scope__ehEaA .sa__m { padding: 8px; gap: 6px; } .feature-port_scope__ehEaA .sa__mt { gap: 6px; } .feature-port_scope__ehEaA .sa__mi { width: 26px; height: 26px; } .feature-port_scope__ehEaA .sa__mi svg { width: 14px; height: 14px; } .feature-port_scope__ehEaA .sa__mt b { font-size: 12.5px; } .feature-port_scope__ehEaA .sa__dl > div { grid-template-columns: 1fr; gap: 0; } .feature-port_scope__ehEaA .sa__dl dd { text-align: left; } .feature-port_scope__ehEaA .sa__btn { font-size: 11.5px; min-height: 28px; } }
/* =========================================================
   ROUND 34 (Mark, 9 Oct): between 901px and ~1840px the drawer used to slide up to 230px left to make room for the
   customer's phone, over the step text. Now it only moves into the column gap (--cap); the phone overlaps the drawer's
   right edge while the customer acts, then steps aside (.ph-done) so the drawer's update shows. Wide screens unchanged.
   ========================================================= */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .jr__panel { --cap: min(var(--s, 0px), calc(clamp(28px, 4vw, 64px) - 12px)); }
  .feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel[data-step="2"] .jd,
.feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel[data-step="3"] .jd,
.feature-port_scope__ehEaA .jr:not(.jr--h) .jr__panel[data-step="7"] .jd { transform: translateX(calc(-1 * var(--cap))) !important; }
  .feature-port_scope__ehEaA .jr--h .jr__panel[data-step="2"] .jd,
.feature-port_scope__ehEaA .jr--h .jr__panel[data-step="5"] .jd { transform: translateX(calc(-1 * var(--cap))) !important; }
  .feature-port_scope__ehEaA .jr__panel.ph-over > .cphone { z-index: 6; filter: drop-shadow(0 24px 34px rgba(3,15,30,.35)); }
  .feature-port_scope__ehEaA .jr__panel.ph-over.ph-done > .cphone { opacity: 0 !important; transform: translateX(28px) !important; } .feature-port_scope__ehEaA .jr__panel.ph-over > .cphone .cphone__cap { justify-self: center; width: -moz-max-content; width: max-content; margin: 8px auto 0; padding: 3px 10px; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -6px rgba(3,15,30,.35); }
}
/* =========================================================
   /trades, slicker (Mark, 9 Oct 2026)
   ========================================================= */
/* the four promises: icon tile, title, text; a soft lift on hover */
.feature-port_scope__ehEaA .pillars { gap: 14px; }
.feature-port_scope__ehEaA .pillars li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: clamp(20px, 1.9vw, 28px); border-radius: 18px; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 44px -38px rgba(3,15,30,.45); transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .6s var(--ease); }
.feature-port_scope__ehEaA .pillars li:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -34px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .pil__ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; background: linear-gradient(135deg, #e3f3f9 0%, #cfe9f3 100%); color: var(--navy); }
.feature-port_scope__ehEaA .pil__ic svg { width: 21px; height: 21px; }
.feature-port_scope__ehEaA .pillars b { margin-bottom: 4px; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.3vw, 22px); line-height: 1.2; letter-spacing: -.005em; text-wrap: balance; }
.feature-port_scope__ehEaA .pillars li > span:last-child { font-size: 15px; line-height: 1.55; }
/* three ways in: a pill with the keyboard, tap and voice marks */
.feature-port_scope__ehEaA .moat__how { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 14px; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 10px 20px 10px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 34px -28px rgba(3,15,30,.45); font-family: var(--ui); font-style: normal; font-weight: 600; font-size: clamp(14.5px, 1vw, 16px); color: var(--navy); text-align: left; }
.feature-port_scope__ehEaA .how__ics { display: inline-flex; gap: 6px; }
.feature-port_scope__ehEaA .how__ics i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e3f3f9; color: var(--sky-deep); }
.feature-port_scope__ehEaA .how__ics i:last-child { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .how__ics svg { width: 17px; height: 17px; }
@media (max-width: 640px) { .feature-port_scope__ehEaA .moat__how { border-radius: 18px; padding: 12px 14px; justify-content: flex-start; } }
/* the rail card: light, compact — the industry's icon in a tile, then what SendWork keeps straight, lit as you read */
.feature-port_scope__ehEaA .railcard { margin: 22px 0 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.9); color: var(--navy); border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 28px 50px -36px rgba(3,15,30,.45); backdrop-filter: blur(8px); }
.feature-port_scope__ehEaA .railcard__art { float: left; width: 46px; height: 46px; margin: 0 12px 0 0; border-radius: 13px; background: linear-gradient(135deg, var(--navy) 0%, var(--sky-deep) 100%); box-shadow: 0 10px 20px -12px rgba(11,55,108,.6); }
.feature-port_scope__ehEaA .railcard__ic svg { width: 54%; height: 54%; filter: none; }
.feature-port_scope__ehEaA .railcard__name { margin-top: 2px; font-size: 18px; line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .railcard__k { margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.feature-port_scope__ehEaA .railcard__tags { clear: both; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .railcard__tags li { gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; font-size: 13.5px; color: var(--navy); opacity: .45; transform: none; transition: opacity .35s var(--ease), background-color .35s var(--ease); }
.feature-port_scope__ehEaA .railcard__tags li::before { width: 20px; height: 20px; background: #eef2f6; color: transparent; transition: background-color .35s var(--ease), color .35s var(--ease); }
.feature-port_scope__ehEaA .railcard__tags li.on { opacity: 1; background: #f0f8fb; }
.feature-port_scope__ehEaA .railcard__tags li.on::before { background: var(--sky); color: #fff; }
/* the people inside the business: a persona mark, and the closing line as a callout */
.feature-port_scope__ehEaA .rsec .roles { gap: 14px; }
.feature-port_scope__ehEaA .rsec .roles li { position: relative; border-radius: 20px; padding: clamp(24px, 2.4vw, 34px); box-shadow: 0 1px 0 #fff inset, 0 24px 48px -40px rgba(3,15,30,.5); transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .6s var(--ease); }
.feature-port_scope__ehEaA .rsec .roles li:hover { transform: translateY(-3px); box-shadow: 0 30px 54px -36px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .roles__k { display: flex; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .roles__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #e3f3f9 0%, #cfe9f3 100%); color: var(--navy); }
.feature-port_scope__ehEaA .roles__ic svg { width: 20px; height: 20px; }
.feature-port_scope__ehEaA .rsec .roles h3 { margin-top: 18px; }
.feature-port_scope__ehEaA .roles__end { margin-top: auto !important; padding: 14px 16px !important; border-radius: 12px; background: #eef7fb; border-left: 3px solid var(--sky); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.35; }
.feature-port_scope__ehEaA .roles li > p:not(.roles__k):not(.roles__end) { margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .pillars li,
.feature-port_scope__ehEaA .rsec .roles li { transition: none; } .feature-port_scope__ehEaA .pillars li:hover,
.feature-port_scope__ehEaA .rsec .roles li:hover { transform: none; } }
/* =========================================================
   /PRICING (Mark, 9 Oct 2026). The painted-night hero with the headline and the Monthly | Yearly control; three plans rise
   out of it (the middle one raised, navy, "Most popular"); a team-size finder lights the plan that fits; the trial and the
   market's currency line underneath; FAQ in two columns. Prices follow the header's market. Motion: position + opacity.
   ========================================================= */
.feature-port_scope__ehEaA .phero--prc .phero__frame { min-height: 0; padding-bottom: clamp(150px, 16vw, 230px); }
.feature-port_scope__ehEaA .phero--prc .phero__copy { max-width: 920px; margin: 0 auto; align-items: center; text-align: center; justify-content: flex-start; padding-top: clamp(40px, 7vh, 90px); }
.feature-port_scope__ehEaA .phero--prc .crumbs { justify-content: center; }
.feature-port_scope__ehEaA .phero--prc .phero__h { font-size: clamp(40px, min(5vw, 8.4svh), 84px); }
.feature-port_scope__ehEaA .phero--prc .phero__lede { max-width: 640px; margin: 18px auto 0; }
.feature-port_scope__ehEaA .prc__ctl { margin-top: 30px; }
.feature-port_scope__ehEaA .prc__bill { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.feature-port_scope__ehEaA .prc__bill button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; font-family: var(--ui); font-weight: 700; font-size: 15px; color: #dbe3ec; transition: color .3s var(--ease); }
.feature-port_scope__ehEaA .prc__bill button[aria-pressed="true"] { color: var(--navy); }
.feature-port_scope__ehEaA .prc__bill button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.feature-port_scope__ehEaA .prc__bill em { padding: 2px 8px; border-radius: 999px; background: var(--sky); color: var(--navy); font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; }
.feature-port_scope__ehEaA .prc__knob { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -10px rgba(3,15,30,.6); transition: transform .45s var(--ease); }
.feature-port_scope__ehEaA .prc__bill[data-on="y"] .prc__knob { transform: translateX(100%); }
.feature-port_scope__ehEaA .prc__bill[data-on="y"] button[data-bill="y"] em { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .prc { position: relative; z-index: 2; max-width: var(--max); margin: calc(-1 * clamp(130px, 14vw, 200px)) auto 0; padding: 0 var(--pad); }
.feature-port_scope__ehEaA .prc__finder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 0 auto 22px; color: #e3e9f0; font-family: var(--ui); font-weight: 600; font-size: 15px; }
.feature-port_scope__ehEaA .prc__sizes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.feature-port_scope__ehEaA .prc__sizes button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 14px; transition: background-color .25s, color .25s, border-color .25s; }
.feature-port_scope__ehEaA .prc__sizes button i { display: grid; }
.feature-port_scope__ehEaA .prc__sizes svg { width: 16px; height: 16px; }
.feature-port_scope__ehEaA .prc__sizes button:hover { border-color: var(--sky); }
.feature-port_scope__ehEaA .prc__sizes button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .prc__sizes button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.feature-port_scope__ehEaA .prc__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; list-style: none; margin: 0; padding: 0; }
.feature-port_scope__ehEaA .prc__plan { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px); border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 1px 0 #fff inset, 0 40px 70px -50px rgba(3,15,30,.6); transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .6s var(--ease), border-color .3s; }
.feature-port_scope__ehEaA .prc__plan.is-pop { background: linear-gradient(170deg, #0b2a4f 0%, var(--navy) 55%, #0a3f6a 100%); border-color: transparent; color: #e6edf4; transform: translateY(-14px); box-shadow: 0 50px 80px -46px rgba(3,15,30,.85); }
.feature-port_scope__ehEaA .prc__badge { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; background: var(--sky); color: var(--navy); font-family: var(--ui); font-weight: 800; font-size: 12px; }
.feature-port_scope__ehEaA .prc__fit { position: absolute; top: -13px; left: 50%; padding: 4px 12px; border-radius: 999px; background: var(--sky); color: var(--navy); font-family: var(--ui); font-weight: 800; font-size: 12px; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.feature-port_scope__ehEaA .prc__plan.is-fit { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(72,172,200,.45), 0 40px 70px -46px rgba(3,15,30,.6); }
.feature-port_scope__ehEaA .prc__plan.is-fit .prc__fit { opacity: 1; transform: translate(-50%, 0); }
.feature-port_scope__ehEaA .prc.has-fit .prc__plan:not(.is-fit) { opacity: .62; }
.feature-port_scope__ehEaA .prc__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #e3f3f9 0%, #cfe9f3 100%); color: var(--navy); }
.feature-port_scope__ehEaA .prc__ic svg { width: 22px; height: 22px; }
.feature-port_scope__ehEaA .is-pop .prc__ic { background: rgba(255,255,255,.12); color: #fff; }
.feature-port_scope__ehEaA .prc__name { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.7vw, 27px); line-height: 1.15; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; }
.feature-port_scope__ehEaA .is-pop .prc__name { color: #fff; }
.feature-port_scope__ehEaA .prc__for { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text-2); min-height: 4.5em; }
.feature-port_scope__ehEaA .is-pop .prc__for { color: #c5d3e1; }
.feature-port_scope__ehEaA .prc__price { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.feature-port_scope__ehEaA .is-pop .prc__price { border-color: rgba(255,255,255,.14); }
.feature-port_scope__ehEaA .prc__amt,
.feature-port_scope__ehEaA .prc__sub { display: grid; }
.feature-port_scope__ehEaA .prc__amt > *,
.feature-port_scope__ehEaA .prc__sub > * { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .prc__amt b { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 3.4vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.feature-port_scope__ehEaA .is-pop .prc__amt b { color: #fff; }
.feature-port_scope__ehEaA .prc__amt small { font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--text-2); }
.feature-port_scope__ehEaA .is-pop .prc__amt small { color: #b9cad9; }
.feature-port_scope__ehEaA .prc__sub { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.feature-port_scope__ehEaA .is-pop .prc__sub { color: #b9cad9; }
.feature-port_scope__ehEaA .prc[data-period="m"] .is-y,
.feature-port_scope__ehEaA .prc[data-period="y"] .is-m { opacity: 0; transform: translateY(10px); pointer-events: none; }
.feature-port_scope__ehEaA .prc__inc { margin-top: 22px; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-deep); }
.feature-port_scope__ehEaA .is-pop .prc__inc { color: #8fd3e6; }
.feature-port_scope__ehEaA .prc__list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .prc__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .is-pop .prc__list li { color: #fff; }
.feature-port_scope__ehEaA .prc__list i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eef7fb; color: var(--sky-deep); }
.feature-port_scope__ehEaA .is-pop .prc__list i { background: rgba(255,255,255,.1); color: #8fd3e6; }
.feature-port_scope__ehEaA .prc__list svg { width: 16px; height: 16px; }
.feature-port_scope__ehEaA .prc__list .prc__xu { align-items: start; font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.feature-port_scope__ehEaA .prc__cta { margin-top: auto; justify-content: center; width: 100%; }
.feature-port_scope__ehEaA .prc__list + .prc__cta { margin-top: 28px; }
.feature-port_scope__ehEaA .btn--line { background: #fff; border: 1.5px solid var(--navy); color: var(--navy); }
.feature-port_scope__ehEaA .btn--line:hover { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .prc__plan:not(.is-pop):hover { transform: translateY(-4px); }
.feature-port_scope__ehEaA .prc__after { display: grid; justify-items: center; gap: 10px; margin-top: clamp(28px, 3vw, 40px); text-align: center; }
.feature-port_scope__ehEaA .prc__trial { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 34px -28px rgba(3,15,30,.45); color: var(--navy); text-align: left; }
.feature-port_scope__ehEaA .prc__trial > i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .prc__trial svg { width: 19px; height: 19px; }
.feature-port_scope__ehEaA .prc__trial b { font-weight: 800; }
.feature-port_scope__ehEaA .prc__cur { font-size: 14px; color: var(--text-2); }
.feature-port_scope__ehEaA .prc__cap { font-size: 12.5px; color: var(--text-2); opacity: .85; }
/* FAQ: heading left, questions right */
.feature-port_scope__ehEaA .prc-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 0; align-items: start; }
.feature-port_scope__ehEaA .prc-faq__head { position: sticky; top: 110px; }
.feature-port_scope__ehEaA .prc-faq__list { display: grid; gap: 10px; }
.feature-port_scope__ehEaA .prc-faq__list details { border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: box-shadow .3s var(--ease); }
.feature-port_scope__ehEaA .prc-faq__list details[open] { box-shadow: 0 24px 44px -38px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .prc-faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; color: var(--navy); }
.feature-port_scope__ehEaA .prc-faq__list summary::-webkit-details-marker { display: none; }
.feature-port_scope__ehEaA .prc-faq__list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef7fb; color: var(--sky-deep); font-size: 18px; font-weight: 600; transition: transform .3s var(--ease); }
.feature-port_scope__ehEaA .prc-faq__list details[open] summary::after { transform: rotate(45deg); }
.feature-port_scope__ehEaA .prc-faq__list summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 16px; }
.feature-port_scope__ehEaA .prc-faq__list details p { padding: 0 22px 20px; color: var(--text-2); line-height: 1.6; }
@media (max-width: 1000px) {
  .feature-port_scope__ehEaA .prc__plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .feature-port_scope__ehEaA .prc__plan.is-pop { transform: none; }
  .feature-port_scope__ehEaA .prc__for { min-height: 0; }
  .feature-port_scope__ehEaA .prc-faq { grid-template-columns: 1fr; }
  .feature-port_scope__ehEaA .prc-faq__head { position: static; }
}
@media (max-width: 560px) {
  .feature-port_scope__ehEaA .prc__bill button { padding: 0 14px; font-size: 14px; }
  .feature-port_scope__ehEaA .prc__trial { border-radius: 18px; }
  .feature-port_scope__ehEaA .prc__finder { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .prc__knob,
.feature-port_scope__ehEaA .prc__plan,
.feature-port_scope__ehEaA .prc__amt > *,
.feature-port_scope__ehEaA .prc__sub > *,
.feature-port_scope__ehEaA .prc__fit { transition: none; } .feature-port_scope__ehEaA .prc__plan:not(.is-pop):hover { transform: none; } }
.feature-port_scope__ehEaA .prc__proto { position: static !important; margin: 4px 0 0 !important; padding: 0 !important; background: none !important; color: var(--text-2) !important; }
.feature-port_scope__ehEaA .prc.has-fit .prc__plan:not(.is-fit) { opacity: 1; }
/* the billing knob follows the pressed button (set by js: --kx, --kw) */
.feature-port_scope__ehEaA .prc__bill { grid-template-columns: auto auto; }
.feature-port_scope__ehEaA .prc__knob { width: var(--kw, calc(50% - 5px)); transform: translateX(var(--kx, 0px)) !important; transition: transform .45s var(--ease), width .45s var(--ease); }
@media (max-width: 420px) { .feature-port_scope__ehEaA .prc__bill button { padding: 0 12px; gap: 6px; } .feature-port_scope__ehEaA .prc__bill em { font-size: 11px; padding: 2px 6px; } }
.feature-port_scope__ehEaA .prc__knob { transition: transform .45s var(--ease) !important; }
/* /pricing round 2 (Mark, 9 Oct): the market's contractor behind the hero (darkened so the plans lead), the app's plan
   lists, the trial panel, AI interaction examples and add-more-users side by side */
.feature-port_scope__ehEaA .prc__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.feature-port_scope__ehEaA .prc__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 40%; object-position: 50% 40%; }
.feature-port_scope__ehEaA .prc__bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(3,15,30,.82) 0%, rgba(3,15,30,.74) 38%, rgba(6,25,49,.9) 78%, rgba(11,36,68,.96) 100%),
  radial-gradient(70% 60% at 50% 40%, rgba(3,15,30,.2), rgba(3,15,30,.55)); }
.feature-port_scope__ehEaA .phero--prc .phero__stars { opacity: .5; }
.feature-port_scope__ehEaA .prc__badge { display: inline-flex; align-items: center; gap: 5px; }
.feature-port_scope__ehEaA .prc__badge svg { width: 14px; height: 14px; }
.feature-port_scope__ehEaA .prc__list { gap: 8px; }
.feature-port_scope__ehEaA .prc__ul { font-weight: 500 !important; font-size: 15px; color: var(--text) !important; }
.feature-port_scope__ehEaA .prc__ul i { background: none !important; width: 30px; height: 22px; color: #2f9e62 !important; }
.feature-port_scope__ehEaA .is-pop .prc__ul { color: #dfe8f1 !important; }
.feature-port_scope__ehEaA .is-pop .prc__ul i { color: #8fd3e6 !important; }
.feature-port_scope__ehEaA .prc__ul svg { width: 15px; height: 15px; }
.feature-port_scope__ehEaA .prc__xu i { color: var(--sky-deep) !important; }
.feature-port_scope__ehEaA .prc__xu { font-size: 14px !important; color: var(--text-2) !important; }
.feature-port_scope__ehEaA .prc__more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(40px, 4.5vw, 64px); }
.feature-port_scope__ehEaA .prc__trialbox { padding: clamp(24px, 2.6vw, 38px); border-radius: 22px; color: #e6edf4; background:
  radial-gradient(80% 90% at 100% 0%, rgba(72,172,200,.35), rgba(72,172,200,0) 60%), linear-gradient(160deg, #0b2a4f 0%, var(--navy) 70%); box-shadow: 0 40px 70px -50px rgba(3,15,30,.7); }
.feature-port_scope__ehEaA .prc__trialhead { display: flex; align-items: flex-start; gap: 16px; }
.feature-port_scope__ehEaA .prc__trialhead > i { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--sky); color: var(--navy); }
.feature-port_scope__ehEaA .prc__trialhead svg { width: 24px; height: 24px; }
.feature-port_scope__ehEaA .prc__k { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8fd3e6; }
.feature-port_scope__ehEaA .prc__th { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2vw, 32px); line-height: 1.15; color: #fff; text-wrap: balance; }
.feature-port_scope__ehEaA .prc__tl { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .prc__tl li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; }
.feature-port_scope__ehEaA .prc__tl i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(72,172,200,.22); color: #8fd3e6; }
.feature-port_scope__ehEaA .prc__tl svg { width: 13px; height: 13px; }
.feature-port_scope__ehEaA .prc__tl b { color: #fff; font-weight: 700; }
.feature-port_scope__ehEaA .prc__tl small { display: block; margin-top: 2px; font-size: 13.5px; color: #a9bccd; }
.feature-port_scope__ehEaA .prc__tend { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: #b9cad9; }
.feature-port_scope__ehEaA .prc__side { display: grid; gap: clamp(14px, 1.6vw, 22px); align-content: start; }
.feature-port_scope__ehEaA .prc__panel { padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 44px -38px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .prc__ph { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.feature-port_scope__ehEaA .prc__ph i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #e3f3f9 0%, #cfe9f3 100%); color: var(--navy); }
.feature-port_scope__ehEaA .prc__ph svg { width: 18px; height: 18px; }
.feature-port_scope__ehEaA .prc__ph b { font-weight: 800; font-size: 16px; }
.feature-port_scope__ehEaA .prc__pd { margin-top: 10px; font-size: 14.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .prc__pl { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .prc__pl li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; font-weight: 600; font-size: 14.5px; color: var(--navy); }
.feature-port_scope__ehEaA .prc__pl i { display: grid; color: var(--sky-deep); }
.feature-port_scope__ehEaA .prc__pl svg { width: 15px; height: 15px; }
.feature-port_scope__ehEaA .prc__addp { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2vw, 32px); line-height: 1.1; color: var(--navy); }
.feature-port_scope__ehEaA .prc__addp span { font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .feature-port_scope__ehEaA .prc__more { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.feature-port_scope__ehEaA .prc__list { margin-bottom: 28px !important; }
.feature-port_scope__ehEaA .prc__list + .prc__cta { margin-top: auto !important; }
/* /pricing hero, round 3: split like the site's other heroes — copy left, the market's contractor right */
.feature-port_scope__ehEaA .phero--prc .phero__copy { max-width: min(640px, 52%); margin: 0; align-items: flex-start; text-align: left; justify-content: center; padding-top: clamp(30px, 6vh, 80px); padding-bottom: 0; }
.feature-port_scope__ehEaA .phero--prc .crumbs { justify-content: flex-start; }
.feature-port_scope__ehEaA .phero--prc .phero__lede { margin: 18px 0 0; }
.feature-port_scope__ehEaA .phero--prc .phero__photo { width: 60%; }
.feature-port_scope__ehEaA .phero--prc .phero__photo::after { background:
  linear-gradient(180deg, rgba(3,15,30,.55) 0%, rgba(3,15,30,.1) 30%, rgba(3,15,30,.2) 55%, rgba(6,25,49,.85) 82%, rgba(11,36,68,1) 100%),
  linear-gradient(90deg, rgba(11,36,68,.4), rgba(3,15,30,0) 55%); }
.feature-port_scope__ehEaA .phero--prc .phero__frame { padding-bottom: clamp(170px, 18vw, 250px); min-height: min(78svh, 760px); }
.feature-port_scope__ehEaA .phero--prc .phero__stars { opacity: 1; }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .phero--prc .phero__copy { max-width: none; }
  .feature-port_scope__ehEaA .phero--prc .phero__photo { width: 100%; opacity: .45; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 50%, transparent 85%); mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 50%, transparent 85%); }
  .feature-port_scope__ehEaA .phero--prc .phero__frame { min-height: 0; }
}
@media (max-width: 640px) { .feature-port_scope__ehEaA .phero--prc .nav__right > .btn { display: none; } }
/* /pricing, round 6: tablets and phones get the site's stacked hero — the market's photo at full strength under the nav,
   a light evening grade, the headline tucked under it (was dimmed to .45, which read as an empty dark band) */
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .phero--prc .phero__photo { opacity: 1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 72%, transparent 100%); }
  .feature-port_scope__ehEaA .phero--prc .phero__photo::after { background: linear-gradient(180deg, rgba(3,15,30,.4) 0%, rgba(3,15,30,0) 30%, rgba(3,15,30,0) 62%, rgba(3,15,30,.45) 100%); }
  .feature-port_scope__ehEaA .phero--prc .phero__copy { padding-top: 0; margin-top: -60px; }
}
/* /pricing: the Monthly | Yearly toggle fits the smallest phones in every language */
@media (max-width: 380px) { .feature-port_scope__ehEaA .prc__bill button { padding: 0 9px; gap: 5px; font-size: 13px; } .feature-port_scope__ehEaA .prc__bill em { font-size: 10.5px; padding: 2px 5px; } }
/* /pricing on folding phones (≤300px): "Save about 20%" sits under Yearly, and long CTA labels wrap instead of pushing the page sideways */
@media (max-width: 300px) {
  .feature-port_scope__ehEaA .prc__bill button[data-bill="y"] { flex-direction: column; gap: 2px; padding: 5px 9px; line-height: 1.1; }
  .feature-port_scope__ehEaA .prc-faq ~ .access .btn,
.feature-port_scope__ehEaA .prc__plan .btn,
.feature-port_scope__ehEaA .cframe__copy .btn { white-space: normal; text-align: center; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .feature-port_scope__ehEaA .prc__trialbox,
.feature-port_scope__ehEaA .prc__panel { min-width: 0; overflow-wrap: anywhere; }
  .feature-port_scope__ehEaA .prc__plans { grid-template-columns: minmax(0, 1fr); }
  .feature-port_scope__ehEaA .prc__amt b { font-size: 34px; }
  .feature-port_scope__ehEaA .access__main,
.feature-port_scope__ehEaA .access__go { min-width: 0; max-width: 100%; }
  .feature-port_scope__ehEaA .prc-faq ~ .access .btn--lg { width: 100%; padding-left: 14px; padding-right: 14px; } .feature-port_scope__ehEaA .prc-faq ~ .access .h2,
.feature-port_scope__ehEaA .prc-faq__head .h2,
.feature-port_scope__ehEaA .cframe__h { font-size: 38px; overflow-wrap: break-word; } .feature-port_scope__ehEaA .prc__amt b { font-size: 28px; }
}
/* =====================================================================================================================
   /features/scheduling-and-recurring-work (9 Oct 2026, first draft) — prefix sk-. Scenes in js/schedule.js.
   ===================================================================================================================== */
@media (min-width: 901px) { .feature-port_scope__ehEaA .phero--sk .jcard { width: min(380px, 36%); } }
/* phones: the card keeps its "When" row here — on this page it is the point */
@media (max-width: 640px) { .feature-port_scope__ehEaA .phero--sk .jcard li:first-child { display: grid; } }
.feature-port_scope__ehEaA .sk-badge { padding: 2px 10px; border-radius: 999px; background: #dff1f7; color: var(--navy); font-family: var(--ui); font-weight: 700; font-size: 11px; white-space: nowrap; }
.feature-port_scope__ehEaA .sk-av { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-family: var(--ui); font-weight: 800; font-size: 11px; color: #fff; background: #1f7a96; }
.feature-port_scope__ehEaA .sk-av--b { background: #6b5ca5; }
.feature-port_scope__ehEaA .sk-av--c { background: #c0703f; }
/* ---------- the story: steps left, the stage (drawer → month → email) sticky on the right ---------- */
.feature-port_scope__ehEaA .sk-story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4vw, 56px); }
.feature-port_scope__ehEaA .sk-steps { margin: 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .sk-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; min-height: 62vh; padding-top: 18vh; opacity: .38; transition: opacity .5s var(--ease); }
.feature-port_scope__ehEaA .sk-steps li:first-child { padding-top: 4vh; }
.feature-port_scope__ehEaA .sk-steps li.is-on,
.feature-port_scope__ehEaA .sk-steps li.is-past { opacity: 1; }
.feature-port_scope__ehEaA .sk-steps__n { font-family: var(--ui); font-weight: 800; font-size: 14px; color: var(--sky-deep); padding-top: 6px; }
.feature-port_scope__ehEaA .sk-steps__t { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12; color: var(--navy); }
.feature-port_scope__ehEaA .sk-steps__s { display: block; margin-top: 10px; font-size: clamp(16px, 1.15vw, 19px); color: var(--text-2); max-width: 30em; }
.feature-port_scope__ehEaA .sk-stage { position: sticky; top: max(70px, calc(50vh - 340px)); height: min(680px, calc(100vh - 100px)); align-self: start; }
.feature-port_scope__ehEaA .sk-pane { position: absolute; inset: 0; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -46px rgba(3,15,30,.55); overflow: hidden;
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
/* the drawer */
.feature-port_scope__ehEaA .sk-form { padding: 18px 20px; font-family: var(--ui); }
.feature-port_scope__ehEaA .sk-form__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .sk-form__top b { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-form__x { color: var(--text-2); font-size: 20px; }
.feature-port_scope__ehEaA .sk-form__sec { margin-top: 12px; font-weight: 800; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-deep); }
.feature-port_scope__ehEaA .sk-f { position: relative; margin-top: 12px; transition: opacity .5s var(--ease); }
.feature-port_scope__ehEaA .sk-f__l { display: block; font-weight: 700; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-f__sub { margin: 7px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-f__in { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-f__in svg { width: 16px; height: 16px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .sk-f__in span { transition: opacity .4s; }
.feature-port_scope__ehEaA .sk-f__note { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: #fdf0d8; color: #8a5a00; font-weight: 700; font-size: 11.5px; transition: opacity .4s .3s, transform .4s .3s var(--ease); }
.feature-port_scope__ehEaA .sk-seg { position: relative; display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--panel-light); }
.feature-port_scope__ehEaA .sk-seg span { position: relative; z-index: 1; flex: 1; padding: 6px 4px; text-align: center; font-weight: 600; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.feature-port_scope__ehEaA .sk-seg__pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(3,15,30,.14), inset 0 0 0 1.5px var(--sky); transform: translateX(var(--x, 0)); transition: transform .55s var(--ease), opacity .4s; }
.feature-port_scope__ehEaA .sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-port_scope__ehEaA .sk-chips span,
.feature-port_scope__ehEaA .sk-ends > span { position: relative; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-chips span::after,
.feature-port_scope__ehEaA .sk-ends > span::after,
.feature-port_scope__ehEaA .sk-who span::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--sky); background: rgba(72,172,200,.1); opacity: 0; transition: opacity .45s var(--ease); }
.feature-port_scope__ehEaA .sk-ends { display: flex; gap: 6px; }
.feature-port_scope__ehEaA .sk-ends b { color: var(--navy); }
.feature-port_scope__ehEaA .sk-f__sum { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-weight: 700; font-size: 12.5px; color: var(--sky-deep); transition: opacity .45s .35s, transform .45s .35s var(--ease); }
.feature-port_scope__ehEaA .sk-f__sum svg { width: 15px; height: 15px; }
.feature-port_scope__ehEaA .sk-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.feature-port_scope__ehEaA .sk-who span { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-who em { font-style: normal; font-weight: 800; color: var(--sky-deep); opacity: 0; transition: opacity .4s; }
.feature-port_scope__ehEaA .sk-form__send { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-weight: 600; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-tog { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--sky); }
.feature-port_scope__ehEaA .sk-tog::after { content: ""; position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.feature-port_scope__ehEaA .sk-form__go { margin-top: 14px; text-align: right; }
.feature-port_scope__ehEaA .sk-btn { display: inline-block; padding: 9px 16px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 700; font-size: 13.5px; }
/* drawer states: 0 empty → 1 date and time → 2 the repeat → 3 the crew → (4, 5) saved */
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-f__in span,
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-seg__pill { opacity: 0; }
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-f__note { opacity: 0; transform: translateY(4px); }
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-f--rep,
.feature-port_scope__ehEaA .sk-stage[data-st="1"] .sk-f--rep,
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-f--who,
.feature-port_scope__ehEaA .sk-stage[data-st="1"] .sk-f--who,
.feature-port_scope__ehEaA .sk-stage[data-st="2"] .sk-f--who { opacity: .35; }
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-f__sum,
.feature-port_scope__ehEaA .sk-stage[data-st="1"] .sk-f__sum { opacity: 0; transform: translateY(4px); }
.feature-port_scope__ehEaA .sk-stage[data-st="2"] .sk-f--rep .is-on::after,
.feature-port_scope__ehEaA .sk-stage[data-st="3"] .sk-f--rep .is-on::after,
.feature-port_scope__ehEaA .sk-stage[data-st="4"] .sk-f--rep .is-on::after,
.feature-port_scope__ehEaA .sk-stage[data-st="5"] .sk-f--rep .is-on::after,
.feature-port_scope__ehEaA .sk-stage[data-st="3"] .sk-f--who .is-on::after,
.feature-port_scope__ehEaA .sk-stage[data-st="4"] .sk-f--who .is-on::after,
.feature-port_scope__ehEaA .sk-stage[data-st="5"] .sk-f--who .is-on::after { opacity: 1; }
.feature-port_scope__ehEaA .sk-stage[data-st="3"] .sk-who .is-on em,
.feature-port_scope__ehEaA .sk-stage[data-st="4"] .sk-who .is-on em,
.feature-port_scope__ehEaA .sk-stage[data-st="5"] .sk-who .is-on em { opacity: 1; }
/* the month */
.feature-port_scope__ehEaA .sk-cal { padding: 16px 16px 14px; font-family: var(--ui); }
.feature-port_scope__ehEaA .sk-cal__m { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-cal__nav { font-family: var(--ui); font-size: 16px; color: var(--text-2); letter-spacing: .3em; }
.feature-port_scope__ehEaA .sk-cal__w,
.feature-port_scope__ehEaA .sk-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.feature-port_scope__ehEaA .sk-cal__w b { padding: 0 0 6px 6px; font-weight: 700; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-cal__g { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-port_scope__ehEaA .sk-cal__c { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 74px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .sk-cal__c.is-off { background: #f7f8fa; }
.feature-port_scope__ehEaA .sk-cal__c > b { font-weight: 700; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-cal__c.is-sel > b { color: var(--sky-deep); }
.feature-port_scope__ehEaA .sk-chip { display: block; padding: 2px 5px; border-radius: 5px; background: var(--panel-light); font-style: normal; font-weight: 600; font-size: 10.5px; line-height: 1.3; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sk-chip--pool { background: #dff1f7; box-shadow: inset 3px 0 0 var(--sky); }
.feature-port_scope__ehEaA .sk-pop { transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.25s + var(--i) * .22s); }
.feature-port_scope__ehEaA .sk-popover { position: absolute; left: 30%; top: 47%; width: min(270px, 64%); padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 44px -20px rgba(3,15,30,.45); font-size: 13px; transition: opacity .5s var(--ease) 1.1s, transform .5s var(--ease) 1.1s; }
.feature-port_scope__ehEaA .sk-popover b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-popover__r { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 700; font-size: 12px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .sk-popover__r svg { width: 13px; height: 13px; }
.feature-port_scope__ehEaA .sk-popover__w { margin-top: 3px; color: var(--text-2); font-size: 12px; }
.feature-port_scope__ehEaA .sk-cal__rest { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 12.5px; color: var(--sky-deep); transition: opacity .5s 1.5s; }
.feature-port_scope__ehEaA .sk-cal__rest svg { width: 14px; height: 14px; }
/* the email */
.feature-port_scope__ehEaA .sk-mail { font-size: 14px; }
.feature-port_scope__ehEaA .sk-mail__head { padding: 14px 18px; background: #f7f8fa; border-bottom: 1px solid var(--line); font-size: 13px; }
.feature-port_scope__ehEaA .sk-mail__head p + p { margin-top: 4px; }
.feature-port_scope__ehEaA .sk-mail__head span { color: var(--text-2); }
.feature-port_scope__ehEaA .sk-mail__head b { color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .sk-mail__body { padding: 20px 22px; color: var(--text); }
.feature-port_scope__ehEaA .sk-mail__body p + p { margin-top: 10px; }
.feature-port_scope__ehEaA .sk-mail__body dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: #f7f8fa; }
.feature-port_scope__ehEaA .sk-mail__body dt { font-weight: 600; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-mail__body dd { margin: 0; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .sk-mail__body dd.sk-mail__rep { color: var(--sky-deep); }
.feature-port_scope__ehEaA .sk-mail__cap { position: absolute; left: 22px; bottom: 14px; font-size: 12px; color: var(--text-2); }
/* stage states: the drawer (0–3) → the month (4) → the email over the month (5) */
.feature-port_scope__ehEaA .sk-stage .sk-cal,
.feature-port_scope__ehEaA .sk-stage .sk-mail { opacity: 0; transform: translateY(24px); pointer-events: none; }
.feature-port_scope__ehEaA .sk-stage[data-st="4"] .sk-form,
.feature-port_scope__ehEaA .sk-stage[data-st="5"] .sk-form { opacity: 0; transform: translateX(-24px); }
.feature-port_scope__ehEaA .sk-stage[data-st="4"] .sk-cal { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .sk-stage[data-st="5"] .sk-cal { opacity: .3; transform: none; }
.feature-port_scope__ehEaA .sk-stage[data-st="5"] .sk-mail { opacity: 1; transform: none; left: 7%; right: -1px; top: 12%; bottom: -1px; box-shadow: 0 40px 80px -30px rgba(3,15,30,.6); }
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-pop,
.feature-port_scope__ehEaA .sk-stage[data-st="1"] .sk-pop,
.feature-port_scope__ehEaA .sk-stage[data-st="2"] .sk-pop,
.feature-port_scope__ehEaA .sk-stage[data-st="3"] .sk-pop { opacity: 0; transform: translateY(6px); }
.feature-port_scope__ehEaA .sk-stage:not([data-st="4"]) .sk-popover { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.feature-port_scope__ehEaA .sk-stage[data-st="0"] .sk-cal__rest,
.feature-port_scope__ehEaA .sk-stage[data-st="1"] .sk-cal__rest,
.feature-port_scope__ehEaA .sk-stage[data-st="2"] .sk-cal__rest,
.feature-port_scope__ehEaA .sk-stage[data-st="3"] .sk-cal__rest { opacity: 0; transition-delay: 0s; }
@media (max-width: 900px) {   /* phones and tablets: the steps, then the three panels finished, one after another */
  .feature-port_scope__ehEaA .sk-story__grid { grid-template-columns: minmax(0, 1fr); }
  .feature-port_scope__ehEaA .sk-steps li { min-height: 0; padding: 0 0 22px; opacity: 1; }
  .feature-port_scope__ehEaA .sk-steps li:first-child { padding-top: 0; }
  .feature-port_scope__ehEaA .sk-stage { position: static; height: auto; display: grid; gap: 16px; }
  .feature-port_scope__ehEaA .sk-stage .sk-pane { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
  .feature-port_scope__ehEaA .sk-stage[data-st] .sk-f,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-f__in span,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-f__note,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-f__sum,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-pop,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-cal__rest,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-form,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-cal,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-mail { opacity: 1; transform: none; }
  .feature-port_scope__ehEaA .sk-stage[data-st] .sk-mail { left: auto; right: auto; top: auto; bottom: auto; }
  .feature-port_scope__ehEaA .sk-stage[data-st] .is-on::after,
.feature-port_scope__ehEaA .sk-stage[data-st] .sk-who .is-on em { opacity: 1; }
  .feature-port_scope__ehEaA .sk-stage[data-st] .sk-popover { position: relative; left: auto; top: auto; width: auto; margin-top: 10px; opacity: 1; transform: none; }
  .feature-port_scope__ehEaA .sk-mail__cap { position: static; padding: 0 22px 14px; }
  .feature-port_scope__ehEaA .sk-cal__c { min-height: 46px; }
  .feature-port_scope__ehEaA .sk-story .sk-chip:not(.sk-chip--pool) { display: none; }
  .feature-port_scope__ehEaA .sk-story .sk-chip--pool { font-size: 0; height: 6px; padding: 0; }
}
/* ---------- plans change: the drag ---------- */
.feature-port_scope__ehEaA .sk-move__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.feature-port_scope__ehEaA .sk-ticks { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .sk-ticks li { display: flex; gap: 10px; font-weight: 600; color: var(--navy); }
.feature-port_scope__ehEaA .sk-ticks li::before { content: "✓"; color: var(--sky-deep); font-weight: 800; }
.feature-port_scope__ehEaA .sk-move__win { margin: 0; }
.feature-port_scope__ehEaA .sk-cal--move { position: relative; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -46px rgba(3,15,30,.55); }
.feature-port_scope__ehEaA .sk-cal--move .sk-cal__c { min-height: 66px; }
.feature-port_scope__ehEaA .sk-cal--move.is-drag .is-drop::after { content: ""; position: absolute; inset: 2px; border-radius: 6px; border: 2px dashed var(--sky); }
.feature-port_scope__ehEaA .sk-chip--move { position: relative; z-index: 3; background: #fde9c8; box-shadow: inset 3px 0 0 #d99a2b; transition: transform 1s var(--ease); }
.feature-port_scope__ehEaA .sk-cal--move.is-drag .sk-chip--move { box-shadow: inset 3px 0 0 #d99a2b, 0 10px 18px -8px rgba(3,15,30,.45); }
.feature-port_scope__ehEaA .sk-hand { position: absolute; z-index: 4; left: 0; top: 0; width: 30px; height: 30px; opacity: 0; pointer-events: none; transition: transform 1s var(--ease), opacity .3s; }
.feature-port_scope__ehEaA .sk-hand svg { width: 100%; height: 100%; }
.feature-port_scope__ehEaA .sk-cal--move.is-hand .sk-hand { opacity: 1; }
.feature-port_scope__ehEaA .sk-toast { position: absolute; z-index: 5; left: 50%; bottom: 14px; margin: 0; padding: 9px 14px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .sk-cal--move.is-toast .sk-toast { opacity: 1; transform: translate(-50%, 0); }
.feature-port_scope__ehEaA .sk-move__win figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .sk-move__grid { grid-template-columns: minmax(0, 1fr); } .feature-port_scope__ehEaA .sk-cal--move .sk-chip { font-size: 9px; padding: 1px 3px; } .feature-port_scope__ehEaA .sk-cal--move .sk-cal__c { min-height: 58px; } }
/* ---------- the team's week ---------- */
.feature-port_scope__ehEaA .sk-tl { margin: clamp(32px, 4vw, 52px) 0 0; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -46px rgba(3,15,30,.5); overflow: hidden; }
.feature-port_scope__ehEaA .sk-tl__bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.feature-port_scope__ehEaA .sk-tl__tabs { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel-light); }
.feature-port_scope__ehEaA .sk-tl__tabs button { position: relative; z-index: 1; min-height: 34px; padding: 0 14px; font-family: var(--ui); font-weight: 700; font-size: 13.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-tl__tabs button[aria-pressed="true"] { color: var(--navy); }
.feature-port_scope__ehEaA .sk-tl__knob { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--kw, 50%); border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(3,15,30,.12); transform: translateX(var(--kx, 0)); transition: transform .45s var(--ease); }
.feature-port_scope__ehEaA .sk-tl__panes { display: grid; }
.feature-port_scope__ehEaA .sk-tl__pane { grid-area: 1 / 1; min-width: 0; padding: 16px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .sk-tl[data-v="1"] .sk-tl__pane--2,
.feature-port_scope__ehEaA .sk-tl[data-v="2"] .sk-tl__pane--1 { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; }
.feature-port_scope__ehEaA .sk-tl figcaption { padding: 0 16px 14px; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-tl__g { display: grid; grid-template-columns: 120px repeat(6, minmax(0, 1fr)); font-family: var(--ui); }
.feature-port_scope__ehEaA .sk-tl__d { padding: 4px 8px 8px; font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-tl__d.is-today { color: var(--sky-deep); }
.feature-port_scope__ehEaA .sk-tl__who { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-top: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-tl__who.is-un { color: var(--text-2); font-style: italic; }
.feature-port_scope__ehEaA .sk-tl__c { padding: 6px 4px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; }
.feature-port_scope__ehEaA .sk-blk { display: block; padding: 6px 8px; border-radius: 7px; background: var(--panel-light); box-shadow: inset 3px 0 0 #9aa9bb; font-style: normal; font-weight: 600; font-size: 12px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.3s + var(--i) * .05s); }
.feature-port_scope__ehEaA .sk-blk--pool { background: #dff1f7; box-shadow: inset 3px 0 0 var(--sky); }
.feature-port_scope__ehEaA.motion .sk-tl:not(.is-in) .sk-blk { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA .sk-ts__day { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-ts__g { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 0 10px; margin-top: 10px; --hh: 34px; }
.feature-port_scope__ehEaA .sk-ts__hrs { position: relative; height: calc(var(--hh) * 9 + 30px); }
.feature-port_scope__ehEaA .sk-ts__hrs b { position: absolute; top: calc(30px + var(--h) * var(--hh) - 7px); font-family: var(--ui); font-weight: 600; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.feature-port_scope__ehEaA .sk-ts__col { min-width: 0; }
.feature-port_scope__ehEaA .sk-ts__who { display: flex; align-items: center; gap: 7px; height: 30px; font-family: var(--ui); font-weight: 700; font-size: 13.5px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-ts__track { position: relative; height: calc(var(--hh) * 9); border-radius: 10px; background: repeating-linear-gradient(180deg, #f7f8fa 0, #f7f8fa calc(var(--hh) - 1px), var(--line) calc(var(--hh) - 1px), var(--line) var(--hh)); }
.feature-port_scope__ehEaA .sk-ts__b { position: absolute; left: 4px; right: 4px; top: calc(var(--t) * var(--hh) + 2px); height: calc(var(--len) * var(--hh) - 4px); white-space: normal; }
.feature-port_scope__ehEaA .sk-ts__b.is-half { right: calc(50% + 2px); }
.feature-port_scope__ehEaA .sk-ts__b.is-h2 { left: calc(50% + 2px); right: 4px; }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .sk-tl__g { grid-template-columns: 70px repeat(6, minmax(0, 1fr)); }
  .feature-port_scope__ehEaA .sk-tl__who { font-size: 12px; gap: 5px; padding: 8px 4px; } .feature-port_scope__ehEaA .sk-tl__who .sk-av { display: none; }
  .feature-port_scope__ehEaA .sk-tl__g .sk-blk { font-size: 0; height: 18px; padding: 0; }
  .feature-port_scope__ehEaA .sk-ts__b { font-size: 10.5px; padding: 3px 5px; }
  .feature-port_scope__ehEaA .sk-tl__d { font-size: 10px; padding: 4px 2px 8px; }
  .feature-port_scope__ehEaA .sk-tl__pane { padding: 12px 10px; }
  .feature-port_scope__ehEaA .sk-ts__g { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 0 6px; }
  .feature-port_scope__ehEaA .sk-ts__hrs b { font-size: 9.5px; }
}
/* ---------- regular work: the bento ---------- */
.feature-port_scope__ehEaA .sk-rcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .sk-rc { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .sk-rc__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #e3f3f9, #cfe9f3); color: var(--navy); }
.feature-port_scope__ehEaA .sk-rc__ic svg { width: 21px; height: 21px; }
.feature-port_scope__ehEaA .sk-rc h3 { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--navy); }
.feature-port_scope__ehEaA .sk-rc > p { margin-top: 8px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-rc__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.feature-port_scope__ehEaA .sk-rc__chips span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--ui); font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .sk-rc__chips span.on { border-color: var(--sky); background: rgba(72,172,200,.1); color: var(--navy); }
.feature-port_scope__ehEaA .sk-rc__chips--col { flex-direction: column; align-items: flex-start; }
.feature-port_scope__ehEaA .sk-rc__visits { display: grid; gap: 8px; margin-top: auto; padding-top: 16px; font-family: var(--ui); }
.feature-port_scope__ehEaA .sk-rc__visits p { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: #f7f8fa; font-size: 13.5px; }
.feature-port_scope__ehEaA .sk-rc__visits b { color: var(--navy); }
.feature-port_scope__ehEaA .sk-rc__visits span { padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 11.5px; }
.feature-port_scope__ehEaA .sk-rc__visits .ok { background: #2f9e62; color: #fff; }
.feature-port_scope__ehEaA .sk-rc__visits .s { background: #dff1f7; color: var(--navy); }
.feature-port_scope__ehEaA .sk-rc__quote { margin-top: auto; padding: 14px 16px; border-radius: 12px; background: #f7f8fa; border-left: 3px solid var(--sky); font-family: var(--ui); }
.feature-port_scope__ehEaA .sk-rc__quote b { display: block; color: var(--navy); font-size: 14px; }
.feature-port_scope__ehEaA .sk-rc__quote small { display: block; margin-top: 4px; color: var(--text-2); font-size: 13px; }
.feature-port_scope__ehEaA .sk-rc__team { display: flex; margin-top: auto; padding-top: 16px; }
.feature-port_scope__ehEaA .sk-rc__team .sk-av { width: 34px; height: 34px; font-size: 14px; border: 2px solid #fff; }
.feature-port_scope__ehEaA .sk-rc__team .sk-av + .sk-av { margin-left: -8px; }
@media (max-width: 1000px) { .feature-port_scope__ehEaA .sk-rcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feature-port_scope__ehEaA .sk-rcs { grid-template-columns: minmax(0, 1fr); } }
/* ---------- the customer's emails ---------- */
.feature-port_scope__ehEaA .sk-ems { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .sk-ems::before { content: ""; position: absolute; left: 6%; right: 6%; top: 44px; height: 2px; background: linear-gradient(90deg, var(--sky), rgba(72,172,200,.2)); }
.feature-port_scope__ehEaA .sk-em { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .sk-em i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--sky); color: var(--sky-deep); }
.feature-port_scope__ehEaA .sk-em i svg { width: 22px; height: 22px; }
.feature-port_scope__ehEaA .sk-em b { margin-top: 8px; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.feature-port_scope__ehEaA .sk-em span { color: var(--text-2); font-size: 15px; }
.feature-port_scope__ehEaA .sk-em.is-first { background: linear-gradient(160deg, #0b2a4f, var(--navy)); border-color: transparent; }
.feature-port_scope__ehEaA .sk-em.is-first b { color: #fff; }
.feature-port_scope__ehEaA .sk-em.is-first span { color: #c6d6e4; }
.feature-port_scope__ehEaA .sk-em.is-first i { background: var(--sky); border-color: var(--sky); color: var(--navy); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .sk-ems { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-port_scope__ehEaA .sk-ems::before { display: none; } }
@media (max-width: 480px) { .feature-port_scope__ehEaA .sk-ems { grid-template-columns: minmax(0, 1fr); } }
/* ---------- close: no photo — the Tuesdays light up ---------- */
.feature-port_scope__ehEaA .sk-close { padding: clamp(80px, 10vw, 140px) var(--inset) 0; }
.feature-port_scope__ehEaA .sk-close__panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(36px, 6vw, 96px) clamp(24px, 6vw, 96px); border-radius: var(--r); color: #fff;
  background: radial-gradient(60% 80% at 100% 20%, rgba(31,122,150,.35) 0%, rgba(3,15,30,0) 70%), linear-gradient(160deg, #030f1e 0%, #061933 55%, #0b2a52 100%); }
.feature-port_scope__ehEaA .sk-close__cal { padding: 22px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .sk-close__k { display: flex; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 700; font-size: 14px; color: #8fd3e6; }
.feature-port_scope__ehEaA .sk-close__k svg { width: 17px; height: 17px; }
.feature-port_scope__ehEaA .sk-close__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.feature-port_scope__ehEaA .sk-close__g i { position: relative; aspect-ratio: 1; border-radius: 8px; background: rgba(255,255,255,.06); }
.feature-port_scope__ehEaA .sk-close__g i.is-tue::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sky); box-shadow: 0 0 18px rgba(72,172,200,.5); transition: opacity .5s var(--ease); transition-delay: calc(.4s + var(--i) * .3s); }
.feature-port_scope__ehEaA.motion .sk-close__cal:not(.is-in) i.is-tue::after { opacity: 0; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .sk-close__panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 300px) { .feature-port_scope__ehEaA .sk-close .cframe__h,
.feature-port_scope__ehEaA .sk-story .h2,
.feature-port_scope__ehEaA .sk-move .h2,
.feature-port_scope__ehEaA .sk-team .h2,
.feature-port_scope__ehEaA .sk-rec .h2,
.feature-port_scope__ehEaA .sk-emails .h2 { font-size: 34px; overflow-wrap: break-word; } }
/* motion off: nothing moves; states still switch */
.feature-port_scope__ehEaA.still .sk-pane,
.feature-port_scope__ehEaA.still .sk-pop,
.feature-port_scope__ehEaA.still .sk-popover,
.feature-port_scope__ehEaA.still .sk-f,
.feature-port_scope__ehEaA.still .sk-f__note,
.feature-port_scope__ehEaA.still .sk-f__sum,
.feature-port_scope__ehEaA.still .sk-seg__pill,
.feature-port_scope__ehEaA.still .sk-chip--move,
.feature-port_scope__ehEaA.still .sk-hand,
.feature-port_scope__ehEaA.still .sk-toast,
.feature-port_scope__ehEaA.still .sk-tl__pane,
.feature-port_scope__ehEaA.still .sk-tl__knob,
.feature-port_scope__ehEaA.still .sk-blk,
.feature-port_scope__ehEaA.still .sk-steps li,
.feature-port_scope__ehEaA.still .sk-close__g i::after,
.feature-port_scope__ehEaA.still .sk-cal__rest { transition: none !important; }
/* scheduling page, round 1 fixes: the month fills its panel; the email sizes to its content; the Timeline rows fill the pane; a compact closing month */
.feature-port_scope__ehEaA .sk-stage .sk-cal { display: flex; flex-direction: column; }
.feature-port_scope__ehEaA .sk-stage .sk-cal__g { flex: 1; grid-auto-rows: minmax(0, 1fr); }
.feature-port_scope__ehEaA .sk-stage[data-st="5"] .sk-mail { bottom: auto; }
.feature-port_scope__ehEaA .sk-stage .sk-mail__cap { position: static; padding: 0 22px 16px; }
.feature-port_scope__ehEaA .sk-tl__pane--1 { display: flex; }
.feature-port_scope__ehEaA .sk-tl__pane--1 .sk-tl__g { flex: 1; grid-template-rows: auto repeat(4, minmax(0, 1fr)); }
.feature-port_scope__ehEaA .sk-tl__pane--1 .sk-tl__c { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.feature-port_scope__ehEaA .sk-tl__pane--1 .sk-blk { flex: none; min-width: 0; }
/* a day with more jobs than fit: "+1 more", as the app's timeline shows it */
.feature-port_scope__ehEaA .sk-tl__more { display: block; padding: 0 4px; font-style: normal; font-weight: 600; font-size: 11px; color: var(--text-2); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.3s + var(--i) * .05s); }
.feature-port_scope__ehEaA.motion .sk-tl:not(.is-in) .sk-tl__more { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA.still .sk-tl__more { transition: none !important; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .sk-tl__pane--1 .sk-tl__c { gap: 3px; } .feature-port_scope__ehEaA .sk-tl__more { font-size: 9px; padding: 0 2px; } }
.feature-port_scope__ehEaA .sk-close__cal { justify-self: end; width: min(100%, 380px); }
.feature-port_scope__ehEaA .sk-close__g { gap: 5px; }
.feature-port_scope__ehEaA .sk-close__g i { border-radius: 6px; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .sk-close__cal { justify-self: start; } .feature-port_scope__ehEaA .sk-stage[data-st] .sk-seg__pill { opacity: 1; } }
/* timeline blocks: the title, then its time under it (as the app's block shows it) */
.feature-port_scope__ehEaA .sk-tl .sk-blk span { display: block; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .sk-tl .sk-blk small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .sk-tl__g .sk-blk small { display: none; } }
/* desktop: Team Schedule's hours are taller, so it fills the same frame as the Timeline (now two-line blocks) */
@media (min-width: 901px) { .feature-port_scope__ehEaA .sk-ts__g { --hh: 56px; } }
/* scheduling hero (Mark, 9 Oct): the copy starts at the same height in every language instead of sitting on the
   bottom edge — a shorter English lede had left a taller gap above it than es / pt / fr */
@media (min-width: 901px) { .feature-port_scope__ehEaA .phero--sk .phero__copy { justify-content: flex-start; padding-top: calc(clamp(24px, 4vh, 56px) + 22px); } }
/* links between the feature pages (quotes ↔ scheduling): one topic, one page */
.feature-port_scope__ehEaA .xlink { display: inline-block; width: -moz-fit-content; width: fit-content; justify-self: start; align-self: flex-start; margin-top: 10px; font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--sky-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.feature-port_scope__ehEaA .xlink:hover { border-bottom-width: 2px; }
.feature-port_scope__ehEaA .xlink:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
/* Timeline | Team Schedule: the hand clicks from one tab to the other when the window comes on screen (Mark, 9 Oct) */
.feature-port_scope__ehEaA .sk-tl { position: relative; }
.feature-port_scope__ehEaA .sk-tl.is-hand .sk-tl__hand { opacity: 1; }
.feature-port_scope__ehEaA.still .sk-tl__hand { display: none; }
/* one hero height (Mark, 9 Oct): over 900px wide, /trades, /pricing and the feature pages share the same hero height in
   every language and market — js/pages.js shrinks a longer language's headline to fit rather than growing the frame */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .phero[class] .phero__frame { height: min(calc(100svh - var(--inset) - 34px), 940px); min-height: 0; }
}
/* =========================================================
   PHOTO-LESS SPLIT HERO (customer records, FAQ — 9 Oct 2026)
   The painted ink, a faint ruled record sheet on the right, the card in front of it. Same frame height as the others.
   ========================================================= */
.feature-port_scope__ehEaA .phero--np .phero__frame { background: radial-gradient(55% 70% at 80% 46%, rgba(31,122,150,.30) 0%, rgba(3,15,30,0) 70%), linear-gradient(160deg, #030f1e 0%, #061933 55%, #0b2a52 100%); }
.feature-port_scope__ehEaA .phero--np .phero__frame::after { content: ""; position: absolute; z-index: 0; top: 13%; bottom: 11%; right: 3%; width: min(48%, 680px); border-radius: 24px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px), linear-gradient(90deg, rgba(196,231,242,.07) 0 1px, transparent 1px);
  background-position: 0 0, 86px 0; background-size: auto, 100% 100%; background-repeat: repeat, no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.feature-port_scope__ehEaA .phero--np .jcard { z-index: 2; }
.feature-port_scope__ehEaA .cr-card__who { display: inline-flex; align-items: center; gap: 9px; }
.feature-port_scope__ehEaA .cr-card__who .sk-av { width: 30px; height: 30px; font-size: 12px; }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .phero--np .jcard { top: 50%; bottom: auto; right: clamp(28px, 6vw, 120px); width: min(430px, 36%); transform: translateY(-44%); }
}
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .phero--np .phero__frame::after { display: none; }
  .feature-port_scope__ehEaA .phero--np .phero__copy { padding-top: clamp(20px, 5vw, 40px); }
  .feature-port_scope__ehEaA .phero--np .jcard { order: 3; margin: 0 16px 22px; max-width: 460px; }
}
@media (max-width: 640px) { .feature-port_scope__ehEaA .phero--np .jcard { margin: 0 12px 18px; } .feature-port_scope__ehEaA .phero--np .jcard li:first-child { display: grid; } }
/* scheduling + records hero cards (20 Oct 2026): the label column is as wide as the card's longest label (fr "Interventions",
   "Récurrence"), shared by every row so the values still line up; never narrower than before (62px + the row's 14px inset),
   so English is unchanged. A status that no longer fits its line wraps rather than running under the card's edge. */
.feature-port_scope__ehEaA .sk-jcard .ledger__rows, .feature-port_scope__ehEaA .cr-card .ledger__rows { display: grid; grid-template-columns: minmax(76px, max-content) minmax(0, 1fr); -moz-column-gap: 10px; column-gap: 10px; }
.feature-port_scope__ehEaA .sk-jcard .ledger__rows li, .feature-port_scope__ehEaA .cr-card .ledger__rows li { grid-column: 1 / -1; grid-template-columns: subgrid; }
.feature-port_scope__ehEaA .sk-jcard .ledger__s, .feature-port_scope__ehEaA .cr-card .ledger__s { white-space: normal; }
/* =========================================================
   FAQ (calm reading: the groups, then gentle reveals only)
   ========================================================= */
.feature-port_scope__ehEaA .fq-jump { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 4vw, 56px) var(--pad) 0; }
.feature-port_scope__ehEaA .fq-jump ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .fq-jump a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-family: var(--ui); font-weight: 700; font-size: 14.5px; color: var(--navy); text-decoration: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.feature-port_scope__ehEaA .fq-jump a:hover { border-color: #a9d6e5; box-shadow: 0 10px 24px -18px rgba(3,15,30,.5); }
.feature-port_scope__ehEaA .fq-jump a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.feature-port_scope__ehEaA .fq-jump svg { width: 18px; height: 18px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .fq-group { scroll-margin-top: 90px; }
.feature-port_scope__ehEaA .fq-group + .fq-group { padding-top: clamp(64px, 8vw, 110px); }
.feature-port_scope__ehEaA .fq-label { display: inline-flex; align-items: center; gap: 8px; }
.feature-port_scope__ehEaA .fq-label i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eef7fb; color: var(--sky-deep); font-style: normal; }
.feature-port_scope__ehEaA .fq-label svg { width: 17px; height: 17px; }
.feature-port_scope__ehEaA .prc-faq__list details .fq-more { padding: 0 22px 20px; margin-top: -8px; }
.feature-port_scope__ehEaA .prc-faq__list details .fq-more .xlink { margin-top: 0; font-size: 14px; }
.feature-port_scope__ehEaA .fq-ask { justify-self: end; width: min(100%, 400px); padding: 26px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .fq-ask__k { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #8fd3e6; }
.feature-port_scope__ehEaA .fq-ask__h { margin-top: 10px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: #fff; }
.feature-port_scope__ehEaA .fq-ask__mail { display: inline-block; margin-top: 16px; font-family: var(--ui); font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); color: #fff; text-decoration: none; border-bottom: 2px solid var(--sky); }
.feature-port_scope__ehEaA .fq-ask__mail:hover { color: #c8eef8; }
.feature-port_scope__ehEaA .fq-ask__mail:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 2px; }
.feature-port_scope__ehEaA .fq-ask__s { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.72); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .fq-ask { justify-self: start; } }
/* =========================================================
   CUSTOMER RECORDS & HISTORY
   ========================================================= */
.feature-port_scope__ehEaA .cr-more { margin-top: 18px; }
.feature-port_scope__ehEaA .cr-cap { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--sky-deep); vertical-align: -2px; animation: feature-port_crBlink__OoYEb 1s steps(1) infinite; }
@keyframes feature-port_crBlink__OoYEb { 50% { opacity: 0; } }
.feature-port_scope__ehEaA.still .cr-caret { animation: none; }
/* the window the story plays in (sticky beside the steps) */
.feature-port_scope__ehEaA .cr-stage { position: sticky; top: max(70px, calc(50vh - 330px)); align-self: start; margin: 0; }
.feature-port_scope__ehEaA .cr-win { position: relative; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -46px rgba(3,15,30,.55); overflow: hidden; font-family: var(--ui); }
.feature-port_scope__ehEaA .cr-win__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.feature-port_scope__ehEaA .cr-win__bar b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 12px; border-radius: 9px; background: var(--navy); color: #fff; font-weight: 700; font-size: 12.5px; }
.feature-port_scope__ehEaA .cr-btn svg { width: 14px; height: 14px; }
.feature-port_scope__ehEaA .cr-panes { position: relative; height: min(560px, calc(100vh - 170px)); }
.feature-port_scope__ehEaA .cr-pane { position: absolute; inset: 0; padding: 16px 18px; overflow: hidden; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.feature-port_scope__ehEaA .cr-stage[data-st="1"] .cr-pane--list,
.feature-port_scope__ehEaA .cr-stage[data-st="2"] .cr-pane--rec,
.feature-port_scope__ehEaA .cr-stage[data-st="3"] .cr-pane--act,
.feature-port_scope__ehEaA .cr-stage[data-st="4"] .cr-pane--job { opacity: 1; transform: none; }
/* 1 · the list */
.feature-port_scope__ehEaA .cr-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; border: 1.5px solid #9ccfe0; background: #fff; font-size: 14px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-search svg { width: 17px; height: 17px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-counts b { color: var(--navy); }
.feature-port_scope__ehEaA .cr-filters { display: inline-flex; gap: 6px; margin-left: auto; }
.feature-port_scope__ehEaA .cr-filters i { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-style: normal; font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .cr-head,
.feature-port_scope__ehEaA .cr-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, .9fr) 64px; gap: 10px; align-items: center; }
.feature-port_scope__ehEaA .cr-head { margin-top: 14px; padding: 0 10px 8px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-rows { margin: 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .cr-row { padding: 10px; border-bottom: 1px solid #eef1f5; font-size: 13px; color: var(--text-2); transition: opacity .5s var(--ease); }
.feature-port_scope__ehEaA .cr-row.is-hit { background: linear-gradient(90deg, #eef7fb, rgba(238,247,251,0)); }
.feature-port_scope__ehEaA .cr-stage[data-st="1"] .cr-row:not(.is-hit) { opacity: .32; }
.feature-port_scope__ehEaA .cr-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.feature-port_scope__ehEaA .cr-who b { display: block; font-size: 13.5px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-who small { display: block; font-size: 11.5px; }
.feature-port_scope__ehEaA .cr-em,
.feature-port_scope__ehEaA .cr-ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .cr-st { justify-self: start; padding: 2px 8px; border-radius: 999px; background: #eef3f8; font-weight: 700; font-size: 11px; color: var(--navy); }
/* 2 · the record */
.feature-port_scope__ehEaA .cr-rec__top { display: flex; align-items: center; gap: 10px; }
.feature-port_scope__ehEaA .cr-rec__top .sk-av { width: 38px; height: 38px; font-size: 14px; }
.feature-port_scope__ehEaA .cr-rec__top b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-rec__top small { font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-rec__top .sk-badge { margin-left: auto; }
.feature-port_scope__ehEaA .cr-tabs { display: flex; gap: 4px; margin-top: 12px; padding: 3px; border-radius: 10px; background: var(--panel-light); }
.feature-port_scope__ehEaA .cr-tabs span { flex: 1; padding: 7px 10px; border-radius: 8px; text-align: center; font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-tabs .on { background: #fff; color: var(--navy); box-shadow: 0 2px 6px rgba(3,15,30,.12); }
.feature-port_scope__ehEaA .cr-rec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.feature-port_scope__ehEaA .cr-box { padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .cr-box--wide { grid-column: 1 / -1; }
.feature-port_scope__ehEaA .cr-box__h { margin-bottom: 8px; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-kv { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 8px; padding: 5px 0; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-kv svg { width: 15px; height: 15px; grid-row: span 2; color: var(--sky-deep); margin-top: 2px; }
.feature-port_scope__ehEaA .cr-kv b { font-size: 13px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-port_scope__ehEaA .cr-loc { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid #eef1f5; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.2s + var(--i) * .12s); }
.feature-port_scope__ehEaA .cr-loc:first-of-type { border-top: 0; }
.feature-port_scope__ehEaA .cr-loc svg { width: 15px; height: 15px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-loc small { display: block; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-loc b { display: block; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-loc i { font-style: normal; font-weight: 700; font-size: 11.5px; color: var(--sky-deep); white-space: nowrap; }
.feature-port_scope__ehEaA .cr-stage:not([data-st="2"]) .cr-pane--rec .cr-loc { opacity: 0; transform: translateY(6px); }
.feature-port_scope__ehEaA .cr-sup { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.feature-port_scope__ehEaA .cr-sup small,
.feature-port_scope__ehEaA .cr-note small { display: block; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-sup b { font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-sup em { display: inline-block; margin: 2px 4px 0 0; padding: 2px 9px; border-radius: 999px; background: #eef7fb; font-style: normal; font-weight: 700; font-size: 11.5px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-note { margin-top: 10px; font-size: 13px; color: var(--navy); }
/* 3 · Activity */
.feature-port_scope__ehEaA .cr-act__h { margin-top: 14px; font-weight: 800; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.feature-port_scope__ehEaA .cr-sum span { padding: 10px; border-radius: 12px; background: #f4f7fa; }
.feature-port_scope__ehEaA .cr-sum b { display: block; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1; color: var(--navy); }
.feature-port_scope__ehEaA .cr-sum small { font-weight: 700; font-size: 11.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-sum .is-warn { background: #fdf3e6; }
.feature-port_scope__ehEaA .cr-sum .is-warn b { color: #9a5b12; }
.feature-port_scope__ehEaA .cr-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.feature-port_scope__ehEaA .cr-g { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 2px solid var(--line); font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-g b { color: var(--navy); }
.feature-port_scope__ehEaA .cr-job { margin-top: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .4s var(--ease); transition-delay: calc(.15s + var(--i) * .12s); }
.feature-port_scope__ehEaA .cr-job b { display: block; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-job small { font-size: 11.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-job em { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fdf3e6; font-style: normal; font-weight: 700; font-size: 10.5px; color: #9a5b12; }
.feature-port_scope__ehEaA .cr-job.is-pick { box-shadow: 0 0 0 2px var(--sky); }
.feature-port_scope__ehEaA .cr-stage:not([data-st="3"]) .cr-pane--act .cr-job { opacity: 0; transform: translateY(6px); }
/* 4 · the job, read-only */
.feature-port_scope__ehEaA .cr-job__top b { display: block; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-job__top small { font-size: 12.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-ro { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: #eef3f8; font-weight: 700; font-size: 11.5px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-ro svg { width: 13px; height: 13px; }
.feature-port_scope__ehEaA .cr-jtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--line); }
.feature-port_scope__ehEaA .cr-jtabs span { padding: 7px 10px; font-weight: 700; font-size: 12.5px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.feature-port_scope__ehEaA .cr-jtabs .on { color: var(--navy); border-color: var(--sky); }
.feature-port_scope__ehEaA .cr-hist { position: relative; margin: 14px 0 0; padding: 0 0 0 18px; list-style: none; }
.feature-port_scope__ehEaA .cr-hist::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: #e3eaf1; }
.feature-port_scope__ehEaA .cr-hist li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(.1s + var(--i) * .12s); }
.feature-port_scope__ehEaA .cr-hist li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--sky); }
.feature-port_scope__ehEaA .cr-hist b { color: var(--navy); }
.feature-port_scope__ehEaA .cr-actor { padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 11px; background: #eef3f8; color: var(--navy); }
.feature-port_scope__ehEaA .cr-actor--c { background: #e3f3f9; color: #13617a; }
.feature-port_scope__ehEaA .cr-actor--s { background: #f1eefa; color: #4f4392; }
/* green stays for paid states */
.feature-port_scope__ehEaA .cr-stage:not([data-st="4"]) .cr-pane--job .cr-hist li { opacity: 0; transform: translateX(-6px); }
@media (max-width: 900px) {   /* phones and tablets: the four states finished, one after another */
  .feature-port_scope__ehEaA .cr-stage { position: static; }
  .feature-port_scope__ehEaA .cr-panes { height: auto; display: grid; }
  .feature-port_scope__ehEaA .cr-pane { position: relative; inset: auto; opacity: 1; transform: none; border-top: 1px solid var(--line); }
  .feature-port_scope__ehEaA .cr-pane:first-child { border-top: 0; }
  .feature-port_scope__ehEaA .cr-stage[data-st] .cr-row:not(.is-hit),
.feature-port_scope__ehEaA .cr-stage[data-st] .cr-loc,
.feature-port_scope__ehEaA .cr-stage[data-st] .cr-job,
.feature-port_scope__ehEaA .cr-stage[data-st] .cr-hist li { opacity: 1; transform: none; }
  .feature-port_scope__ehEaA .cr-head,
.feature-port_scope__ehEaA .cr-row { grid-template-columns: minmax(0, 1fr) 64px; }
  .feature-port_scope__ehEaA .cr-head span:nth-child(2),
.feature-port_scope__ehEaA .cr-head span:nth-child(3),
.feature-port_scope__ehEaA .cr-em,
.feature-port_scope__ehEaA .cr-ph { display: none; }
  .feature-port_scope__ehEaA .cr-rec__grid,
.feature-port_scope__ehEaA .cr-groups { grid-template-columns: minmax(0, 1fr); }
  .feature-port_scope__ehEaA .cr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-port_scope__ehEaA .cr-filters { margin-left: 0; }
}
.feature-port_scope__ehEaA.still .cr-pane,
.feature-port_scope__ehEaA.still .cr-loc,
.feature-port_scope__ehEaA.still .cr-job,
.feature-port_scope__ehEaA.still .cr-hist li,
.feature-port_scope__ehEaA.still .cr-row,
.feature-port_scope__ehEaA.still .cr-new__drop,
.feature-port_scope__ehEaA.still .cr-new__form,
.feature-port_scope__ehEaA.still .cr-new__f,
.feature-port_scope__ehEaA.still .cr-new__saved,
.feature-port_scope__ehEaA.still .cr-close__list li,
.feature-port_scope__ehEaA.still .cr-close__tick { transition: none !important; }
/* new customers, added while booking */
.feature-port_scope__ehEaA .cr-add__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.feature-port_scope__ehEaA .cr-add__note { display: flex; gap: 10px; margin-top: 18px; max-width: 34em; color: var(--navy); font-weight: 600; }
.feature-port_scope__ehEaA .cr-add__note svg { flex: none; width: 20px; height: 20px; color: var(--sky-deep); margin-top: 2px; }
.feature-port_scope__ehEaA .cr-new { margin: 0; }
.feature-port_scope__ehEaA .cr-new__win { padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -46px rgba(3,15,30,.55); font-family: var(--ui); min-height: 360px; }
.feature-port_scope__ehEaA .cr-new__l { font-weight: 700; font-size: 13px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-new__in { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: 11px; border: 1.5px solid #9ccfe0; font-size: 14px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-new__in svg { width: 17px; height: 17px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-new__q { transition: opacity .3s var(--ease); }
.feature-port_scope__ehEaA .cr-new[data-k="0"] .cr-new__q { opacity: 0; }
.feature-port_scope__ehEaA .cr-new__drop { margin-top: 6px; border-radius: 11px; border: 1px solid var(--line); box-shadow: 0 16px 30px -22px rgba(3,15,30,.45); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .cr-new__none { padding: 9px 12px; font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid #eef1f5; }
.feature-port_scope__ehEaA .cr-new__add { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; font-size: 13.5px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-new__add svg { width: 16px; height: 16px; }
.feature-port_scope__ehEaA .cr-new[data-k="0"] .cr-new__drop,
.feature-port_scope__ehEaA .cr-new[data-k="1"] .cr-new__drop,
.feature-port_scope__ehEaA .cr-new[data-k="3"] .cr-new__drop,
.feature-port_scope__ehEaA .cr-new[data-k="4"] .cr-new__drop { opacity: 0; transform: translateY(-4px); }
.feature-port_scope__ehEaA .cr-new[data-k="3"] .cr-new__drop,
.feature-port_scope__ehEaA .cr-new[data-k="4"] .cr-new__drop { position: absolute; visibility: hidden; }
.feature-port_scope__ehEaA .cr-new__win { position: relative; }
.feature-port_scope__ehEaA .cr-new__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; transition: opacity .4s var(--ease); }
.feature-port_scope__ehEaA .cr-new__f { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i) * .18s); }
.feature-port_scope__ehEaA .cr-new__f small { display: block; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-new__f b { font-size: 13.5px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-new:not([data-k="3"]):not([data-k="4"]) .cr-new__f { opacity: 0; transform: translateY(6px); }
.feature-port_scope__ehEaA .cr-new__saved { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 11px; background: #eef7fb; font-weight: 700; font-size: 13px; color: var(--navy); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .cr-new__saved svg { flex: none; width: 17px; height: 17px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-new:not([data-k="4"]) .cr-new__saved { opacity: 0; transform: translateY(6px); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .cr-add__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .feature-port_scope__ehEaA .cr-new__form { grid-template-columns: minmax(0, 1fr); } }
/* keep the list clean (six cards) */
.feature-port_scope__ehEaA .cr-bs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .cr-b { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .cr-b__ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #eef7fb; color: var(--sky-deep); font-style: normal; }
.feature-port_scope__ehEaA .cr-b__ic svg { width: 20px; height: 20px; }
.feature-port_scope__ehEaA .cr-b h3 { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .cr-b p { margin-top: 8px; color: var(--text-2); line-height: 1.55; }
@media (max-width: 1000px) { .feature-port_scope__ehEaA .cr-bs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feature-port_scope__ehEaA .cr-bs { grid-template-columns: minmax(0, 1fr); } }
/* close: the customer list fills in */
.feature-port_scope__ehEaA .cr-close__card { justify-self: end; width: min(100%, 380px); padding: 22px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line-ink); }
.feature-port_scope__ehEaA .cr-close__list { margin: 14px 0 0; padding: 0; list-style: none; }
.feature-port_scope__ehEaA .cr-close__list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-ink); color: #fff; font-family: var(--ui); font-weight: 600; font-size: 14.5px;
  transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.35s + var(--i) * .22s); }
.feature-port_scope__ehEaA .cr-close__list li:first-child { border-top: 0; }
.feature-port_scope__ehEaA .cr-close__tick { margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); color: #04223a; transition: opacity .4s var(--ease); transition-delay: calc(.6s + var(--i) * .22s); }
.feature-port_scope__ehEaA .cr-close__tick svg { width: 13px; height: 13px; }
.feature-port_scope__ehEaA.motion .cr-close__card:not(.is-in) .cr-close__list li { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA.motion .cr-close__card:not(.is-in) .cr-close__tick { opacity: 0; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .cr-close__card { justify-self: start; } }
.feature-port_scope__ehEaA .fq-card li { grid-template-columns: 96px minmax(0, 1fr); }
@media (max-width: 640px) { .feature-port_scope__ehEaA .fq-card li { grid-template-columns: 84px minmax(0, 1fr); } }
/* photo-less heroes, round 2 (Mark, 9 Oct 2026): a pencil sketch fills the middle (it draws itself in, left to right), the
   copy starts where the other inner pages' copy starts, the card sits in the sketch's corner */
.feature-port_scope__ehEaA .shot--sketch img { mix-blend-mode: screen; opacity: .9; }
.feature-port_scope__ehEaA .shot--sketch::after { background: linear-gradient(0deg, rgba(3,15,30,.5) 0%, rgba(3,15,30,0) 32%); }
.feature-port_scope__ehEaA.motion .shot--sketch img { -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%); mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: feature-port_skDraw__XJhd4 2.8s .3s cubic-bezier(.4, 0, .2, 1) forwards, feature-port_sw-zoom__9WFE7 34s cubic-bezier(.33, 0, .45, 1) 3.2s infinite alternate; }
@keyframes feature-port_skDraw__XJhd4 { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.feature-port_scope__ehEaA .phero--np .phero__frame::after { display: none; }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .phero--np .phero__copy { justify-content: flex-start; padding-top: calc(clamp(24px, 4vh, 56px) + 22px); }
  .feature-port_scope__ehEaA .phero--np .jcard { top: auto; bottom: clamp(22px, 3.2vw, 48px); right: clamp(18px, 2.6vw, 44px); transform: none; width: min(340px, 25%); }
  .feature-port_scope__ehEaA .phero--np .jcard li { padding-top: 6px; padding-bottom: 6px; }
}
/* the job, tab by tab (Details → Invoice → Quote → Payments → Time Tracking → History; Files is in the bar, not visited) */
.feature-port_scope__ehEaA .cr-jtab { transition: color .3s var(--ease), border-color .3s var(--ease); }
.feature-port_scope__ehEaA .cr-jtab[data-t="6"] { opacity: .45; }
.feature-port_scope__ehEaA .cr-pane--job[data-t="0"] .cr-jtab[data-t="0"],
.feature-port_scope__ehEaA .cr-pane--job[data-t="1"] .cr-jtab[data-t="1"],
.feature-port_scope__ehEaA .cr-pane--job[data-t="2"] .cr-jtab[data-t="2"],
.feature-port_scope__ehEaA .cr-pane--job[data-t="3"] .cr-jtab[data-t="3"],
.feature-port_scope__ehEaA .cr-pane--job[data-t="4"] .cr-jtab[data-t="4"],
.feature-port_scope__ehEaA .cr-pane--job[data-t="5"] .cr-jtab[data-t="5"] { color: var(--navy); border-color: var(--sky); }
.feature-port_scope__ehEaA .cr-tabps { position: relative; margin-top: 12px; min-height: 290px; }
.feature-port_scope__ehEaA .cr-tabp { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .cr-pane--job[data-t="0"] .cr-tabp--0,
.feature-port_scope__ehEaA .cr-pane--job[data-t="1"] .cr-tabp--1,
.feature-port_scope__ehEaA .cr-pane--job[data-t="2"] .cr-tabp--2,
.feature-port_scope__ehEaA .cr-pane--job[data-t="3"] .cr-tabp--3,
.feature-port_scope__ehEaA .cr-pane--job[data-t="4"] .cr-tabp--4,
.feature-port_scope__ehEaA .cr-pane--job[data-t="5"] .cr-tabp--5 { opacity: 1; transform: none; }
.feature-port_scope__ehEaA .cr-pane--job:not([data-t="5"]) .cr-hist li { opacity: 0; transform: translateX(-6px); }
.feature-port_scope__ehEaA .cr-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0; }
.feature-port_scope__ehEaA .cr-dl div { padding: 9px 11px; border-radius: 10px; background: #f4f7fa; }
.feature-port_scope__ehEaA .cr-dl .is-wide { grid-column: 1 / -1; }
.feature-port_scope__ehEaA .cr-dl dt { font-weight: 700; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-dl dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-doc__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.feature-port_scope__ehEaA .cr-doc__h b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-doc__h small { font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-doc__h .sk-badge,
.feature-port_scope__ehEaA .cr-paid { margin-left: auto; }
.feature-port_scope__ehEaA .cr-paid { padding: 2px 10px; border-radius: 999px; background: #e3f4ea; color: #1d6b43; font-weight: 700; font-size: 11px; white-space: nowrap; }
/* paid: the one place green is used */
.feature-port_scope__ehEaA .cr-ln { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid #eef1f5; font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-ln b { color: var(--navy); white-space: nowrap; }
.feature-port_scope__ehEaA .cr-ln--s { font-size: 12px; }
.feature-port_scope__ehEaA .cr-ln--t { border-bottom: 0; border-top: 2px solid var(--navy); margin-top: 6px; font-weight: 700; color: var(--navy); }
.feature-port_scope__ehEaA .cr-pay { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.feature-port_scope__ehEaA .cr-pay b { font-size: 13px; color: var(--navy); white-space: nowrap; }
.feature-port_scope__ehEaA .cr-pay small { display: block; font-size: 11.5px; color: var(--text-2); }
@media (max-width: 900px) { .feature-port_scope__ehEaA .cr-tabps { min-height: 320px; } }
/* the add-customer scene: a cursor clicks "+ Add new customer" */
.feature-port_scope__ehEaA .cr-new__hand { z-index: 3; }
.feature-port_scope__ehEaA .cr-new.is-hand .cr-new__hand { opacity: 1; }
.feature-port_scope__ehEaA.still .cr-new__hand { display: none; }
/* the sketch blends into the painted ink: the blend sits on the masked frame itself (a mask isolates its children) */
.feature-port_scope__ehEaA .shot--sketch { mix-blend-mode: screen; }
.feature-port_scope__ehEaA .shot--sketch img { mix-blend-mode: normal; }
/* tab change: the old panel leaves quickly, then the new one comes in (no overlap mid-fade) */
.feature-port_scope__ehEaA .cr-tabp { transition: opacity .18s ease, transform .18s ease; }
.feature-port_scope__ehEaA .cr-pane--job[data-t="0"] .cr-tabp--0,
.feature-port_scope__ehEaA .cr-pane--job[data-t="1"] .cr-tabp--1,
.feature-port_scope__ehEaA .cr-pane--job[data-t="2"] .cr-tabp--2,
.feature-port_scope__ehEaA .cr-pane--job[data-t="3"] .cr-tabp--3,
.feature-port_scope__ehEaA .cr-pane--job[data-t="4"] .cr-tabp--4,
.feature-port_scope__ehEaA .cr-pane--job[data-t="5"] .cr-tabp--5 { transition: opacity .45s var(--ease) .2s, transform .45s var(--ease) .2s; }
/* customer records, round 2 (Mark, 9 Oct): step 04 and the add-customer scene follow the scroll */
.feature-port_scope__ehEaA .cr-pane--job { display: flex; flex-direction: column; }
.feature-port_scope__ehEaA .cr-pane--job .cr-tabps { flex: 1; min-height: 0; overflow: hidden; }
.feature-port_scope__ehEaA .cr-tabp--4 { overflow: hidden; }
.feature-port_scope__ehEaA .cr-tabp--4 .tform--app { transition: transform .5s var(--ease); }
.feature-port_scope__ehEaA .cr-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-acc svg { width: 15px; height: 15px; color: var(--sky-deep); }
.feature-port_scope__ehEaA .cr-psum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feature-port_scope__ehEaA .cr-psum p { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f4f7fa; }
.feature-port_scope__ehEaA .cr-psum small { display: block; font-weight: 700; font-size: 11px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-psum b { display: block; margin-top: 2px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); }
.feature-port_scope__ehEaA .cr-psum b.is-paid { color: #1d6b43; }
.feature-port_scope__ehEaA .cr-pbar { height: 8px; margin: 12px 0 4px; border-radius: 8px; background: #dbe3ea; overflow: hidden; }
.feature-port_scope__ehEaA .cr-pbar i { display: block; height: 100%; border-radius: 8px; background: #2f9e63; transform: translateX(-100%); transition: transform .7s var(--ease) .35s; }
.feature-port_scope__ehEaA .cr-pane--job[data-t="3"] .cr-pbar i { transform: none; }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .cr-story .sk-steps li.cr-long { min-height: 410vh; }   /* six tabs at the pace of the steps above (~62vh each) */
  .feature-port_scope__ehEaA .cr-panes { height: min(660px, calc(100vh - 150px)); }
  .feature-port_scope__ehEaA .cr-add__track { position: relative; height: 290vh; }
  .feature-port_scope__ehEaA .cr-add__track .cr-add__grid { position: sticky; top: max(84px, calc(50vh - 290px)); }
  .feature-port_scope__ehEaA .cr-new.is-scrub .cr-new__hand { transition: opacity .25s; }
}
@media (max-width: 900px) { .feature-port_scope__ehEaA .cr-pane--job .cr-tabps { min-height: 480px; } }
.feature-port_scope__ehEaA .cr-new .cr-new__f.is-off { opacity: 0; transform: translateY(6px); }
.feature-port_scope__ehEaA.still .cr-pbar i,
.feature-port_scope__ehEaA.still .cr-tabp--4 .tform--app { transition: none !important; }
.feature-port_scope__ehEaA .cr-ev { display: grid; }
.feature-port_scope__ehEaA .cr-ev small { font-size: 11.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .cr-tabp--5 .cr-hist li { padding: 9px 0; }
/* records, round 4 (Mark, 9 Oct): the job is read-only, so its Time Tracking tab shows the result — rate, the summary and
   Recent Entries — not the entry form, and it starts at the top so the summary is never cut off */
.feature-port_scope__ehEaA .cr-tabp--4 .tf__modes,
.feature-port_scope__ehEaA .cr-tabp--4 .tform__fields,
.feature-port_scope__ehEaA .cr-tabp--4 .tform__quick,
.feature-port_scope__ehEaA .cr-tabp--4 .tf__desc,
.feature-port_scope__ehEaA .cr-tabp--4 .jd__savebar { display: none; }
.feature-port_scope__ehEaA .cr-tabp--4 .tform--app { --tfy: 0px; transform: none; }
.feature-port_scope__ehEaA .cr-pane--job .cr-tabp--4.jd__time { -webkit-mask-image: none; mask-image: none; }
.feature-port_scope__ehEaA .cr-tabp--4 .tf__rh { margin-top: 10px; }
/* quotes › Get paid the way your customers pay (Mark, 9 Oct): wide screens pin the section while Settings › Payments
   plays, then hold the configured card a while longer (js/pages.js sets the pinned top) */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .pay-track { position: relative; height: 240vh; }
  .feature-port_scope__ehEaA .pay-track .pay { position: sticky; top: 84px; }
}
.feature-port_scope__ehEaA.still .pay-track { height: auto; }
.feature-port_scope__ehEaA.still .pay-track .pay { position: static; }
/* sideways-scroll fixes (11 Oct 2026): the customer's phone in the journey fits a 280–480px step; the desktop phone mockup
   no longer pokes 6px past the page edge */
@media (max-width: 480px) { .feature-port_scope__ehEaA .jr__cust .cphone { width: 100%; max-width: 250px; } .feature-port_scope__ehEaA .jr__steps li.jr__st { grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; } }
@media (min-width: 901px) { .feature-port_scope__ehEaA .jr__panel .cphone { right: -12px; } }
/* Current Source pages.css phone-state cadence, Quotes only; preserve its reduced-motion cascade. */
/* Current Source journey phone pulses and instantaneous tab switches, Quotes only. */
@media (max-width: 900px) {
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .vchip,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .kcard { transition-duration: .3s; transition-delay: min(var(--d, 0s), .12s); }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m.is-upd .jd__ban::after,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m.is-ping .plist li.jd__new::after,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m.is-upd .hpanel__tabs [data-on]::after,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m.is-upd .jd__labor::after { animation-duration: .4s !important; animation-iteration-count: 1 !important; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m .hpanel__tabs span { transition: none !important; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m .hpanel__tabs span::after { animation: none !important; }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .jd--m *,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .kview,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .kview *,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA #payments *,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .tmail__grid,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .tmail__grid *,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .vs__grid,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .vs__grid * {
    transition-duration: .24s !important; transition-delay: 0s !important;
  }
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .tmail__att.is-tap,
  [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .tmail__att.is-tap::after { animation-duration: .24s !important; } [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { [data-feature-page="quotes-and-invoicing"] .feature-port_scope__ehEaA .kcards { grid-template-columns: minmax(0, 1fr); } }
/* Current Source Scheduling/Records phone reveals, hands, steps and job history. */
@media (max-width: 900px) { [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA.motion [data-rv], [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA.motion [data-rv] { transition-duration: .5s; transition-delay: min(var(--d, 0s), .15s); } }
@media (max-width: 340px) { [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA.motion [data-rv], [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA.motion [data-rv] { transition-duration: .3s; transition-delay: 0s; } }
@media (max-width: 900px) { [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-hand, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .sk-hand { transition-duration: .45s, .2s; } [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-steps li, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .sk-steps li, [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .cr-jtab, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .cr-jtab { transition-duration: .2s !important; } }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-tl:not(.is-hand) .sk-tl__hand, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .sk-tl:not(.is-hand) .sk-tl__hand { transition: opacity .3s; }
@media (max-width: 900px) { [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .cr-hist li, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .cr-hist li, [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .cr-new__f, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .cr-new__f { transition-duration: .3s !important; transition-delay: 0s !important; } }
/* Original site.css, in original cascade order. Body scoping and release font URLs/family isolation only. */
/* SendWork site links (Mark, 12 Oct 2026) — the header menu, the footer's page list, "Keep exploring" (inner pages) and
   the homepage's Explore section. Loaded on every SendWork page after styles.css (and pages.css). Behaviour: js/site.js;
   HTML: scripts/sw-site.mjs. The menu (Who it's for · Features ▾ · Pricing · Questions) sits in the stand-in header here; live, it is the menu proposed for the live
   header, beside its own controls (prompt-proleader/01-sendwork.md). */
/* ---------- header menu ---------- */
.feature-port_scope__ehEaA .nav { position: relative; }
.feature-port_scope__ehEaA .snav { margin-left: 18px; font-family: var(--ui); font-weight: 600; font-size: 14.5px; }
.feature-port_scope__ehEaA .snav__list { display: flex; align-items: center; gap: 26px; }
.feature-port_scope__ehEaA .snav__home { display: none; }
.feature-port_scope__ehEaA .snav__list > li > a,
.feature-port_scope__ehEaA .snav__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; color: var(--white); text-decoration: none; opacity: .9; font: inherit; background: none; border: 0; cursor: pointer; }
.feature-port_scope__ehEaA .snav__list > li > a:hover,
.feature-port_scope__ehEaA .snav__more:hover,
.feature-port_scope__ehEaA .snav__more[aria-expanded="true"] { opacity: 1; }
.feature-port_scope__ehEaA .snav__list > li > a[aria-current],
.feature-port_scope__ehEaA .snav__more[data-current] { opacity: 1; box-shadow: inset 0 -2px 0 var(--sky); }
.feature-port_scope__ehEaA .snav__list a:focus-visible,
.feature-port_scope__ehEaA .snav__more:focus-visible,
.feature-port_scope__ehEaA .snav__toggle:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
.feature-port_scope__ehEaA .snav__chev { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.feature-port_scope__ehEaA .snav__more[aria-expanded="true"] .snav__chev { transform: rotate(180deg); }
.feature-port_scope__ehEaA .snav__group { position: relative; }
.feature-port_scope__ehEaA .snav__sub { display: grid; gap: 2px; }
.feature-port_scope__ehEaA.js .snav__sub { position: absolute; z-index: 30; top: calc(100% + 8px); left: -18px; width: min(380px, 80vw); padding: 8px; border-radius: 14px; background: var(--white); box-shadow: 0 18px 50px rgba(3,15,30,.28);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; }
.feature-port_scope__ehEaA.js .snav.is-feat .snav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.feature-port_scope__ehEaA .snav__sub a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.feature-port_scope__ehEaA .snav__sub a:hover,
.feature-port_scope__ehEaA .snav__sub a:focus-visible { background: var(--panel-light); }
.feature-port_scope__ehEaA .snav__sub a[aria-current] { background: var(--panel-light); box-shadow: inset 3px 0 0 var(--sky); }
.feature-port_scope__ehEaA .snav__sub b { font-weight: 700; font-size: 15px; color: var(--navy); }
.feature-port_scope__ehEaA .snav__sub small { font-weight: 500; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.feature-port_scope__ehEaA .snav__toggle { display: none; }
@media (max-width: 1240px) { .feature-port_scope__ehEaA .nav__stand { display: none; } }
@media (max-width: 900px) {
  /* phones and tablets: a Menu button at the end of the bar opens the whole list under it */
  .feature-port_scope__ehEaA .snav { order: 3; margin-left: 0; }
  .feature-port_scope__ehEaA .nav__right { margin-left: auto; }
  .feature-port_scope__ehEaA.js .snav__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(3,15,30,.25); color: var(--white); font: inherit; cursor: pointer; }
  .feature-port_scope__ehEaA .snav__icon { display: grid; gap: 4px; width: 16px; }
  .feature-port_scope__ehEaA .snav__icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
  .feature-port_scope__ehEaA .snav.is-open .snav__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .feature-port_scope__ehEaA .snav.is-open .snav__icon i:nth-child(2) { opacity: 0; }
  .feature-port_scope__ehEaA .snav.is-open .snav__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .feature-port_scope__ehEaA.js .snav__list { display: none; }
  .feature-port_scope__ehEaA.js .snav.is-open .snav__list { display: grid; gap: 0; position: absolute; z-index: 30; top: calc(100% - 6px); left: 12px; right: 12px; padding: 8px; border-radius: 14px; background: var(--white); box-shadow: 0 18px 50px rgba(3,15,30,.32); }
  .feature-port_scope__ehEaA .snav__home { display: block; }
  .feature-port_scope__ehEaA .snav.is-open .snav__list > li > a,
.feature-port_scope__ehEaA .snav.is-open .snav__more { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; color: var(--navy); opacity: 1; font-size: 16px; justify-content: space-between; }
  .feature-port_scope__ehEaA .snav.is-open .snav__list > li > a[aria-current],
.feature-port_scope__ehEaA .snav.is-open .snav__more[data-current] { box-shadow: inset 3px 0 0 var(--sky); }
  .feature-port_scope__ehEaA .snav.is-open .snav__list > li > a:hover,
.feature-port_scope__ehEaA .snav.is-open .snav__more:hover { background: var(--panel-light); }
  .feature-port_scope__ehEaA.js .snav__sub { position: static; width: auto; padding: 0 0 6px 10px; box-shadow: none; border-radius: 0; display: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .feature-port_scope__ehEaA.js .snav.is-feat .snav__sub { display: grid; }
}
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .snav__toggle-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .feature-port_scope__ehEaA.js .snav__toggle { padding: 0 12px; }
}
/* ---------- the menu in the floating bar (wide screens, once the hero has gone): the same menu as the header ---------- */
.feature-port_scope__ehEaA .fbar { overflow: visible; }
.feature-port_scope__ehEaA .fbar__line { overflow: hidden; border-radius: 0 0 14px 14px; }
.feature-port_scope__ehEaA .snav--bar { margin: 0 auto; }
.feature-port_scope__ehEaA .snav--bar .snav__list { gap: 24px; }
.feature-port_scope__ehEaA .snav--bar .snav__list > li > a,
.feature-port_scope__ehEaA .snav--bar .snav__more { min-height: 40px; color: #dbe3ec; opacity: 1; }
.feature-port_scope__ehEaA .snav--bar .snav__list > li > a:hover,
.feature-port_scope__ehEaA .snav--bar .snav__more:hover { color: var(--white); }
.feature-port_scope__ehEaA.js .snav--bar .snav__sub { top: calc(100% + 14px); }
/* ---------- the header's Market + Language pickers (every page; market pages show their country first) ---------- */
.feature-port_scope__ehEaA[data-market] .nav__right > .lang--pick { order: 2; }
@media (max-width: 1180px) and (min-width: 901px) { .feature-port_scope__ehEaA .nav .lang__name { display: none; } .feature-port_scope__ehEaA .nav .lang__code { display: inline; } }
@media (max-width: 360px) {
  .feature-port_scope__ehEaA .nav { gap: 8px; }
  .feature-port_scope__ehEaA .nav__logo img { width: 92px; }
  .feature-port_scope__ehEaA .nav .lang { padding: 0 8px; gap: 4px; }
  .feature-port_scope__ehEaA .nav .lang__globe,
.feature-port_scope__ehEaA .nav .lang__chev { display: none; }
  .feature-port_scope__ehEaA.js .snav__toggle { padding: 0 10px; }
}
/* ---------- cards (Keep exploring + Explore) ---------- */
.feature-port_scope__ehEaA .scard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2vw, 28px); padding-bottom: 56px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.feature-port_scope__ehEaA .scard:hover { transform: translateY(-3px); border-color: rgba(31,122,150,.45); box-shadow: 0 16px 40px rgba(11,55,108,.12); }
.feature-port_scope__ehEaA .scard:focus-within { border-color: var(--sky-deep); }
.feature-port_scope__ehEaA .scard__tag { font-family: var(--ui); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-deep); }
.feature-port_scope__ehEaA .scard__h { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.6vw, 27px); line-height: 1.15; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; }
.feature-port_scope__ehEaA .scard__link { color: inherit; text-decoration: none; }
.feature-port_scope__ehEaA .scard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.feature-port_scope__ehEaA .scard__link:focus-visible { outline: none; }
.feature-port_scope__ehEaA .scard:has(.scard__link:focus-visible) { outline: 3px solid var(--sky); outline-offset: 3px; }
.feature-port_scope__ehEaA .scard__d { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.feature-port_scope__ehEaA .scard__scene { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--sky-deep); text-decoration: none; }
.feature-port_scope__ehEaA .scard__scene > span:last-child { border-bottom: 1px solid currentColor; }
.feature-port_scope__ehEaA .scard__scene:hover > span:last-child { border-bottom-width: 2px; }
.feature-port_scope__ehEaA .scard__play { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sky-deep); color: var(--white); }
.feature-port_scope__ehEaA .scard__play svg { width: 9px; height: 9px; margin-left: 1px; }
.feature-port_scope__ehEaA .scard__scene:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.feature-port_scope__ehEaA .scard__go { position: absolute; left: clamp(20px, 2vw, 28px); bottom: 18px; font-size: 22px; line-height: 1; color: var(--sky-deep); transition: transform .3s var(--ease); }
.feature-port_scope__ehEaA .scard:hover .scard__go { transform: translateX(6px); }
.feature-port_scope__ehEaA .scard--next { background: var(--navy); border-color: var(--navy); }
.feature-port_scope__ehEaA .scard--next .scard__h { color: var(--white); }
.feature-port_scope__ehEaA .scard--next .scard__d { color: #d5e0ec; }
.feature-port_scope__ehEaA .scard--next .scard__tag,
.feature-port_scope__ehEaA .scard--next .scard__go { color: var(--sky); }
.feature-port_scope__ehEaA .scard--next:hover { border-color: var(--navy); box-shadow: 0 16px 40px rgba(3,15,30,.3); }
/* ---------- Keep exploring (inner pages, just before the close) ---------- */
.feature-port_scope__ehEaA .snext { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--pad) clamp(40px, 5vw, 64px); }
.feature-port_scope__ehEaA .snext__h { margin-top: 10px; max-width: 18em; font-size: clamp(30px, 3.4vw, 46px); }
.feature-port_scope__ehEaA .snext__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(26px, 3vw, 40px); }
/* ---------- Explore (homepage, before the markets) ---------- */
.feature-port_scope__ehEaA .sexp { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 11vw, 150px) var(--pad) 0; }
.feature-port_scope__ehEaA .sexp__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 10px clamp(36px, 6vw, 90px); align-items: end; }
.feature-port_scope__ehEaA .sexp__head .h2 { max-width: 15em; }
.feature-port_scope__ehEaA .sexp__head .label,
.feature-port_scope__ehEaA .sexp__head .h2 { grid-column: 1; }
.feature-port_scope__ehEaA .sexp__p { grid-column: 2; grid-row: 1 / span 2; align-self: end; color: var(--text-2); font-size: var(--fs-body); max-width: 32em; }
.feature-port_scope__ehEaA .sexp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(30px, 3.4vw, 48px); }
.feature-port_scope__ehEaA .sexp + .markets { padding-top: clamp(70px, 8vw, 110px); }
/* the homepage FAQ's way on to the FAQ page */
.feature-port_scope__ehEaA .faq__more { margin-top: 22px; }
.feature-port_scope__ehEaA .faq__more .xlink { display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 15px; color: var(--sky-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.feature-port_scope__ehEaA .faq__more .xlink:hover { border-bottom-width: 2px; }
.feature-port_scope__ehEaA .faq__more .xlink::after { content: " →"; }
/* ---------- footer page list ---------- */
.feature-port_scope__ehEaA .foot__grid:has(.foot__pages) { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr); }
.feature-port_scope__ehEaA .foot__pages { display: flex; flex-direction: column; }
.feature-port_scope__ehEaA .foot__pages a { color: var(--white); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; width: -moz-fit-content; width: fit-content; }
.feature-port_scope__ehEaA .foot__pages a:hover { text-decoration: underline; text-underline-offset: 4px; }
.feature-port_scope__ehEaA .foot__pages a[aria-current] { color: var(--sky); }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA .snext__grid { grid-template-columns: minmax(0, 1fr); }
  .feature-port_scope__ehEaA .sexp__head { grid-template-columns: minmax(0, 1fr); }
  .feature-port_scope__ehEaA .sexp__p { grid-column: 1; grid-row: auto; }
  .feature-port_scope__ehEaA .sexp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature-port_scope__ehEaA .foot__grid:has(.foot__pages) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* phones: one swipeable row (the six cards stacked made the page longer) */
  .feature-port_scope__ehEaA .sexp__grid { display: flex; gap: 12px; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 6px var(--pad) 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad); scrollbar-width: none; }
  .feature-port_scope__ehEaA .sexp__grid::-webkit-scrollbar { display: none; }
  .feature-port_scope__ehEaA .sexp__grid > .scard { flex: 0 0 82%; scroll-snap-align: start; }
  .feature-port_scope__ehEaA .sexp__grid > .scard:hover { transform: none; }
  .feature-port_scope__ehEaA .foot__grid:has(.foot__pages) { grid-template-columns: 1fr 1fr; }
  .feature-port_scope__ehEaA .foot__grid:has(.foot__pages) .foot__locale { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-port_scope__ehEaA .scard,
.feature-port_scope__ehEaA .scard__go,
.feature-port_scope__ehEaA .snav__chev,
.feature-port_scope__ehEaA .snav__icon i,
.feature-port_scope__ehEaA.js .snav__sub { transition: none; }
}
/* ---------- holds + smooth scrolling (js/hold.js; Mark, 12 Oct 2026 — what the brands taught) ----------
   A held block sits sticky in the middle of the screen (its top is set inline) while its scene plays with the scroll. */
.feature-port_scope__ehEaA .hold { position: relative; }
.feature-port_scope__ehEaA .hold.is-held > .hold__in { position: sticky; }
html.lenis:has(.feature-port_scope__ehEaA),
html.lenis:has(.feature-port_scope__ehEaA) body { height: auto; }
html.lenis.lenis-smooth:has(.feature-port_scope__ehEaA) { scroll-behavior: auto !important; }
html.lenis.lenis-stopped:has(.feature-port_scope__ehEaA) { overflow: hidden; }
/* the scheduling story (desktop, where the stage is sticky): the last step gets as much scroll as the others, so the
   booking email has played and rests on screen before the stage moves on (it had about a quarter of a screen) */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .sk-story:not(.cr-story) .sk-steps li:last-child { min-height: 112vh; }
}
/* ---------- homepage: no cream (Mark's rule, 9 Oct 2026; homepage pass 12 Oct). Light, clean surfaces: white cards with a
   soft navy line, as on the inner pages; the evening band falls from cool light through a lilac dusk to night (it went
   through beige and peach); the setting sun is a smaller, paler glow. Overrides css/styles.css (loaded on every page). */
.feature-port_scope__ehEaA .ecard { background: #fff; border-color: rgba(11,55,108,.14); }
.feature-port_scope__ehEaA .ecard--job { background: var(--navy); border-color: var(--navy); }
.feature-port_scope__ehEaA .eve__pad { background: #fff; border-color: #d9e1ea; box-shadow: 0 1px 0 #e7edf3, 0 3px 0 -1px #fff, 0 3px 0 0 #d9e1ea, 0 10px 22px -12px rgba(3,15,30,.25); }
.feature-port_scope__ehEaA .scrap { background: #fff; }
.feature-port_scope__ehEaA .day { background: linear-gradient(180deg, var(--light) 0%, #eef1f6 8%, #e4e4ef 20%, #c7c2d4 34%, #8f8aa3 50%, #3f4d76 66%, #13284c 82%, #030f1e 100%); }
.feature-port_scope__ehEaA .evesky__sun { width: min(46vw, 620px); background: radial-gradient(circle, rgba(255, 236, 200, .55) 0, rgba(255, 214, 170, .18) 20%, rgba(255, 200, 160, 0) 52%); }
/* ---------- homepage statement: the clock sits above the line, smaller, never behind the words (12 Oct 2026). It still
   runs from midday to seven as the line is read (js/main.js); the words now sit on clear sky. ---------- */
.feature-port_scope__ehEaA .statement .clock,
.feature-port_scope__ehEaA .stpin.is-pinned .clock { position: relative; left: auto; top: auto; z-index: 0; transform: none; flex: none;
  width: clamp(104px, min(13vw, 20svh), 188px); margin: 0 auto clamp(14px, 2vw, 26px); }
.feature-port_scope__ehEaA .clock__face { fill: rgba(255, 255, 255, .32); }
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .statement .clock,
.feature-port_scope__ehEaA .stpin.is-pinned .clock { width: 88px; margin-bottom: 12px; }
  .feature-port_scope__ehEaA .statement,
.feature-port_scope__ehEaA .stpin.is-pinned .statement { padding-top: 32px; padding-bottom: 32px; }
}
/* ---------- Explore: a glimpse of each page (scripts/sw-site.mjs glimpse()); hover nudges, nothing moves on scroll ---------- */
.feature-port_scope__ehEaA .scard__vis { position: relative; display: grid; place-items: center; height: 136px; margin: 0 0 14px; border-radius: 12px; background: var(--panel-light); overflow: hidden; }
.feature-port_scope__ehEaA .gl { width: 100%; height: 100%; display: grid; place-items: center; }
.feature-port_scope__ehEaA .gl__win { width: 84%; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: 0 12px 26px -16px rgba(3,15,30,.4); transition: transform .35s var(--ease); }
.feature-port_scope__ehEaA .scard:hover .gl__win,
.feature-port_scope__ehEaA .scard:focus-within .gl__win { transform: translateY(-4px); }
.feature-port_scope__ehEaA .gl i.ln { display: block; width: var(--w); height: 6px; border-radius: 3px; background: #e3e9f0; }
.feature-port_scope__ehEaA .gl i.ln + i.ln { margin-top: 5px; }
.feature-port_scope__ehEaA .gl__month i,
.feature-port_scope__ehEaA .gl__cols i { display: block; }
.feature-port_scope__ehEaA .gl__t { font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--navy); margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-port_scope__ehEaA .gl__steps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.feature-port_scope__ehEaA .gl__steps li { padding: 3px 8px; border-radius: 999px; background: #eef2f6; font-family: var(--ui); font-weight: 700; font-size: 10.5px; color: var(--text-2); transition: background-color .3s, color .3s; }
.feature-port_scope__ehEaA .gl__steps li.on { background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .gl__steps li.now { background: #e1f3e8; color: #1d7a4a; }
/* green only for a paid state */
.feature-port_scope__ehEaA .gl__month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.feature-port_scope__ehEaA .gl__month i { aspect-ratio: 1.45; border-radius: 4px; background: #eef2f6; transition: transform .35s var(--ease); }
.feature-port_scope__ehEaA .gl__month i.job { background: var(--navy); }
.feature-port_scope__ehEaA .gl__month i.job--b { background: var(--sky); }
.feature-port_scope__ehEaA .gl__month i.rep { background: #dff1f7; box-shadow: inset 0 0 0 1.5px var(--sky); }
.feature-port_scope__ehEaA .scard:hover .gl__month i.rep { transform: scale(1.08); }
.feature-port_scope__ehEaA .gl__who { display: flex; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 700; font-size: 12.5px; color: var(--navy); }
.feature-port_scope__ehEaA .gl__who b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sky-deep); color: #fff; font-size: 10px; }
.feature-port_scope__ehEaA .gl__jobs li { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.feature-port_scope__ehEaA .gl__jobs li > i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.feature-port_scope__ehEaA .gl__jobs li > span { flex: 1; }
.feature-port_scope__ehEaA .gl__jobs .ok { background: var(--navy); }
.feature-port_scope__ehEaA .gl__jobs .wip { background: var(--sky); }
.feature-port_scope__ehEaA .gl--wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.feature-port_scope__ehEaA .gl--wall img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 8px; transition: transform .45s var(--ease); }
.feature-port_scope__ehEaA .scard:hover .gl--wall img { transform: scale(1.04); }
.feature-port_scope__ehEaA .gl--plans { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.feature-port_scope__ehEaA .gl__cols { display: flex; align-items: flex-end; gap: 8px; height: 62px; }
.feature-port_scope__ehEaA .gl__cols i { width: 34px; border-radius: 6px 6px 0 0; background: #d6dfe9; transition: height .35s var(--ease); }
.feature-port_scope__ehEaA .gl__cols i:nth-child(1) { height: 58%; }
.feature-port_scope__ehEaA .gl__cols i:nth-child(3) { height: 80%; }
.feature-port_scope__ehEaA .gl__cols i.pop { height: 100%; background: var(--navy); }
.feature-port_scope__ehEaA .scard:hover .gl__cols i:nth-child(1) { height: 66%; }
.feature-port_scope__ehEaA .gl__pill { padding: 4px 11px; border-radius: 999px; background: #fff; font-family: var(--ui); font-weight: 700; font-size: 11.5px; color: var(--sky-deep); box-shadow: 0 6px 16px -10px rgba(3,15,30,.4); }
.feature-port_scope__ehEaA .gl--faq { width: 84%; height: auto; display: block; }
.feature-port_scope__ehEaA .gl__q { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px -14px rgba(3,15,30,.4); }
.feature-port_scope__ehEaA .gl__q + .gl__a,
.feature-port_scope__ehEaA .gl__a + .gl__q { margin-top: 6px; }
.feature-port_scope__ehEaA .gl__q b { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--ui); font-size: 11px; }
.feature-port_scope__ehEaA .gl__q > span { flex: 1; }
.feature-port_scope__ehEaA .gl__a { padding: 2px 10px 0 36px; }
.feature-port_scope__ehEaA .gl__q,
.feature-port_scope__ehEaA .gl__a { width: 100%; }
.feature-port_scope__ehEaA .gl__q > span,
.feature-port_scope__ehEaA .gl__a > span,
.feature-port_scope__ehEaA .gl__jobs li > span { display: block; min-width: 0; }
/* ---------- the country list on phones: one compact block per region (it was 15 full-width rows) ---------- */
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .rows { gap: 20px; }
  .feature-port_scope__ehEaA .rows ul { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .feature-port_scope__ehEaA .rows a { min-height: 44px; padding: 0 14px; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--ui); font-weight: 700; font-size: 15px; }
  .feature-port_scope__ehEaA .rows a::after,
.feature-port_scope__ehEaA .rows a[aria-current="page"]::after { content: none; }
  .feature-port_scope__ehEaA .rows a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .feature-port_scope__ehEaA .rows a:hover { padding-left: 14px; }
  .feature-port_scope__ehEaA .rows a span { font-size: 13px; }
  .feature-port_scope__ehEaA .rows a[aria-current="page"] span { color: #d5e0ec; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-port_scope__ehEaA .gl__win,
.feature-port_scope__ehEaA .gl__month i,
.feature-port_scope__ehEaA .gl--wall img,
.feature-port_scope__ehEaA .gl__cols i { transition: none; }
}
/* ---------- homepage "Stop being your own secretary": held mid-screen while the evening flips (js/main.js + js/hold.js).
   Sticky needs the band's overflow to clip rather than hide; the boss-mode ask keeps following the mode through the hold
   wrapper (the old rule was a sibling selector on .eve). ---------- */
.feature-port_scope__ehEaA .day { overflow: clip; }
.feature-port_scope__ehEaA.js .hold:has(> .eve[data-mode="alone"]) ~ .eve__cta { opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
/* ---------- homepage preview, phones: the three notes all on screen, side by side, with the label above them (it was a
   70px column, and the third note ran off the edge) ---------- */
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .scraps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 4px 2px 10px; align-items: stretch; }
  .feature-port_scope__ehEaA .scraps__label { grid-column: 1 / -1; width: auto; }
  .feature-port_scope__ehEaA .scrap { width: auto; min-width: 0; min-height: 92px; padding: 10px 10px 12px; font-size: clamp(14px, 4.2vw, 17px); line-height: 1.12; overflow-wrap: anywhere; }
  .feature-port_scope__ehEaA .scrap:nth-of-type(2) { transform: rotate(2deg); }
}
/* ---------- homepage preview, held: your cursor presses Review & approve and approves each item (js/main.js) ---------- */
.feature-port_scope__ehEaA .panel { position: relative; }
.feature-port_scope__ehEaA .pcur { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none; opacity: 0;
  transform: translate(var(--cx, 60%), var(--cy, 80%)); transition: transform .6s var(--ease), opacity .3s; filter: drop-shadow(0 4px 8px rgba(3,15,30,.4)); }
.feature-port_scope__ehEaA .pcur svg { display: block; width: 100%; height: 100%; }
.feature-port_scope__ehEaA .pcur.on { opacity: 1; }
.feature-port_scope__ehEaA #review-open { transition: transform .15s var(--ease); }
.feature-port_scope__ehEaA #review-open.is-press { transform: scale(.95); }
.feature-port_scope__ehEaA .review__item.is-ping { animation: feature-port_sw-ping__uS4Q5 .7s var(--ease); }
@keyframes feature-port_sw-ping__uS4Q5 { 0% { background: rgba(72,172,200,.22); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .pcur { transition: none; } .feature-port_scope__ehEaA .review__item.is-ping { animation: none; } }
/* the review keeps its height as items are approved: "Approved" and "Undo" share a line, like "Approve" and "Later" */
.feature-port_scope__ehEaA .review__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.feature-port_scope__ehEaA .review__name { flex: 1 1 100%; }
.feature-port_scope__ehEaA .review__item .review__done { margin: 0; }
.feature-port_scope__ehEaA .review__item .review__acts { margin: 0; }
.feature-port_scope__ehEaA .review__item { padding: 7px 0; gap: 4px 10px; }
.feature-port_scope__ehEaA .review__item .review__done { line-height: 1.35; }
.feature-port_scope__ehEaA .review__item .chipbtn { min-height: 34px; }
/* =====================================================================================================================
   Homepage "One job, start to finish" (Mark, 12 Oct 2026: lead with creating the job, approvals, deposits and getting paid,
   not voice). Held mid-screen, played by the scroll both ways (js/main.js initJob). Same look as the quotes page job
   drawer and customer phone; no amounts. The hero button loses its mic.
   ===================================================================================================================== */
.feature-port_scope__ehEaA .hero__claim .claim__mic,
.feature-port_scope__ehEaA .hero__claim .claim__wave { display: none; }
.feature-port_scope__ehEaA .hero__claim { padding-left: 24px; }
.feature-port_scope__ehEaA .hj { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(36px, 4vw, 56px); }
.feature-port_scope__ehEaA .hj__beats { display: grid; gap: 6px; }
.feature-port_scope__ehEaA .hj__beats li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; opacity: .45; transition: opacity .4s var(--ease), background-color .4s, box-shadow .4s; }
.feature-port_scope__ehEaA .hj__beats li.is-past { opacity: .78; }
.feature-port_scope__ehEaA .hj__beats li.is-on { opacity: 1; background: #fff; box-shadow: 0 16px 34px -24px rgba(3,15,30,.5), 0 0 0 1px rgba(11,55,108,.06); }
.feature-port_scope__ehEaA .hj__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e6edf4; color: var(--navy); font: 700 13px var(--ui); transition: background-color .35s, color .35s; }
.feature-port_scope__ehEaA .hj__beats li.is-past .hj__n { background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .hj__beats li.is-on .hj__n { background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .hj__bt b { display: block; font-family: var(--ui); font-weight: 700; font-size: 16.5px; color: var(--navy); }
.feature-port_scope__ehEaA .hj__bt small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.feature-port_scope__ehEaA .hj__stage { position: relative; height: clamp(450px, 36vw, 520px); border-radius: 24px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 18% 0%, #ffffff 0%, #eef3f8 55%, #e4ecf4 100%); }
.feature-port_scope__ehEaA .hj__cap { display: none; }
.feature-port_scope__ehEaA .hj__who { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; background: #fff;
  box-shadow: 0 8px 20px -14px rgba(3,15,30,.5); font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--navy); white-space: nowrap; }
.feature-port_scope__ehEaA .hj__who i { width: 16px; height: 16px; border-radius: 50%; background: var(--navy); }
.feature-port_scope__ehEaA .hj__who--cust i { background: var(--sky); }
.feature-port_scope__ehEaA .hj__who--you { left: 6%; top: 22px; }
.feature-port_scope__ehEaA .hj__drawer { position: absolute; left: 6%; top: 62px; bottom: 26px; width: 58%; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 34px 60px -34px rgba(3,15,30,.5), 0 0 0 1px rgba(11,55,108,.08); }
.feature-port_scope__ehEaA .hj__form,
.feature-port_scope__ehEaA .hj__job { position: absolute; inset: 16px 18px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature-port_scope__ehEaA .hj.is-job .hj__form { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.feature-port_scope__ehEaA .hj:not(.is-job) .hj__job { opacity: 0; transform: translateY(12px); }
.feature-port_scope__ehEaA .hj__ft { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); margin-bottom: 9px; }
.feature-port_scope__ehEaA .hj__f { display: flex; flex-direction: column; gap: 2px; min-height: 40px; justify-content: center; padding: 5px 10px; margin-bottom: 6px; border: 1px solid #dfe6ee; border-radius: 8px; transition: border-color .35s, box-shadow .35s; }
.feature-port_scope__ehEaA .hj__f small { font-family: var(--ui); font-weight: 600; font-size: 10.5px; color: var(--text-2); }
.feature-port_scope__ehEaA .hj__f span,
.feature-port_scope__ehEaA .hj__f b { font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--navy); transition: opacity .35s; }
.feature-port_scope__ehEaA .hj__f:not(.on) span,
.feature-port_scope__ehEaA .hj__f:not(.on) b { opacity: 0; }
.feature-port_scope__ehEaA .hj__f.now { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(72,172,200,.18); }
.feature-port_scope__ehEaA .hj__f--seg { flex-direction: row; align-items: center; gap: 6px; padding: 4px; }
.feature-port_scope__ehEaA .hj__f--seg b { flex: 1; text-align: center; padding: 5px 0; border-radius: 6px; background: var(--navy); color: #fff; font-size: 12px; }
.feature-port_scope__ehEaA .hj__f--seg i { flex: 1; height: 24px; border-radius: 6px; background: #eef2f6; }
.feature-port_scope__ehEaA .hj__f--items { gap: 3px; }
.feature-port_scope__ehEaA .hj__f--items span { display: block; padding-left: 10px; border-left: 2px solid #dff1f7; font-weight: 500; }
.feature-port_scope__ehEaA .hj__f--tgl { flex-direction: row; align-items: center; justify-content: space-between; min-height: 36px; }
.feature-port_scope__ehEaA .hj__f--tgl span { opacity: 1 !important; font-weight: 500; }
.feature-port_scope__ehEaA .hj__tgl { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; background: #d6dfe9; transition: background-color .3s; }
.feature-port_scope__ehEaA .hj__tgl b { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(3,15,30,.3); transition: transform .3s var(--ease); }
.feature-port_scope__ehEaA .hj__f--tgl.on .hj__tgl { background: var(--sky); }
.feature-port_scope__ehEaA .hj__f--tgl.on .hj__tgl b { transform: translateX(14px); }
.feature-port_scope__ehEaA .hj__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; font-family: var(--ui); font-weight: 700; font-size: 13px; transition: transform .15s var(--ease), background-color .3s, color .3s; }
.feature-port_scope__ehEaA .hj__btn--create { display: flex; margin-top: 8px; padding: 10px; background: var(--navy); color: #fff; }
.feature-port_scope__ehEaA .hj__btn.is-press { transform: scale(.95); }
.feature-port_scope__ehEaA .hj__jh { padding-bottom: 12px; border-bottom: 1px solid #e6edf4; }
.feature-port_scope__ehEaA .hj__jt { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .hj__jc { font-size: 13px; color: var(--text-2); }
.feature-port_scope__ehEaA .hj__st { margin-top: 8px; }
.feature-port_scope__ehEaA .hj__st span { display: none; align-items: center; padding: 4px 10px; border-radius: 999px; background: #eef2f6; font-family: var(--ui); font-weight: 700; font-size: 11.5px; color: var(--navy); }
.feature-port_scope__ehEaA .hj[data-st="sent"] .hj__st [data-v="sent"],
.feature-port_scope__ehEaA .hj[data-st="appr"] .hj__st [data-v="appr"],
.feature-port_scope__ehEaA .hj[data-st="depreq"] .hj__st [data-v="depreq"],
.feature-port_scope__ehEaA .hj[data-st="dep"] .hj__st [data-v="dep"],
.feature-port_scope__ehEaA .hj[data-st="done"] .hj__st [data-v="done"],
.feature-port_scope__ehEaA .hj[data-st="isent"] .hj__st [data-v="isent"],
.feature-port_scope__ehEaA .hj[data-st="paid"] .hj__st [data-v="paid"] { display: inline-flex; animation: feature-port_hj-pop__iwrzZ .45s var(--ease); }
.feature-port_scope__ehEaA .hj[data-st="appr"] .hj__st span,
.feature-port_scope__ehEaA .hj[data-st="dep"] .hj__st span,
.feature-port_scope__ehEaA .hj[data-st="isent"] .hj__st span { background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .hj[data-st="paid"] .hj__st span { background: #e1f3e8; color: #1d7a4a; }
/* green only for paid */
@keyframes feature-port_hj-pop__iwrzZ { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
.feature-port_scope__ehEaA .hj__pay { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .hj__bar { flex: 1; height: 8px; border-radius: 999px; background: #e6edf4; overflow: hidden; }
.feature-port_scope__ehEaA .hj__bar i { display: block; height: 100%; width: var(--paid, 0%); border-radius: inherit; background: var(--sky); transition: width .7s var(--ease), background-color .4s; }
.feature-port_scope__ehEaA .hj.is-paid .hj__bar i { background: #2e9e63; }
.feature-port_scope__ehEaA .hj__pct { min-width: 38px; text-align: right; color: var(--navy); }
.feature-port_scope__ehEaA .hj__rows li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef2f6; font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--navy);
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feature-port_scope__ehEaA .hj__rows li:not(.on) { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA .hj__rows li > span:first-of-type { flex: 1; min-width: 0; }
.feature-port_scope__ehEaA .hj__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef4f8; color: var(--sky-deep); }
.feature-port_scope__ehEaA .hj__ic svg,
.feature-port_scope__ehEaA .hj__ok svg { width: 16px; height: 16px; }
.feature-port_scope__ehEaA .hj__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .hj__chip { padding: 3px 8px; border-radius: 999px; background: #dff1f7; color: var(--sky-deep); font-style: normal; font-size: 10.5px; }
.feature-port_scope__ehEaA .hj__btn--send { padding: 7px 11px; background: var(--sky); color: var(--ink); white-space: nowrap; }
.feature-port_scope__ehEaA .hj__btn--send svg { width: 14px; height: 14px; }
.feature-port_scope__ehEaA .hj__send-b { display: none; align-items: center; gap: 4px; }
.feature-port_scope__ehEaA .hj.is-sent .hj__btn--send { background: #dff1f7; color: var(--sky-deep); }
.feature-port_scope__ehEaA .hj.is-sent .hj__send-a { display: none; }
.feature-port_scope__ehEaA .hj.is-sent .hj__send-b { display: inline-flex; }
.feature-port_scope__ehEaA .hj__rows .hj__ai { border-bottom: 0; padding: 6px 0 4px 38px; font-weight: 500; font-size: 12px; color: var(--text-2); }
.feature-port_scope__ehEaA .hj__ai i { display: grid; place-items: center; width: 18px; height: 18px; margin-left: -28px; color: var(--sky); }
.feature-port_scope__ehEaA .hj__ai i svg { width: 14px; height: 14px; }
.feature-port_scope__ehEaA .hj__stamp { position: absolute; right: 4px; bottom: 6px; padding: 3px 12px; border: 2.5px solid #2e9e63; border-radius: 8px; color: #2e9e63; font-family: var(--ui); font-weight: 800; font-size: 20px; letter-spacing: .14em;
  transform: rotate(-9deg) scale(1.5); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .25s; }
.feature-port_scope__ehEaA .hj.is-stamp .hj__stamp { transform: rotate(-9deg) scale(1); opacity: 1; }
.feature-port_scope__ehEaA .hj__phone { position: absolute; z-index: 2; right: 5%; top: 50%; width: 29%; max-width: 232px; aspect-ratio: 9 / 17; padding: 9px; border-radius: 30px; background: #0b1726;
  box-shadow: 0 40px 60px -30px rgba(3,15,30,.6); transform: translate(46px, -46%); opacity: 0; transition: transform .6s var(--ease), opacity .45s; }
.feature-port_scope__ehEaA .hj.is-job .hj__phone { transform: translate(0, -46%); opacity: 1; }
.feature-port_scope__ehEaA .hj__phone .hj__who--cust { left: 50%; top: -38px; transform: translateX(-50%); }
.feature-port_scope__ehEaA .hj__scr { position: relative; height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 18px 13px 14px; border-radius: 22px; background: #fff; overflow: hidden; }
.feature-port_scope__ehEaA .hj__co { display: flex; align-items: center; gap: 7px; font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--navy); }
.feature-port_scope__ehEaA .hj__logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--sky-deep); }
.feature-port_scope__ehEaA .hj__logo svg { width: 14px; height: 14px; }
.feature-port_scope__ehEaA .hj__doc span { display: none; font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-deep); }
.feature-port_scope__ehEaA .hj[data-ph="est"] .hj__doc [data-v="est"],
.feature-port_scope__ehEaA .hj[data-ph="dep"] .hj__doc [data-v="dep"],
.feature-port_scope__ehEaA .hj[data-ph="inv"] .hj__doc [data-v="inv"],
.feature-port_scope__ehEaA .hj[data-ph="wait"] .hj__doc [data-v="wait"] { display: inline; }
.feature-port_scope__ehEaA .hj__pjob { font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--navy); }
.feature-port_scope__ehEaA .hj__pl { display: grid; gap: 6px; }
.feature-port_scope__ehEaA .hj__pl i { display: block; height: 6px; border-radius: 3px; background: #e6edf4; }
.feature-port_scope__ehEaA .hj__pl i:nth-child(2) { width: 78%; }
.feature-port_scope__ehEaA .hj__pl i:nth-child(3) { width: 56%; }
.feature-port_scope__ehEaA .hj__pbtn { display: none; margin-top: auto; padding: 11px 8px; border-radius: 10px; background: var(--sky); color: var(--ink); text-align: center; font-family: var(--ui); font-weight: 700; font-size: 13px; transition: background-color .3s, color .3s; }
.feature-port_scope__ehEaA .hj[data-ph="est"] .hj__pbtn[data-v="est"],
.feature-port_scope__ehEaA .hj[data-ph="dep"] .hj__pbtn[data-v="dep"],
.feature-port_scope__ehEaA .hj[data-ph="inv"] .hj__pbtn[data-v="inv"] { display: block; }
.feature-port_scope__ehEaA .hj__pd { display: none; align-items: center; justify-content: center; gap: 5px; }
.feature-port_scope__ehEaA .hj__pd svg { width: 15px; height: 15px; }
.feature-port_scope__ehEaA .hj.is-done .hj__pbtn { background: #e1f3e8; color: #1d7a4a; }
.feature-port_scope__ehEaA .hj.is-done .hj__pa { display: none; }
.feature-port_scope__ehEaA .hj.is-done .hj__pd { display: inline-flex; }
.feature-port_scope__ehEaA .hj[data-ph="wait"] .hj__scr { opacity: .6; }
.feature-port_scope__ehEaA .hj__tap { position: absolute; left: 50%; bottom: 30px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: rgba(72,172,200,.4); opacity: 0; pointer-events: none; }
.feature-port_scope__ehEaA .hj.is-tap .hj__tap { animation: feature-port_hj-tap__zchlD .6s var(--ease); }
@keyframes feature-port_hj-tap__zchlD { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
.feature-port_scope__ehEaA .hj__cur { position: absolute; z-index: 4; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(3,15,30,.35));
  transform: translate(var(--cx, 50%), var(--cy, 50%)); transition: transform .6s var(--ease), opacity .3s; }
.feature-port_scope__ehEaA .hj__cur svg { display: block; width: 100%; height: 100%; }
.feature-port_scope__ehEaA .hj__cur.on { opacity: 1; }
.feature-port_scope__ehEaA .hj__more { margin-top: 18px; text-align: right; }
.feature-port_scope__ehEaA .hj__more .xlink { font-family: var(--ui); font-weight: 700; font-size: 15px; color: var(--sky-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.feature-port_scope__ehEaA .hj__more .xlink::after { content: " →"; }
@media (max-width: 900px) {
  /* phones and tablets: the steps list gives way to a caption in the stage; the customer phone becomes a slim card */
  .feature-port_scope__ehEaA .hj { grid-template-columns: minmax(0, 1fr); }
  .feature-port_scope__ehEaA .hj__beats { display: none; }
  .feature-port_scope__ehEaA .hj__stage { height: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
  .feature-port_scope__ehEaA .hj__cap { display: block; min-height: 66px; }
  .feature-port_scope__ehEaA .hj__cap span { display: none; }
  .feature-port_scope__ehEaA .hj__cap span.is-on { display: block; animation: feature-port_hj-pop__iwrzZ .4s var(--ease); }
  .feature-port_scope__ehEaA .hj__cap b { display: block; font-family: var(--ui); font-weight: 700; font-size: 16px; color: var(--navy); }
  .feature-port_scope__ehEaA .hj__cap small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
  .feature-port_scope__ehEaA .hj__who,
.feature-port_scope__ehEaA .hj__phone .hj__who--cust { position: static; transform: none; align-self: flex-start; }
  .feature-port_scope__ehEaA .hj__drawer { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 372px; }
  .feature-port_scope__ehEaA .hj__phone { position: relative; right: auto; top: auto; width: auto; max-width: none; aspect-ratio: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
    display: flex; flex-direction: column; gap: 8px; transform: none; opacity: 1; }
  .feature-port_scope__ehEaA .hj.is-job .hj__phone { transform: none; }
  .feature-port_scope__ehEaA .hj:not(.is-job) .hj__phone .hj__scr { opacity: .5; }
  .feature-port_scope__ehEaA .hj__scr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co btn" "doc btn" "job btn"; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 14px;
    box-shadow: 0 0 0 6px #0b1726, 0 18px 30px -18px rgba(3,15,30,.5); margin: 6px; }
  .feature-port_scope__ehEaA .hj__co { grid-area: co; } .feature-port_scope__ehEaA .hj__doc { grid-area: doc; } .feature-port_scope__ehEaA .hj__pjob { grid-area: job; font-size: 14px; }
  .feature-port_scope__ehEaA .hj__pl { display: none; }
  .feature-port_scope__ehEaA .hj__pbtn { grid-area: btn; margin: 0; padding: 10px 12px; font-size: 12.5px; }
  .feature-port_scope__ehEaA .hj__tap { left: auto; right: 30px; bottom: 50%; margin-bottom: -20px; }
  .feature-port_scope__ehEaA .hj__more { text-align: left; }
}
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .hj__drawer { height: 360px; }
  .feature-port_scope__ehEaA .hj__form,
.feature-port_scope__ehEaA .hj__job { inset: 12px 14px; }
  .feature-port_scope__ehEaA .hj__f { min-height: 36px; margin-bottom: 5px; }
  .feature-port_scope__ehEaA .hj__ft { font-size: 16px; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-port_scope__ehEaA .hj,
.feature-port_scope__ehEaA .hj * { transition: none !important; animation: none !important; }
}
/* the job scene, polish: the customer phone shows a mini receipt card (no amounts); phones fit the finished job */
.feature-port_scope__ehEaA .hj__pl { padding: 12px; border: 1px solid #e6edf4; border-radius: 10px; gap: 8px; }
.feature-port_scope__ehEaA .hj__pl::after { content: ""; display: block; width: 46%; height: 8px; margin-top: 4px; border-radius: 4px; background: var(--navy); opacity: .85; }
.feature-port_scope__ehEaA .hj.is-done .hj__pl::after,
.feature-port_scope__ehEaA .hj.is-paid .hj__pl::after { background: #2e9e63; }
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .hj__drawer { height: 404px; }
  .feature-port_scope__ehEaA .hj__rows li { padding: 6px 0; }
  .feature-port_scope__ehEaA .hj__ic { width: 24px; height: 24px; }
  .feature-port_scope__ehEaA .hj__rows .hj__ai { padding: 4px 0 2px 34px; font-size: 11.5px; }
  .feature-port_scope__ehEaA .hj__stamp { right: 2px; top: 52px; bottom: auto; font-size: 17px; }
  .feature-port_scope__ehEaA .hj__scr { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .feature-port_scope__ehEaA .hj__pbtn { white-space: normal; line-height: 1.25; font-size: 12px; }
  .feature-port_scope__ehEaA .hj__co { font-size: 11px; }
}
/* the form shows the choice (fixed or hourly) and that the estimate and deposit are optional */
.feature-port_scope__ehEaA .hj__f--seg em { flex: 1; display: grid; place-items: center; height: 24px; border-radius: 6px; background: #eef2f6; font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--text-2); transition: opacity .35s; }
.feature-port_scope__ehEaA .hj__f--seg:not(.on) em { opacity: 0; }
.feature-port_scope__ehEaA .hj__opt { margin-left: auto; margin-right: 10px; padding: 2px 7px; border-radius: 999px; background: #eef2f6; font-family: var(--ui); font-weight: 600; font-size: 10px; color: var(--text-2); }
.feature-port_scope__ehEaA .hj__more { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .hj__more { justify-content: flex-start; } }
/* before the estimate goes out, the customer phone waits, dimmed, so the stage is balanced from the first beat */
@media (min-width: 901px) {
  .feature-port_scope__ehEaA .hj:not(.is-job) .hj__phone { opacity: .42; transform: translate(0, -46%) scale(.96); }
}
/* ---------- "Stop being your own secretary" on phones: compact enough to be held mid-screen while it flips (it was
   taller than the screen, so it flipped at a scroll point and ran past) ---------- */
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .eve__board { padding: 16px 14px; }
  .feature-port_scope__ehEaA .eve__title { margin-bottom: 4px; }
  .feature-port_scope__ehEaA .eve__row { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
  .feature-port_scope__ehEaA .eve__time { font-size: 18px; }
  .feature-port_scope__ehEaA .eve__time small { font-size: 10px; }
  .feature-port_scope__ehEaA .eve__slot { min-height: 0; gap: 6px; }
  .feature-port_scope__ehEaA .ecard { padding: 7px 10px; }
  .feature-port_scope__ehEaA .ecard__t { font-size: 14.5px; line-height: 1.3; }
  .feature-port_scope__ehEaA .ecard__k { font-size: 11px; }
  .feature-port_scope__ehEaA .eve__pad { padding: 2px 0 4px; }
  .feature-port_scope__ehEaA .eve__pad-h { font-size: 15px; padding-top: 4px; padding-bottom: 4px; }
  .feature-port_scope__ehEaA .eve__pad .ecard { padding: 6px 8px 6px 34px; }
  .feature-port_scope__ehEaA .eve__pad .ecard::before { left: 6px; top: 9px; width: 14px; height: 14px; }
  .feature-port_scope__ehEaA .eve__pad::before { left: 26px; }
  .feature-port_scope__ehEaA .eve__pad .ecard__s { font-size: 11.5px; line-height: 1.3; }
  .feature-port_scope__ehEaA .eve__free { font-size: 17px; }
}
/* ---------- Explore on phones: a list of compact cards, glimpse left, words right (the swipe row read as cut off) ---------- */
@media (max-width: 640px) {
  .feature-port_scope__ehEaA .sexp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(24px, 6vw, 32px) 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .feature-port_scope__ehEaA .sexp__grid > .scard { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-auto-rows: min-content; -moz-column-gap: 14px; column-gap: 14px; row-gap: 4px; align-content: start; padding: 14px; }
  .feature-port_scope__ehEaA .sexp__grid > .scard > .scard__vis { grid-row: 1 / span 4; grid-column: 1; height: 96px; margin: 0; border-radius: 10px; }
  .feature-port_scope__ehEaA .sexp__grid > .scard > :not(.scard__vis) { grid-column: 2; }
  .feature-port_scope__ehEaA .sexp__grid .scard__vis .gl { zoom: .58; }
  .feature-port_scope__ehEaA .sexp__grid .scard__h { font-size: 18px; }
  .feature-port_scope__ehEaA .sexp__grid .scard__d { font-size: 13.5px; line-height: 1.4; }
  .feature-port_scope__ehEaA .sexp__grid .scard__scene { margin-top: 4px; font-size: 13px; }
  .feature-port_scope__ehEaA .sexp__grid .scard__go { display: none; }
}
/* ---------- quotes page: "Try it another way" at the end of the story (Mark, 12 Oct 2026) ---------- */
.feature-port_scope__ehEaA .jagain { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--pad) clamp(8px, 2vw, 24px); display: flex; justify-content: center; }
.feature-port_scope__ehEaA .jswitch--again { width: 100%; max-width: 760px; }
.feature-port_scope__ehEaA .jagain__p { margin: 4px 0 14px; font-size: var(--fs-sm); color: var(--text-2); }
/* ---------- the header logo, a little larger so the brand anchors the bar beside the menu (Mark, 12 Oct 2026; was 148px,
   its wordmark barely larger than the menu) — an approved change to the live header too (prompt-proleader/01-sendwork.md) ---------- */
.feature-port_scope__ehEaA .nav__logo img { width: 176px; }
.feature-port_scope__ehEaA .fbar__logo img { width: 140px; }
@media (max-width: 1279px) { .feature-port_scope__ehEaA .nav__logo img { width: 160px; } }
@media (max-width: 640px) { .feature-port_scope__ehEaA .nav__logo img { width: 124px; } }
@media (max-width: 360px) { .feature-port_scope__ehEaA .nav__logo img { width: 96px; } }
/* ---------- homepage hero stars: only over the open sky top-left (Mark, 12 Oct 2026: they covered the building and the
   people on smaller screens). Wide screens: a small patch above the roofline; below 900px the photo's crop has no sky. ---------- */
.feature-port_scope__ehEaA .hero__stars { width: min(27%, 400px); height: 24%; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .hero__stars { display: none; } }
/* the market pages: each photo frames the sky differently (palms, buildings) and longer headlines start higher — no stars */
.feature-port_scope__ehEaA[data-market] .hero__stars { display: none; }
/* ---------- "Stop being your own secretary" on laptops: compact enough to be held mid-screen while it flips (Mark, 12 Oct
   2026: it was ~800px tall, so on 1366×768, 1536×864 and 1280×800 screens it flipped at a scroll point and moved on) ---------- */
@media (min-width: 641px) {
  .feature-port_scope__ehEaA .eve__board { padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 34px); }
  .feature-port_scope__ehEaA .eve__row { padding: 8px 0; }
  .feature-port_scope__ehEaA .eve__slot { min-height: 38px; gap: 6px; }
  .feature-port_scope__ehEaA .eve__time { font-size: clamp(21px, 1.6vw, 28px); }
  .feature-port_scope__ehEaA .ecard { padding: 7px 12px; }
  .feature-port_scope__ehEaA .eve__pad { padding: 2px 0 4px; }
  .feature-port_scope__ehEaA .eve__pad-h { padding-top: 5px; padding-bottom: 5px; }
  .feature-port_scope__ehEaA .eve__pad .ecard { padding-top: 6px; padding-bottom: 6px; }
}
/* the toggle travels with the evening when both are held; the boss-mode ask still follows the mode */
.feature-port_scope__ehEaA .eve-wrap { display: block; }
.feature-port_scope__ehEaA.js .eve-wrap:has(.eve[data-mode="alone"]) ~ .eve__cta,
.feature-port_scope__ehEaA.js .hold:has(.eve[data-mode="alone"]) ~ .eve__cta { opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
/* ---------- Explore glimpses play as each card scrolls in (js/site.js toggles .is-in; resets once off screen) ---------- */
/* the job: its lines draw, then Estimate → Deposit → Paid light one after another */
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl i.ln { transition: width .6s var(--ease); }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl i.ln { width: 0; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl i.ln:nth-child(2) { transition-delay: .12s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl__steps li { transition: background-color .35s, color .35s, transform .35s var(--ease); }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl__steps li { background: #eef2f6; color: var(--text-2); transform: scale(.9); }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__steps li:nth-child(1) { transition-delay: .35s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__steps li:nth-child(2) { transition-delay: .75s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__steps li:nth-child(3) { transition-delay: 1.15s; }
/* the month: jobs and the repeat visits pop onto it */
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl__month i.job,
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl__month i.rep { transition: transform .4s cubic-bezier(.3,1.5,.5,1), opacity .3s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl__month i.job,
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl__month i.rep { transform: scale(.3); opacity: 0; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__month i:nth-child(3) { transition-delay: .25s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__month i:nth-child(5) { transition-delay: .45s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__month i:nth-child(10) { transition-delay: .65s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__month i:nth-child(12) { transition-delay: .85s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__month i:nth-child(14) { transition-delay: 1.05s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__month i:nth-child(17) { transition-delay: 1.25s; }
/* the record: the customer, then the jobs land one by one */
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl__who,
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl__jobs li { transition: opacity .4s, transform .45s var(--ease); }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl__who { opacity: 0; transform: translateY(6px); }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl__jobs li { opacity: 0; transform: translateX(-10px); }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__jobs li:nth-child(1) { transition-delay: .35s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__jobs li:nth-child(2) { transition-delay: .6s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__jobs li:nth-child(3) { transition-delay: .85s; }
/* who it's for: the three trades come in one after another */
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl--wall img { transition: opacity .5s, transform .6s var(--ease); }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl--wall img { opacity: 0; transform: translateY(12px) scale(1.06); }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl--wall img:nth-child(2) { transition-delay: .2s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl--wall img:nth-child(3) { transition-delay: .4s; }
/* pricing: the three plans rise, then the free trial */
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl__cols i { height: 6% !important; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__cols i:nth-child(2) { transition-delay: .15s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl__cols i:nth-child(3) { transition-delay: .3s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl__pill { transition: opacity .4s .7s, transform .4s .7s var(--ease); }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl__pill { opacity: 0; transform: translateY(6px); transition-delay: 0s; }
/* questions: a question, its answer, the next question */
.feature-port_scope__ehEaA .gl-motion .scard--vis .gl--faq > p { transition: opacity .4s, transform .45s var(--ease); }
.feature-port_scope__ehEaA .gl-motion .scard--vis:not(.is-in) .gl--faq > p { opacity: 0; transform: translateY(8px); }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl--faq > p:nth-child(2) { transition-delay: .3s; }
.feature-port_scope__ehEaA .gl-motion .scard--vis.is-in .gl--faq > p:nth-child(3) { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA .gl-motion .scard--vis * { transition: none !important; } }
/* ---------- the footer mark in its white circle, as in the header logo (Mark, 12 Oct 2026) — every SendWork page ---------- */
.feature-port_scope__ehEaA .foot__mark { box-sizing: border-box; width: 72px; height: 72px; padding: 11px 12px 12px; border-radius: 50%; background: #fff; -o-object-fit: contain; object-fit: contain;
  box-shadow: 0 0 0 3px rgba(72,172,200,.35), 0 12px 28px -14px rgba(0,0,0,.6); }
/* Current audience Source track.css, after pages/site in the original order.
   Values are driven by the mount-owned literal track.js closure. */
.feature-port_scope__ehEaA[data-audience-kind] .track.tk li { isolation: isolate; transition: none; opacity: var(--tko, 1); transform: translateY(var(--tky, 0)); }
.feature-port_scope__ehEaA[data-audience-kind].motion .track.tk li:not(.on) { opacity: var(--tko, 1); }
.feature-port_scope__ehEaA[data-audience-kind] .track.tk li::after, .feature-port_scope__ehEaA[data-audience-kind].motion .track.tk li:not(.on)::after { opacity: var(--tkd, 1); transition: none; }
.feature-port_scope__ehEaA[data-audience-kind] .track.tk .tk-bg { position: absolute; z-index: -1; inset: -16px -12px -16px -16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 44px -24px rgba(11, 55, 108, .4); opacity: var(--tkn, 0); pointer-events: none; }
.feature-port_scope__ehEaA[data-audience-kind] .track.tk .track__line i { transition: none; }
.feature-port_scope__ehEaA[data-audience-kind] .tk-puck { position: absolute; left: 0; top: 50%; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(72, 172, 200, .25), 0 4px 10px rgba(11, 55, 108, .3); pointer-events: none; opacity: 0; }
.feature-port_scope__ehEaA[data-audience-kind] .tk-puck::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sky); opacity: 0; animation: feature-port_tk-ring__W4_Bn 2.4s ease-out infinite; }
@keyframes feature-port_tk-ring__W4_Bn { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
.feature-port_scope__ehEaA[data-audience-kind] .track.tk .track__rail { padding-top: 6px; }
@media (max-width: 900px) {
  .feature-port_scope__ehEaA[data-audience-kind] .track.tk li { transform: none; }
  .feature-port_scope__ehEaA[data-audience-kind] .track.tk .tk-bg { inset: -6px -8px 4px 24px; }
  .feature-port_scope__ehEaA[data-audience-kind] .tk-puck { left: 50%; top: 0; }
  .feature-port_scope__ehEaA[data-audience-kind] .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-port_scope__ehEaA[data-audience-kind].motion [data-rv] { transition-duration: .5s; transition-delay: min(var(--d, 0s), .15s); }
  .feature-port_scope__ehEaA[data-audience-kind] .sk-hand { transition-duration: .45s, .2s; }
}
@media (max-width: 640px) { .feature-port_scope__ehEaA[data-audience-kind] .kcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 340px) { .feature-port_scope__ehEaA[data-audience-kind].motion [data-rv] { transition-duration: .3s; transition-delay: 0s; } }
.feature-port_scope__ehEaA[data-audience-kind] .sk-tl:not(.is-hand) .sk-tl__hand { transition: opacity .3s; }
@media (hover: none) {
  .feature-port_scope__ehEaA[data-audience-kind] .pillars li:hover, .feature-port_scope__ehEaA[data-audience-kind] .rsec .roles li:hover { transform: none; box-shadow: none; }
  .feature-port_scope__ehEaA[data-audience-kind] .pillars li, .feature-port_scope__ehEaA[data-audience-kind] .rsec .roles li { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .feature-port_scope__ehEaA[data-audience-kind] .tk-puck::after { animation: none; } }
/* Only Source inline links lack an authored target minimum; other explicit
   jump, rail, tab and Claim sizes retain their own Source declarations. */
@media (pointer: coarse) {
  .feature-port_scope__ehEaA[data-audience-kind] .xlink, .feature-port_scope__ehEaA[data-audience-kind] .fq-ask__mail { min-height: 0; min-width: 0; }
}
/* Source styles.css phone bar: audience roots receive the same narrow cascade. */
@media (max-width: 400px) { .feature-port_scope__ehEaA[data-audience-kind] .mbar__text { font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 340px) {
  .feature-port_scope__ehEaA[data-audience-kind] .mbar__text { display: none; }
  .feature-port_scope__ehEaA[data-audience-kind].js .mbar { padding: 6px; }
  .feature-port_scope__ehEaA[data-audience-kind] .mbar .btn { flex: 1 1 auto; }
}
/* Current Source sk.css, original post-site cascade; owning Feature kind only. */
/* SendWork — /features/scheduling-and-recurring-work polish (18 Oct 2026, Mark: "slicker, wow factor", from the brands).
   Its own file so the shared css/pages.css stays as the Advisor's slices compare it; loads after css/site.css on this page
   only. Fold into css/pages.css once the slices are in.
     .skb       one full-width photo (the Tuesday pool visit) with the plan's cards rising over it (js/schedule.js "band")
     .sk-team   the team's week on a navy panel (the .npanel look), the white app window floating on it
     Dani       a fourth person on the Timeline and Team Schedule, so the week reads like a real business's
   Motion moves position and opacity only; with motion off (<html>.still) the cards simply sit in place. */

/* ---------- the photo band ---------- */
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb { position: relative; isolation: isolate; overflow: clip; margin: clamp(72px, 9vw, 120px) var(--inset) 0;
  height: clamp(520px, 86vh, 820px); border-radius: var(--r); background: #0b2a4a; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__shot { position: absolute; inset: -8% 0; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__shot img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 60% 50%; object-position: 60% 50%; will-change: transform; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 15, 30, .42) 0%, rgba(3, 15, 30, .12) 38%, transparent 60%),
    linear-gradient(0deg, rgba(3, 15, 30, .28) 0%, transparent 34%); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__cards { position: absolute; z-index: 1; left: clamp(20px, 6vw, 104px); bottom: clamp(28px, 5vw, 80px);
  width: min(380px, calc(100% - 40px)); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px 12px 12px; border-radius: 14px;
  background: #fff; color: var(--navy); font-family: var(--ui); box-shadow: 0 26px 50px -24px rgba(3, 15, 30, .6), 0 0 0 1px rgba(11, 55, 108, .06); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c:nth-child(3) { margin-left: clamp(16px, 2.6vw, 40px); margin-right: calc(-1 * clamp(16px, 2.6vw, 40px)); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c:nth-child(4) { margin-left: clamp(6px, 1vw, 14px); margin-right: calc(-1 * clamp(6px, 1vw, 14px)); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c > span { flex: 1; min-width: 0; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c--k { justify-self: start; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(3, 15, 30, .74); color: #fff;
  font-size: 13.5px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); backdrop-filter: blur(8px); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c--k svg { width: 16px; height: 16px; color: var(--sky); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #e3f2f8; color: var(--sky-deep); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__ic svg { width: 20px; height: 20px; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__ic--mail { background: #e3f5ea; color: #1f6b43; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__ok { flex: none; padding: 3px 10px; border-radius: 999px; background: #e3f5ea; color: #1f6b43; font-style: normal; font-size: 11.5px; font-weight: 800; }
@media (max-width: 900px) {
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb { height: clamp(420px, 62vh, 540px); }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__shot img { -o-object-position: 86% 50%; object-position: 86% 50%; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb::after { background: linear-gradient(0deg, rgba(3, 15, 30, .5) 0%, rgba(3, 15, 30, .1) 45%, transparent 65%); }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__cards { left: 14px; bottom: 14px; width: min(340px, calc(100% - 28px)); gap: 8px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c { gap: 10px; padding: 10px 12px 10px 10px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c:nth-child(3), [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c:nth-child(4) { margin-left: 0; margin-right: 0; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c b { font-size: 13.5px; } [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c small { font-size: 12px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__ic { width: 34px; height: 34px; }
}
@media (max-width: 340px) { [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .skb__c small { display: none; } }

/* ---------- the team's week, on navy ---------- */
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA section.sec.sk-team { position: relative; isolation: isolate; margin-top: clamp(56px, 7vw, 100px);
  padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA section.sec.sk-team::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(50% - 50vw + var(--inset)); right: calc(50% - 50vw + var(--inset)); border-radius: var(--r);
  background: radial-gradient(40% 50% at 80% 60%, rgba(72, 172, 200, .2), transparent 70%),
    radial-gradient(120% 90% at 85% 0%, #124a86 0%, var(--navy) 42%, #072a55 100%); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .label { color: #9fd3e3; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .h2 { color: var(--white); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sec__lead { color: var(--on-ink-2); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl { border-color: transparent; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team + .band { margin-top: clamp(56px, 7vw, 100px); }

/* ---------- the fourth person ---------- */
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-av--d { background: #3d8a5f; }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-tl__pane--1 .sk-tl__g { grid-template-rows: auto repeat(5, minmax(0, 1fr)); }
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-ts__g { grid-template-columns: 52px repeat(4, minmax(0, 1fr)); }
/* twice the blocks: a quicker stagger, so the whole week is in within about a second and a quarter (was 3 s) */
[data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-blk, [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl__more { transition-delay: calc(.2s + var(--i) * .018s); }
/* the fuller week still fits a 1280×800 laptop while it is held (window ≤ 700px): tighter blocks, a shorter hour */
@media (min-width: 901px) {
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl__pane { padding: 10px 14px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl__pane--1 .sk-tl__c { padding: 4px 3px; gap: 3px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl__pane--1 .sk-blk { padding: 4px 7px; font-size: 11.5px; line-height: 1.25; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl .sk-blk small { margin-top: 0; font-size: 10.5px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl__pane--1 .sk-tl__who { padding: 6px 8px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl__more { line-height: 1.2; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-ts__g { --hh: 44px; margin-top: 6px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl__bar { padding: 9px 14px; }
  [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-team .sk-tl figcaption { padding-bottom: 10px; }
}
@media (max-width: 900px) { [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-ts__g { grid-template-columns: 34px repeat(4, minmax(0, 1fr)); gap: 0 4px; } [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-ts__who { gap: 4px; font-size: 12px; } [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-ts__who .sk-av { width: 20px; height: 20px; font-size: 10px; } }
@media (max-width: 340px) { [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-ts__who .sk-av { display: none; } [data-feature-page="scheduling-and-recurring-work"] .feature-port_scope__ehEaA .sk-ts__b { font-size: 9.5px; padding: 2px 3px; } }


/* Current Source wr.css, original post-site cascade; owning Feature kind only. */
/* SendWork — the Work Record (18 Oct 2026, Mark: from the brands — "a crucial if not significant selling point"; every
   finished job keeps one, sent to the customer on request or at will). Its own file so the shared css/pages.css is left as
   the Advisor's slices compare it; loads after css/site.css on /features/customer-records-and-history.
   A navy panel (the .npanel look) with the record as a white card. Motion (js/records.js) moves position and opacity only:
   the "after" photo slides in under a fixed frame (two opposite translates), the ticks, rows and the email fade and rise.
   With motion off (<html>.still) or reduced motion everything shows finished. */

[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA section.wrs { position: relative; isolation: isolate; overflow: clip; margin: clamp(56px, 7vw, 100px) var(--inset) 0;
  padding: clamp(56px, 7vw, 110px) var(--pad); border-radius: var(--r);
  background: radial-gradient(120% 90% at 85% 0%, #124a86 0%, var(--navy) 42%, #072a55 100%); color: var(--on-ink); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA section.wrs::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 78% 55%, rgba(72, 172, 200, .22), transparent 70%); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 84px); align-items: center; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs .label { color: #9fd3e3; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs .h2 { margin-top: 10px; color: var(--white); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs .sec__lead { color: var(--on-ink-2); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs__ticks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs__ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--white);
  font-family: var(--ui); font-weight: 600; font-size: var(--fs-sm); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs__ticks svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(72, 172, 200, .2); color: var(--sky); }

/* the record */
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr { position: relative; margin: 0; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__card { position: relative; display: grid; gap: 11px; padding: clamp(14px, 1.5vw, 20px); border-radius: 16px; background: #fff;
  color: var(--text); font-family: var(--ui); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__id { margin: 0; min-width: 0; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__id small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-deep); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__id b { display: block; margin-top: 2px; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.2; color: var(--navy); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__id span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__state { flex: none; display: grid; margin: 0; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__state > span { grid-area: 1 / 1; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__s0 { background: #fdf0dc; color: #8a5a12; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__s1 { background: #e3f5ea; color: #1f6b43; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__s1 svg { width: 12px; height: 12px; }

[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__ba { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 2.15 / 1; background: var(--panel-light); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center 58%; object-position: center 58%; display: block; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__after, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__afterin { position: absolute; inset: 0; overflow: hidden; }
/* the "after" sits under a frame that slides in from the right; its photo slides the other way, so it stays put */
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__after { transform: translateX(var(--wx, 50%)); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__afterin { transform: translateX(calc(-1 * var(--wx, 50%))); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__wipe { position: absolute; inset: 0; pointer-events: none; transform: translateX(var(--wx, 50%)); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__wipe::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 0 18px rgba(255, 255, 255, .7); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__wipe::after { content: ""; position: absolute; left: -15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b376c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__tag { position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(3, 15, 30, .62); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; backdrop-filter: blur(4px); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__tag--b { left: 10px; } [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__tag--a { right: 10px; }

[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__l { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 650; color: var(--navy); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__l time { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__ck { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2f9e62; color: #fff; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__ck svg { width: 13px; height: 13px; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__dl div { padding: 8px 12px; border-radius: 10px; background: var(--light); box-shadow: inset 0 0 0 1px var(--line); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__dl dt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__dl dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 750; color: var(--navy); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__note { margin: 0; padding: 8px 12px; border-left: 3px solid var(--sky); border-radius: 0 10px 10px 0; background: #eef6fa;
  font-size: 13px; line-height: 1.5; color: var(--text); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__note b { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-deep); margin-right: 4px; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__opt { font-size: 12px; font-weight: 700; color: var(--text-2); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__btns { display: inline-flex; flex-wrap: wrap; gap: 8px; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__keep, [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__send { padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 800; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__keep { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__send { color: #fff; background: var(--navy); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__hand { z-index: 6; }

/* the customer's email, tucked under the record's corner */
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mail { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; -moz-column-gap: 12px; column-gap: 12px;
  width: min(300px, 84%); margin: -26px 18px 0 auto; padding: 11px 13px; border-radius: 14px; background: #fff; font-family: var(--ui);
  box-shadow: 0 0 0 1px var(--line), 0 26px 46px -18px rgba(0, 0, 0, .6); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mail p { margin: 0; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__from { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; color: var(--text-2); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mh { grid-column: 1; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--navy); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__ms { grid-column: 1; grid-row: 3; font-size: 12px; color: var(--text-2); }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mb { grid-column: 2; grid-row: 2 / 4; padding: 7px 11px; border-radius: 8px; background: var(--sky); color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
[data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr .cr-cap { margin-top: 14px; color: var(--on-ink-2); }

@media (max-width: 900px) {
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wrs__grid { grid-template-columns: minmax(0, 1fr); }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA section.wrs { padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
}
/* phones: compact enough that the whole record (and the email under it) fits the screen, so every change plays while it
   is seen (Mark, 15–16 Oct 2026: "show the movements before scrolling on") */
@media (max-width: 900px) {
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__card { gap: 9px; padding: 12px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__id b { font-size: 17px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__id span { font-size: 11.5px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__ba { aspect-ratio: 2.3 / 1; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__l li { padding: 5px 0; gap: 8px; font-size: 12.5px; line-height: 1.3; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__l time { font-size: 11px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__dl div { padding: 6px 10px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__dl dd { font-size: 12.5px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__note { display: none; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__act { padding-top: 9px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__opt { flex-basis: 100%; font-size: 11px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__btns { width: 100%; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__btns > * { flex: 1; text-align: center; padding: 8px 10px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mail { width: auto; margin: -16px 10px 0; padding: 9px 11px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mh { font-size: 14px; }
}
@media (max-width: 340px) {
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__top { flex-direction: column-reverse; gap: 6px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__state > span { justify-self: start; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__l li { grid-template-columns: auto minmax(0, 1fr); }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__l time { grid-column: 2; margin-top: -3px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__dl { grid-template-columns: 1fr; gap: 6px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__btns > * { font-size: 12px; padding: 7px 6px; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mail { grid-template-columns: minmax(0, 1fr); }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mb { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}
/* desktop: the email and the caption sit outside the record's flow, so the held row is just the record and settles clear of
   the floating bar (js/hold.js centres what it measures) */
@media (min-width: 901px) {
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__mail { position: absolute; right: -22px; bottom: -64px; width: min(300px, 70%); margin: 0; }
  [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr .cr-cap { position: absolute; left: 0; top: calc(100% + 16px); margin: 0; max-width: 60%; }
}
/* short laptop screens: the note steps aside so the record holds whole in the middle */
@media (min-width: 901px) and (max-height: 820px) { [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__note { display: none; } [data-feature-page="customer-records-and-history"] .feature-port_scope__ehEaA .wr__ba { aspect-ratio: 2.4 / 1; } }


/* Framework-only blank flow left by the omitted header stand-in. */
.feature-port_scope__ehEaA .phero__frame::before { content: ""; flex: 0 0 88px; }
@media (max-width: 900px) { .feature-port_scope__ehEaA .phero__frame::before { flex-basis: 75px; } }

/* Audience Source nav substitution: current measured header, with an unset-only
   framework fallback. Pre-ready copy retains natural flow until Source fits it. */
/* Match the owning live chrome rest minima; content taller than either minimum remains measured. */
.feature-port_scope__ehEaA [data-audience-hero] { --audience-header-rest-min: 86px; }
.feature-port_scope__ehEaA [data-audience-hero] .phero__frame::before { flex-basis: var(--audience-header-height, 75px); }
@media (min-width: 901px) {
  .feature-port_scope__ehEaA [data-audience-hero] { --audience-header-rest-min: 88px; }
  .feature-port_scope__ehEaA:not([data-port-ready]) [data-audience-hero] .phero__frame { height: auto; }
  .feature-port_scope__ehEaA [data-audience-hero] .phero__frame::before {
    flex: 0 1 auto;
    height: var(--audience-header-height, 88px);
    min-height: calc(var(--audience-header-height, 88px) - var(--audience-header-height, 0px));
    padding-block: 22px;
  }
}
@media (min-width: 901px) and (max-height: 860px) {
  .feature-port_scope__ehEaA [data-audience-hero] .phero__frame::before { padding-block: 16px; }
}
/* Inline Source generator rules, kept local to their actual audience consumers. */
@media (max-width: 640px) {
  [data-audience-page="solo-contractors"] .feature-port_scope__ehEaA .shot { padding-top: 64px; }
  [data-audience-page="solo-contractors"] .feature-port_scope__ehEaA .jcard li:first-child,
  [data-audience-page="teams"] .feature-port_scope__ehEaA .jcard li:first-child { display: grid; }
  [data-audience-page="solo-contractors"] .feature-port_scope__ehEaA .shot img,
  [data-audience-page="teams"] .feature-port_scope__ehEaA .shot img { transform-origin: 50% 0; }
}
@media (max-width: 400px) {
  [data-audience-page] .feature-port_scope__ehEaA .mbar__text { font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 340px) {
  [data-audience-page] .feature-port_scope__ehEaA .mbar__text { display: none; }
  [data-audience-page] .feature-port_scope__ehEaA.js .mbar { padding: 6px; }
  [data-audience-page] .feature-port_scope__ehEaA .mbar .btn { flex: 1 1 auto; }
}

/* Quotes replaces only its omitted stand-in nav with the measured live header. */
.feature-port_scope__ehEaA [data-quote-hero] .phero__frame::before { flex-basis: var(--quote-header-height, 75px); }
@media (min-width: 901px) {
  /* Before the existing kit is ready, let un-fitted copy remain in page flow. */
  .feature-port_scope__ehEaA:not([data-port-ready]) [data-quote-hero] .phero__frame { height: auto; }
  /* Match the Source nav's shrinking allocation while retaining the measured live-header input. */
  .feature-port_scope__ehEaA [data-quote-hero] .phero__frame::before {
    flex: 0 1 auto;
    height: var(--quote-header-height, 88px);
    /* Keep the framework fallback only until the measured value exists. */
    min-height: calc(var(--quote-header-height, 88px) - var(--quote-header-height, 0px));
    padding-block: 22px;
  }
}
@media (min-width: 901px) and (max-height: 860px) {
  .feature-port_scope__ehEaA [data-quote-hero] .phero__frame::before { padding-block: 16px; }
}

/* Scheduling and Records omit the same stand-in: reserve only their measured live
   header, with the existing responsive fallback until hydration supplies it. */
/* The owning Feature chrome's normal inner minimum (public-page-shell.module.css),
   independent of its compact paint state; actual larger wrapping is measured. */
:where([data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA :is(.phero--sk, .phero--np) { --feature-header-rest-min: 88px; }
@media (max-width: 900px) {
  :where([data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA :is(.phero--sk, .phero--np) { --feature-header-rest-min: 86px; }
}
:where([data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA :is(.phero--sk, .phero--np) .phero__frame::before { flex-basis: var(--feature-header-height, 75px); }
@media (min-width: 901px) {
  :where([data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA:not([data-port-ready]) :is(.phero--sk, .phero--np) .phero__frame { height: auto; }
  :where([data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA :is(.phero--sk, .phero--np) .phero__frame::before {
    flex: 0 1 auto;
    height: var(--feature-header-height, 88px);
    min-height: calc(var(--feature-header-height, 88px) - var(--feature-header-height, 0px));
    padding-block: 22px;
  }
}
@media (min-width: 901px) and (max-height: 860px) {
  :where([data-feature-page="scheduling-and-recurring-work"], [data-feature-page="customer-records-and-history"]) .feature-port_scope__ehEaA :is(.phero--sk, .phero--np) .phero__frame::before { padding-block: 16px; }
}

/* French phone text: let the existing cards wrap their full labels instead of cutting ink at a hidden edge. */
@media (max-width: 900px) {
  .feature-port_scope__ehEaA[lang="fr"] .tmail--f .tmail__body,
  .feature-port_scope__ehEaA[lang="fr"] .tmail--h .tmail__body { grid-template-columns: minmax(0, 1fr); }
  .feature-port_scope__ehEaA[lang="fr"] .sset--app .sa__mt { flex-wrap: wrap; }
  .feature-port_scope__ehEaA[lang="fr"] .sset--app .sa__mt > span { max-width: 100%; }
  .feature-port_scope__ehEaA[lang="fr"] .sset--app .sa__bd i { white-space: normal; }
  .feature-port_scope__ehEaA[lang="fr"] .kview__tabs { width: 100%; }
  .feature-port_scope__ehEaA[lang="fr"] .kview__tab { min-width: 0; padding-inline: 4px; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 350px) {
  .feature-port_scope__ehEaA[lang="fr"] .sk-mail__body dl { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .feature-port_scope__ehEaA[lang="fr"] .sk-mail__body dd { margin-bottom: 6px; overflow-wrap: anywhere; }
  .feature-port_scope__ehEaA[lang="fr"] .cr-filters { flex-wrap: wrap; }
  .feature-port_scope__ehEaA[lang="fr"] .jcard__top { flex-wrap: wrap; }
  .feature-port_scope__ehEaA[lang="fr"] .sk-ts__who { gap: 5px; }
  .feature-port_scope__ehEaA[lang="fr"] .jd--m .psum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-port_scope__ehEaA[lang="fr"] .jd--m .psum > div { padding-inline: 6px; }
  .feature-port_scope__ehEaA[lang="fr"] .jd--m .psum b { font-size: clamp(17px, 6vw, 21px); }
  .feature-port_scope__ehEaA[lang="fr"] .sset--app .sa__btn { font-size: 11px; }
  .feature-port_scope__ehEaA[lang="fr"] .sset--app .sa__btn > span { min-width: 0; overflow-wrap: anywhere; }

  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app {
    grid-template-columns: minmax(0, 1fr);
    overflow-wrap: normal;
  }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tform__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tf__iv {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tf__entries {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .jd__savebar,
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tf__modes,
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tf__sumg small {
    flex-wrap: wrap;
  }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app [data-m] {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tform__list li {
    grid-template-columns: minmax(0, 1fr) 40px;
    row-gap: 0;
  }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tform__list li > :nth-child(1) { grid-area: 1 / 1; }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tform__list li > :nth-child(2) { grid-area: 2 / 1 / auto / -1; }
  .feature-port_scope__ehEaA[lang="fr"] .jd__time .tform--app .tform__list li > :nth-child(3) { grid-area: 1 / 2; }
}