/* 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; }
/* 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. */
/* 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 .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); }
  .feature-port_scope__ehEaA :lang(fr) .phero--wall .phero__h,
.feature-port_scope__ehEaA :lang(es) .phero--wall .phero__h,
.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; }
/* =========================================================
   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; } }
/* =========================================================
   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; } }
/* 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); }
/* 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; } }

/* 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; }
}