/* ── Marketing landing page ────────────────────────────────────────────────
   Tokens mirror frontend/src/theme.css (the SPA login + dashboard) so a
   visitor arriving from SEO meets the SAME product they see after signing in:
   Inter, Stripe indigo, soft layered shadows, blueprint line-art motif.
   Scoped to --m-* so the NiceGUI shell tokens in shared.py stay untouched. */
:root{
  /* White page, grey cards: the contrast now lives in the card, not the
     background. --m-panel is the card grey. */
  --m-bg:#ffffff; --m-surf:#FAFAFA; --m-surf-2:#F0F0F0;
  --m-panel:#F2F2F2; --m-panel-2:#E6E6E6;
  --m-ink:#000000; --m-2nd:#3D3D3D; --m-muted:#6E6E6E;
  --m-line:#DDDDDD; --m-line-2:#C4C4C4;
  --m-acc:#000000; --m-acc-hover:#262626; --m-acc-press:#404040;
  --m-acc-bg:#EFEFEF; --m-acc-text:#000000; --m-acc-contrast:#FFFFFF;
  --m-ok:#1a7f5a; --m-ok-bg:#ebf7f1;
  --m-warn:#bb5a08; --m-warn-bg:#fdf3ea;
  --m-late:#df1b41; --m-late-bg:#fdf0f3;
  --m-blue:#3d63dd;
  /* Brand identity colour, separate from --m-acc (the interactive blue): the
     wordmark and mark are identity, buttons and links are affordances. */
  --m-brand:#000000;
  /* Hero bloom, warm pink. Three stops so the falloff stays smooth. */
  /* Preview cards mirror the SPA's .card exactly (frontend/src/theme.css):
     thin blue edge, translucent white, 8px radius. */
  --m-cardline:#8c93f0; --m-cardbg:rgba(255,255,255,.72);
  --m-glow-1:rgba(0,0,0,.06);
  --m-glow-2:rgba(0,0,0,.04);
  --m-glow-3:rgba(0,0,0,.02);
  --m-sh-sm:0 1px 1px rgba(0,0,0,.03),0 2px 5px rgba(60,66,87,.05);
  --m-sh-md:0 2px 5px rgba(60,66,87,.08),0 1px 1px rgba(0,0,0,.06);
  --m-sh-lg:0 4px 6px -1px rgba(60,66,87,.10),0 15px 35px -5px rgba(60,66,87,.12),0 5px 15px rgba(0,0,0,.06);
}
body.body--dark{
  --m-bg:#000000; --m-surf:#0E0E0E; --m-surf-2:#161616;
  --m-panel:#141414; --m-panel-2:#1E1E1E;
  --m-ink:#FFFFFF; --m-2nd:#C9C9C9; --m-muted:#9A9A9A;
  --m-line:#2E2E2E; --m-line-2:#444444;
  --m-brand:#FFFFFF;
  --m-acc:#FFFFFF; --m-acc-hover:#E6E6E6; --m-acc-press:#CFCFCF;
  --m-acc-bg:#1E1E1E; --m-acc-text:#FFFFFF; --m-acc-contrast:#000000;
  --m-ok-bg:#0d1f18; --m-warn-bg:#251708; --m-late-bg:#2a1119;
  --m-cardline:#3d4270; --m-cardbg:rgba(26,29,39,.66);
  --m-glow-1:rgba(255,255,255,.10);
  --m-glow-2:rgba(255,255,255,.06);
  --m-glow-3:rgba(255,255,255,.03);
  --m-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --m-sh-md:0 2px 8px rgba(0,0,0,.45);
  --m-sh-lg:0 12px 32px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
/* Reserve the scrollbar gutter on BOTH sides: without it the classic
   scrollbar takes its width out of the right margin only, and the hero
   reads as off-centre even though its padding is symmetric. */
html{scroll-behavior:smooth;scrollbar-gutter:stable both-edges}
/* NiceGUI's body is a cream default. .m-page covers it, but the gutters
   reserved above sit OUTSIDE .m-page, so the cream showed as two strips
   down the edges of an otherwise white page. */
/* !important because Quasar's own body rule loads after this stylesheet
   and wins on order; this is the one place the marketing pages have to
   out-rank the app framework. */
html,body{background:var(--m-bg) !important}
/* NiceGUI nests page content in an unclassed flex child of .nicegui-content.
   A flex item defaults to min-width:auto and will not shrink below its
   content's min-content width, so the whole page scrolled sideways on mobile
   (450px of layout inside a 390px viewport). Capping the item rather than
   changing .nicegui-content's display keeps NiceGUI's own layout intact. */
.nicegui-content>*{min-width:0;max-width:100%}
.m-page{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--m-ink);background:var(--m-bg);min-height:100vh;line-height:1.55;
  -webkit-font-smoothing:antialiased;width:100%;position:relative;z-index:0;
  overflow-x:clip}
.m-page a{text-decoration:none;color:inherit}
.m-page h1,.m-page h2,.m-page h3{margin:0;letter-spacing:-.021em}
.m-page p{margin:0;color:var(--m-2nd)}

/* ── Nav ── */
.m-nav{position:sticky;top:0;z-index:50;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;padding:0 32px;height:60px;
  background:color-mix(in srgb,var(--m-bg) 96%,transparent);
  backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--m-line)}
/* .m-page needed: `.m-page a{color:inherit}` above outranks a bare .m-brand. */
/* The WORDMARK, and the only place on the site that uses Poppins.
   The brand pack specifies Poppins Bold for it; the body text is DM Sans and
   stays DM Sans. A logo is a fixed piece of artwork rendered as live text, so
   the fallback chain matters more than usual: if Poppins does not load, this
   lands on the same DM Sans the rest of the page is already using rather than
   on a system serif that would read as a different company. */
.m-page .m-brand{display:flex;align-items:center;
  font-family:'Poppins','DM Sans',system-ui,sans-serif;
  /* 19px -> 22px (Juanjo, 2026-08-24). The dog mark is sized in em
     (.ovs-nav-mark, height:1.05em) so it grows with the word and the lockup
     keeps its proportions rather than the glyph being left behind. */
  font-weight:700;font-size:24.2px;
  /* Poppins is geometric and sets wider than DM Sans at the same size; the
     pack's wordmark is tightly tracked, so the negative tracking goes a step
     further than the -.01em this carried in the old face. */
  letter-spacing:-.02em;color:var(--m-brand)}
/* Links sit next to the brand, not centred in the bar - the 44px gap matches
   the SPA login nav (login.css .ovs-login-nav-links). */
.m-nav-links{display:flex;gap:28px;justify-content:flex-start;margin-left:44px}
.m-nav-links a{color:var(--m-ink);font-size:16.5px;font-weight:500;transition:color 150ms}
.m-nav-links a:hover{color:var(--m-acc)}
.m-nav-cta{display:flex;gap:10px;align-items:center;justify-content:flex-end}
@media(max-width:860px){.m-nav-links{display:none}.m-nav{padding:0 18px}}

/* ── Buttons ── */
.m-btn{display:inline-flex;align-items:center;gap:7px;border-radius:7px;
  font-weight:600;font-size:14px;padding:9px 16px;cursor:pointer;
  border:1px solid transparent;transition:background 150ms,border-color 150ms,
  color 150ms,box-shadow 150ms,transform 150ms;white-space:nowrap}
.m-btn-lg{padding:12px 22px;font-size:15px;border-radius:8px}
.m-btn-accent{background:var(--m-acc);color:#fff!important}
.m-btn-accent:hover{background:var(--m-acc-hover);transform:translateY(-1px)}
.m-btn-accent:active{background:var(--m-acc-press);transform:none}
.m-btn-ghost{background:var(--m-surf);color:var(--m-ink);border-color:var(--m-line-2)}
.m-btn-ghost:hover{border-color:var(--m-acc);color:var(--m-acc-text)}

/* ── Hero backdrop ──
   A single wide pink bloom fading to the page colour at the edges. One soft
   radial, no grid and no hard edge. Decorative only, never interactive. */
/* Full-bleed: .m-hero is a 900px centred column, so an inset:0 layer would stop
   at its edges and leave bare gutters either side. Break out to viewport width
   while still tracking the hero's height. .m-page clips the overflow. */
.m-bp{position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;
  width:100vw;z-index:-1;pointer-events:none;overflow:hidden}
.m-bp::after{content:none}

/* ── Hero: split layout ──
   Left is a dark panel holding all the copy; right carries the product frame,
   deliberately wider than its column so it crops at the viewport edge. */
.m-hero{position:relative;max-width:none;padding:0;text-align:left}
.m-hero-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  gap:26px;align-items:stretch;
  padding:22px max(20px,calc(50% - 620px));
  min-height:500px;height:calc(100vh - 106px);height:calc(100dvh - 106px);
  max-height:740px}
.m-hero-left{background:#000;border-radius:22px;padding:52px 46px;
  display:flex;flex-direction:column;justify-content:center;min-width:0}
/* No slab: the browser frame sits on the page's own ground with a soft
   shadow. The solid indigo block around it read as a second hero (Juanjo,
   2026-09-03). */
.m-hero-right{position:relative;min-width:0;display:flex;flex-direction:column;
  justify-content:center;gap:10px;border-radius:22px;
  padding:0;overflow:visible;background:transparent}
.m-hero-right .m-prod-frame{box-shadow:0 30px 60px -24px rgba(60,20,90,.35),0 8px 20px -8px rgba(60,20,90,.18)}

/* Copy inside the dark panel */
/* Sized as a sentence, not a label. The .12em tracking and 11.5px here were
   right for the single word "COMPLIANCE"; on a full line they space the letters
   apart faster than the eye joins them into words, which reads as squished. */
.m-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:16.5px;
  font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.86);
  margin-bottom:22px;align-self:flex-start}
.m-hero-eyebrow .ovs-nav-mark{height:1.5em}
.m-hero h1{font-size:clamp(30px,3.5vw,50px);line-height:1.06;font-weight:700;
  letter-spacing:-.03em;color:#fff}
.m-page .m-hero-sub{font-size:18.2px;max-width:46ch;margin:20px 0 0;
  line-height:1.6;color:rgba(255,255,255,.70)}
.m-hero-cta{display:flex;gap:11px;justify-content:flex-start;margin:30px 0 20px;
  flex-wrap:wrap}
/* .m-page prefix: `.m-page a{color:inherit}` outranks a bare .m-btn-onDark. */
/* Solid white on the black panel, so the two hero buttons read as a pair
   rather than a button and an outline. */
.m-page .m-btn-onDark{background:#fff;color:var(--m-ink) !important;
  border-color:#fff;box-shadow:var(--m-sh-sm)}
.m-page .m-btn-onDark:hover{background:#f1f2f4;border-color:#f1f2f4;
  color:var(--m-ink) !important}
/* The three trust pills that used to sit under the hero buttons are gone. The
   claims they carried are made where they can be substantiated: no credit card
   in the pricing section, human review in the principle section. */

/* Whole card visible: the frame fits its column rather than bleeding out. */
.m-hero-right .m-prod-frame{width:100%}
.m-prod-note{margin:0;font-size:12.7px;color:var(--m-2nd);text-align:center}

/* Short laptops: the panel content, not the height cap, is what pushes the row
   past the fold - so reclaim the slack from padding rather than clipping. */
@media(min-width:1001px) and (max-height:780px){
  .m-hero-grid{padding-top:14px;padding-bottom:14px}
  .m-hero-left{padding:34px 40px}
  .m-hero-right{gap:7px}
  .m-hero .m-hero-cta{margin:22px 0 14px}
  .m-page .m-hero-sub{margin-top:14px}
}
@media(max-width:1000px){
  .m-hero-grid{grid-template-columns:1fr;padding:20px;gap:20px;
    min-height:0;height:auto;max-height:none}
  .m-hero-left{padding:40px 30px}
  .m-hero-right .m-prod-frame{width:100%}
}
@media(max-width:620px){
  .m-hero-left{padding:32px 24px}
  .m-hero-right{display:none}
}

/* ── Hero product preview ── */
.m-hero-visual{max-width:660px;margin:52px auto 0;text-align:left;
  background:var(--m-surf);border:1px solid var(--m-line);border-radius:14px;
  overflow:hidden;box-shadow:var(--m-sh-lg)}
.m-hv-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;
  border-bottom:1px solid var(--m-line);background:var(--m-surf-2)}
/* Only the three window dots - NOT .m-hv-title (or the bilingual spans inside it). */
.m-hv-bar>span:not(.m-hv-title){width:9px;height:9px;border-radius:50%;
  background:var(--m-line-2);flex-shrink:0}
.m-hv-title{margin-left:8px;font-size:13.2px;font-weight:600;color:var(--m-muted);
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-hv-row{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--m-line)}
.m-hv-row:last-of-type{border-bottom:none}
.m-hv-row i{width:17px;height:17px;color:var(--m-acc);flex-shrink:0}
.m-hv-name{font-size:15.4px;font-weight:600;flex:1;color:var(--m-ink)}
.m-hv-date{font-size:13.8px;color:var(--m-muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.m-hv-pill{font-size:12.7px;font-weight:600;padding:4px 10px;border-radius:9999px;
  flex-shrink:0;white-space:nowrap}
.m-hv-pill.ok{background:var(--m-ok-bg);color:var(--m-ok)}
.m-hv-pill.soon{background:var(--m-warn-bg);color:var(--m-warn)}
.m-hv-pill.late{background:var(--m-late-bg);color:var(--m-late)}
.m-hv-sync{display:flex;align-items:center;gap:7px;padding:11px 18px;font-size:13.2px;
  color:var(--m-muted);background:var(--m-surf-2);border-top:1px solid var(--m-line)}
.m-hv-sync .dot{width:6px;height:6px;border-radius:50%;background:var(--m-ok);
  box-shadow:0 0 0 3px var(--m-ok-bg)}
@media(max-width:600px){.m-hv-date{display:none}}

/* ── Sections ── */
.m-section{position:relative;padding:80px max(24px,calc(50% - 540px))}
.m-section-alt{background:var(--m-surf);border-block:1px solid var(--m-line);max-width:none}
.m-section-alt>*{max-width:1080px;margin-left:auto;margin-right:auto}
.m-sec-head{text-align:center;max-width:660px;margin:0 auto 48px}
.m-kicker{font-size:16.5px;font-weight:700;letter-spacing:.14em;color:var(--m-acc-text)}
.m-sec-head h2{font-size:clamp(34px,5.2vw,58px);margin-top:12px;line-height:1.15;
  font-weight:700;letter-spacing:-.025em}
.m-sec-head p{margin-top:14px;font-size:18.2px;line-height:1.6}

/* ── Steps ── */
.m-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
@media(max-width:880px){.m-steps{grid-template-columns:1fr}}
/* Step cards. Larger, with a 2px edge and a pale blue wash inside, and the
   lift-on-hover the reference uses: the hovered card scales up and rises while
   its neighbours stay put, so the row reads as one card coming forward rather
   than the whole grid moving.

   The wash is a separate ::after layer rather than a background on the card
   itself, because the card also animates transform, and compositing a gradient
   on a transformed element is what makes this kind of hover judder. */
.m-step{position:relative;overflow:hidden;padding:38px 34px 30px;
  display:flex;flex-direction:column;
  background:var(--m-surf);border:2px solid var(--m-line);border-radius:16px;
  box-shadow:var(--m-sh-sm);min-height:330px;
  transition:transform 320ms cubic-bezier(.2,.7,.3,1),
             box-shadow 320ms cubic-bezier(.2,.7,.3,1),
             border-color 320ms ease}
/* The wash rises from the BOTTOM edge, and much paler than before: it should
   read as a tint under the icon, not as a coloured panel. */
.m-step::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 78% at 50% 118%, rgba(120,150,255,.13) 0%,
      rgba(150,175,255,.055) 45%, transparent 74%),
    linear-gradient(0deg, rgba(233,239,255,.5) 0%, rgba(255,255,255,0) 46%);
  opacity:.85;transition:opacity 320ms ease}
.m-step:hover{transform:translateY(-6px) scale(1.025);
  box-shadow:0 18px 44px -12px rgba(60,66,87,.28),0 4px 12px rgba(0,0,0,.05);
  border-color:var(--m-acc)}
.m-step:hover::after{opacity:1}
/* Everything above the wash. */
.m-step::before,.m-step h3,.m-step p{position:relative;z-index:1}
.m-step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;background:var(--m-acc);color:#fff;
  font-size:16.5px;font-weight:700;margin-bottom:20px}
.m-step h3{font-size:20px;font-weight:700;letter-spacing:-.018em;margin-bottom:10px}
.m-step p{font-size:17.6px;line-height:1.7;color:var(--m-ink);opacity:.86}
/* Content icon, sitting under the text at the foot of the card. */
.m-step-ic{position:relative;z-index:1;margin-top:auto;padding-top:22px;
  display:flex;align-items:flex-end;justify-content:flex-start;color:var(--m-acc)}
.m-step-ic svg{width:38px;height:38px;stroke-width:1.5;opacity:.62;
  transition:opacity 320ms ease,transform 320ms cubic-bezier(.2,.7,.3,1)}
.m-step:hover .m-step-ic svg{opacity:1;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.m-step{transition:none}
  .m-step:hover{transform:none}}

/* ── Feature grid ── */
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.m-grid{grid-template-columns:1fr}}
/* Feature cards: the reference's shape (flat panel with a tab at the top-left)
   carrying the step cards' border and lift, with the wash in pink rather than
   blue. Shorter than the step cards, because these carry one line of copy and
   a link rather than a paragraph. */
.m-card{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border:2px solid var(--m-line);
  border-radius:0 14px 14px 14px;padding:24px 24px 20px;box-shadow:none;
  margin-top:18px;min-height:230px;
  transition:transform 320ms cubic-bezier(.2,.7,.3,1),
             box-shadow 320ms cubic-bezier(.2,.7,.3,1),
             border-color 320ms ease,background 320ms ease}
/* The tab. Same fill and edge, sitting above the squared top-left corner. */
.m-card::before{content:"";position:absolute;left:-2px;top:-18px;width:56px;height:20px;
  background:inherit;border:2px solid var(--m-line);border-bottom:none;
  border-radius:10px 10px 0 0;transition:border-color 320ms ease,background 320ms ease}
/* Pink wash rising from the bottom edge, the mirror of the blue one on the
   step cards. */
.m-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 78% at 50% 118%, rgba(217,4,192,.10) 0%,
      rgba(217,4,192,.04) 45%, transparent 74%),
    linear-gradient(0deg, rgba(252,231,249,.5) 0%, rgba(255,255,255,0) 46%);
  opacity:.85;transition:opacity 320ms ease}
.m-card:hover,.m-card:focus-visible{transform:translateY(-6px) scale(1.025);
  box-shadow:0 18px 44px -12px rgba(60,66,87,.24),0 4px 12px rgba(0,0,0,.05);
  border-color:var(--m-brand);background:#fff;outline:none}
.m-card:hover::before,.m-card:focus-visible::before{border-color:var(--m-brand)}
.m-card:hover::after{opacity:1}
.m-ic,.m-card h3,.m-card p,.m-card .m-card-go{position:relative;z-index:1}
.m-ic{width:40px;height:40px;border-radius:10px;background:#fbe0f5;
  color:var(--m-ink);display:grid;place-items:center;margin-bottom:16px;
  transition:background 320ms ease}
.m-card:hover .m-ic{background:#fbe0f5}
.m-ic svg{width:19px;height:19px}
.m-card h3{font-size:17px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px;
  color:var(--m-ink)}
.m-card p{font-size:16.5px;line-height:1.65;color:var(--m-ink);opacity:.86;
  margin-bottom:16px}
/* The action label sits at the bottom on its own line, so cards of different
   text lengths still line their arrows up. */
.m-card .m-card-go{margin-top:auto;display:flex;align-items:center;gap:8px;
  font-size:13.2px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--m-ink)}
.m-card .m-card-go svg{width:15px;height:15px;flex-shrink:0;
  transition:transform 320ms cubic-bezier(.2,.7,.3,1)}
.m-card:hover .m-card-go svg{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.m-card{transition:none}
  .m-card:hover{transform:none}}

/* ── Spotlight (alternating detail row) ── */
.m-spot{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  max-width:1180px;margin:0 auto}
@media(max-width:900px){.m-spot{grid-template-columns:1fr;gap:32px}}
.m-spot h2{font-size:clamp(24px,3vw,32px);line-height:1.18;font-weight:700;
  letter-spacing:-.025em;margin-top:12px}
.m-spot p{margin-top:14px;font-size:17.6px;line-height:1.65}
.m-spot ul{list-style:none;padding:0;margin:20px 0 0;display:flex;
  flex-direction:column;gap:11px}
.m-spot li{display:flex;align-items:flex-start;gap:10px;font-size:16px;
  color:var(--m-2nd)}
.m-spot li svg{width:17px;height:17px;color:var(--m-ok);flex-shrink:0;margin-top:2px}
/* The spotlight card carries a thick brand edge and more room inside. Both
   spotlight sections use it: the Courier's sits on the right, the principle's
   on the left, so nothing here may depend on column position. */
.m-spot-art{background:var(--m-surf);border:12px solid var(--m-brand);
  border-radius:30px;padding:26px;box-shadow:0 18px 44px -14px rgba(60,66,87,.22)}
.m-mail{display:flex;gap:13px;align-items:flex-start;padding:17px 16px;border-radius:11px;
  background:var(--m-surf-2);border:1px solid var(--m-line);margin-bottom:14px}
.m-mail:last-child{margin-bottom:0}

/* ── The Courier flow, animated ──
   A 9s loop that walks the chain: received, extracted, filed. Each step lifts
   and brightens as the one before it hands over, and the connecting arrow
   travels down at the moment of the handover, so the card shows the sequence
   rather than three static rows.

   The principle card below gets the same lift and the same tag fade through
   .m-spot-cycle, but not the arrows: its three rows are alternative outcomes
   rather than steps, so they light up in turn without a connector implying one
   hands over to the next. */
.m-spot-flow .m-mail{transition:none;
  animation:m-flow-row 9s cubic-bezier(.2,.7,.3,1) infinite both}
/* nth-CHILD, not nth-of-type: rows and arrows are all divs, so nth-of-type
   counts them together and every "row 2" rule landed on an arrow. Children run
   row, arrow, row, arrow, row. */
.m-spot-flow .m-mail:nth-child(1){animation-delay:0s}
.m-spot-flow .m-mail:nth-child(3){animation-delay:2.4s}
.m-spot-flow .m-mail:nth-child(5){animation-delay:4.8s}
@keyframes m-flow-row{
  0%,4%{transform:none;border-color:var(--m-line);
        box-shadow:none;background:var(--m-surf-2)}
  9%,22%{transform:translateY(-2px);border-color:var(--m-brand);
         box-shadow:0 8px 22px -10px rgba(217,4,192,.5);background:#fff}
  30%,100%{transform:none;border-color:var(--m-line);
           box-shadow:none;background:var(--m-surf-2)}
}
/* The tag fills in as its row activates. */
.m-spot-flow .m-mail-tag{animation:m-flow-tag 9s cubic-bezier(.2,.7,.3,1) infinite}
.m-spot-flow .m-mail:nth-child(1) .m-mail-tag{animation-delay:0s}
.m-spot-flow .m-mail:nth-child(3) .m-mail-tag{animation-delay:2.4s}
.m-spot-flow .m-mail:nth-child(5) .m-mail-tag{animation-delay:4.8s}
@keyframes m-flow-tag{
  0%,6%{opacity:.45}
  10%,24%{opacity:1}
  32%,100%{opacity:.45}
}
/* The arrow slides down as the hand-over happens. */
.m-spot-flow .m-arrow{animation:m-flow-arrow 9s cubic-bezier(.2,.7,.3,1) infinite}
.m-spot-flow .m-arrow:nth-child(2){animation-delay:1.5s}
.m-spot-flow .m-arrow:nth-child(4){animation-delay:3.9s}
@keyframes m-flow-arrow{
  0%,4%{opacity:.35;transform:translateY(-3px)}
  8%{opacity:1;transform:translateY(0);color:var(--m-brand)}
  14%{opacity:.35;transform:translateY(3px)}
  20%,100%{opacity:.35;transform:translateY(-3px)}
}
/* The principle card: same keyframes, but its rows are consecutive children
   (no arrows between them), so the delays step 1,2,3 rather than 1,3,5. */
.m-spot-cycle .m-mail{transition:none;
  animation:m-flow-row 9s cubic-bezier(.2,.7,.3,1) infinite both}
.m-spot-cycle .m-mail:nth-child(1){animation-delay:0s}
.m-spot-cycle .m-mail:nth-child(2){animation-delay:2.4s}
.m-spot-cycle .m-mail:nth-child(3){animation-delay:4.8s}
.m-spot-cycle .m-mail-tag{animation:m-flow-tag 9s cubic-bezier(.2,.7,.3,1) infinite}
.m-spot-cycle .m-mail:nth-child(1) .m-mail-tag{animation-delay:0s}
.m-spot-cycle .m-mail:nth-child(2) .m-mail-tag{animation-delay:2.4s}
.m-spot-cycle .m-mail:nth-child(3) .m-mail-tag{animation-delay:4.8s}
@media(prefers-reduced-motion:reduce){
  .m-spot-flow .m-mail,.m-spot-flow .m-mail-tag,.m-spot-flow .m-arrow,
  .m-spot-cycle .m-mail,.m-spot-cycle .m-mail-tag{animation:none}
}
.m-mail i{width:16px;height:16px;color:var(--m-acc);flex-shrink:0;margin-top:2px}
.m-mail-b{flex:1;min-width:0}
.m-mail-s{font-size:14.9px;font-weight:600;color:var(--m-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-mail-m{font-size:13.2px;color:var(--m-muted);margin-top:2px}
.m-mail-tag{font-size:12.1px;font-weight:600;padding:3px 8px;border-radius:9999px;
  background:var(--m-acc-bg);color:var(--m-acc-text);white-space:nowrap}
.m-arrow{display:grid;place-items:center;padding:4px 0;color:var(--m-muted)}
.m-arrow svg{width:17px;height:17px}

/* ── Pricing ── */
.m-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:880px){.m-pricing{grid-template-columns:1fr}}
.m-price{background:var(--m-surf);border:1px solid var(--m-line);border-radius:14px;
  padding:30px;display:flex;flex-direction:column;box-shadow:var(--m-sh-sm)}
.m-price.featured{border-color:var(--m-acc);box-shadow:var(--m-sh-lg);position:relative}
.m-price.featured::before{content:'BETA';position:absolute;top:-11px;right:24px;
  background:var(--m-acc);color:#fff;font-size:11.6px;font-weight:700;
  letter-spacing:.09em;padding:4px 11px;border-radius:9999px}
.m-price-name{font-size:14.9px;font-weight:600;color:var(--m-2nd)}
.m-price-amt{font-size:32px;font-weight:700;margin:6px 0 2px;letter-spacing:-.03em}
.m-price-note{font-size:14.3px;color:var(--m-muted);margin-bottom:20px}
.m-price ul{list-style:none;padding:0;margin:0 0 24px;display:flex;
  flex-direction:column;gap:10px}
.m-price li{display:flex;align-items:center;gap:9px;font-size:15.4px;color:var(--m-2nd)}
.m-price li svg{width:16px;height:16px;color:var(--m-ok);flex-shrink:0}
.m-price .m-btn{margin-top:auto;justify-content:center}

/* ── FAQ ── */
.m-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.m-faq details{background:var(--m-surf);border:1px solid var(--m-line);
  border-radius:10px;padding:16px 18px;box-shadow:var(--m-sh-sm)}
.m-faq details[open]{border-color:var(--m-line-2)}
.m-faq summary{cursor:pointer;font-size:16.5px;font-weight:600;color:var(--m-ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{content:"+";font-size:20.9px;font-weight:400;color:var(--m-muted);
  line-height:1;flex-shrink:0}
.m-faq details[open] summary::after{content:"\2212"}
.m-faq details p{margin-top:11px;font-size:16px;line-height:1.65}

/* ── Contact + footer ── */
.m-contact{text-align:center}
.m-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  max-width:1080px;margin:0 auto;padding:34px 24px;border-top:1px solid var(--m-line);
  font-size:14.3px;color:var(--m-muted)}
.m-footer a:hover{color:var(--m-acc-text)}


/* ── Utility bar (above the main nav) ── */
.m-util{background:var(--m-brand);border-bottom:1px solid rgba(0,0,0,.12);font-size:14.3px}
.m-util-in{max-width:1320px;margin:0 auto;padding:0 12px;height:38px;display:flex;
  align-items:center;justify-content:flex-end;gap:18px}
.m-util a{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:6px;
  transition:opacity 150ms}
.m-util a:hover{opacity:.65}
.m-util i{width:14px;height:14px}
.m-util-sep{width:1px;height:15px;background:rgba(255,255,255,.45)}
@media(max-width:860px){.m-util-in{padding:0 18px;gap:12px}}

/* ── Mega-menu nav ── */
.m-navwrap{position:sticky;top:0;z-index:60}
.m-nav{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding:0 32px;height:64px;max-width:1180px;margin:0 auto;
  background:transparent;backdrop-filter:none;border-bottom:none}
.m-navbg{background:color-mix(in srgb,var(--m-bg) 96%,transparent);
  backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--m-line)}
.m-mega-wrap{position:static}
.m-mega-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;
  font-family:inherit;font-size:16.5px;font-weight:500;color:var(--m-ink);cursor:pointer;
  padding:0;transition:color 150ms}
.m-mega-btn:hover,.m-mega-wrap.open .m-mega-btn{color:var(--m-acc)}
.m-mega-btn .m-chev{width:14px;height:14px;transition:transform 180ms}
.m-mega-wrap.open .m-mega-btn .m-chev{transform:rotate(180deg)}

/* The panel spans the viewport, anchored under the whole bar. */
.m-mega{position:absolute;left:0;right:0;top:100%;background:var(--m-surf);
  border-bottom:1px solid var(--m-line);box-shadow:var(--m-sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 170ms ease,transform 170ms ease,visibility 170ms}
.m-mega-wrap.open .m-mega{opacity:1;visibility:visible;transform:none}
.m-mega-in{max-width:1180px;margin:0 auto;padding:30px 32px 34px;display:grid;gap:0}
.m-mega-cols{display:grid;gap:0}
.m-mega-col{padding:0 26px;border-left:1px solid var(--m-line)}
.m-mega-col:first-child{border-left:none;padding-left:0}
.m-mega-col:last-child{padding-right:0}
.m-mega-h{font-size:12.1px;font-weight:600;letter-spacing:.11em;color:var(--m-muted);
  text-transform:uppercase;margin-bottom:14px}
.m-mega-lead{font-size:17.1px;font-weight:600;color:var(--m-ink);margin-bottom:3px}
.m-mega-sub{font-size:14.3px;color:var(--m-2nd);margin-bottom:16px;line-height:1.5}
.m-mega-list{display:flex;flex-direction:column;gap:2px}
.m-mega-item{display:block;padding:7px 9px;margin:0 -9px;border-radius:7px;
  font-size:16px;color:var(--m-ink);transition:background 130ms,color 130ms}
.m-mega-item:hover{background:var(--m-acc-bg);color:var(--m-acc-text)}
.m-mega-item small{display:block;font-size:13.8px;color:var(--m-muted);margin-top:1px;
  line-height:1.45}
.m-mega-item:hover small{color:var(--m-2nd)}
.m-mega-item .m-soon{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:1px 6px;border-radius:9999px;background:var(--m-warn-bg);color:var(--m-warn);
  margin-left:6px;vertical-align:1px}

/* The row under the Platform columns: what serves all four desks. */
.m-mega-strip{display:flex;flex-wrap:wrap;gap:6px 34px;margin-top:22px;padding-top:16px;border-top:1px solid var(--m-line)}
.m-mega-strip .m-mega-item{margin:0;display:flex;align-items:baseline;gap:10px}
.m-mega-strip .m-mega-item small{display:inline;margin:0}

/* Featured tile inside a mega panel */
.m-mega-feat{display:block;padding:18px;border-radius:12px;background:var(--m-surf-2);
  border:1px solid var(--m-line);transition:border-color 150ms,box-shadow 150ms}
.m-mega-feat:hover{border-color:var(--m-acc);box-shadow:var(--m-sh-md)}
.m-mega-feat .m-mega-lead{margin-bottom:4px}
.m-mega-feat .m-mega-sub{margin-bottom:0}
.m-mega-art{border-radius:8px;overflow:hidden;border:1px solid var(--m-line);
  background:var(--m-surf);margin-bottom:14px}
.m-mega-art .r{display:flex;align-items:center;gap:7px;padding:7px 9px;
  border-bottom:1px solid var(--m-line);font-size:11.6px;color:var(--m-2nd)}
.m-mega-art .r:last-child{border-bottom:none}
.m-mega-art .sw{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.m-mega-art .nm{flex:1;font-weight:600;color:var(--m-ink)}
.m-mega-art .pl{font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:9999px}

@media(max-width:960px){
  .m-mega{display:none}
  .m-mega-btn .m-chev{display:none}
}

/* ── Live product panel ── */
.m-prod{max-width:1120px;margin:0 auto}
.m-prod-frame{background:var(--m-surf);border:1px solid var(--m-line);border-radius:14px;
  overflow:hidden;box-shadow:var(--m-sh-lg);container-type:inline-size;position:relative}

/* ── Demo cursor ──
   A pointer drifting through the product frame on an 8s loop, dwelling and
   clicking on what sells — and the interface answers like the real one: the
   Overdue KPI presses and rings, a review item highlights, and clicking
   Obligations actually NAVIGATES the preview to the obligations screen, then
   Workspace brings it back. Two stacked views swap on the same clock; every
   target's reaction runs on it too. Positions are percentages of the frame so
   the choreography survives the responsive width. Decorative only — hidden
   from screen readers, under reduced motion, and below 820px where the frame
   collapses and every target moves. */
.m-cursor{position:absolute;left:66px;top:130px;width:22px;height:22px;z-index:5;
  pointer-events:none;filter:drop-shadow(0 2px 5px rgba(26,31,54,.35));
  animation:m-cursor-path 8s ease-in-out infinite}
.m-cursor svg{width:100%;height:100%;display:block}
.m-cursor::after{content:"";position:absolute;left:-3px;top:-3px;width:28px;height:28px;
  border-radius:50%;border:2px solid var(--m-acc);opacity:0;transform:scale(.3);
  animation:m-cursor-click 8s ease-out infinite}
@keyframes m-cursor-path{
  /* Every stop is the MEASURED centre of a real control, read from the DOM at
     the built layout (the frame is width-capped at 664px, so px are stable),
     minus the (5,3) offset of the cursor's own tip. The first version aimed by
     eyeballed percentages and clicked the gap between Journal and Obligations
     (Juanjo, 2026-08-28: "clicks blank spots"). If the mock's layout changes,
     re-measure; do not nudge by eye. */
  0%,4%{left:66px;top:130px}     /* resting on Needs you, the active nav */
  11%,17%{left:363px;top:288px}  /* row 1's Approve once */
  25%,31%{left:571px;top:260px}  /* chat: Open Emergency lighting */
  41%,50%{left:66px;top:199px}   /* rail: Obligations -> view swap */
  60%,70%{left:309px;top:313px}  /* obligations: first needs-fixing row (hover) */
  80%,86%{left:66px;top:130px}   /* rail: back to Needs you -> swap back */
  100%{left:66px;top:130px}
}
@keyframes m-cursor-click{
  0%,11%{opacity:0;transform:scale(.3)}
  13%{opacity:.85;transform:scale(.45)}
  17%{opacity:0;transform:scale(1.5)}
  18%,25%{opacity:0;transform:scale(.3)}
  27%{opacity:.85;transform:scale(.45)}
  31%{opacity:0;transform:scale(1.5)}
  32%,43%{opacity:0;transform:scale(.3)}
  45%{opacity:.85;transform:scale(.45)}
  49%{opacity:0;transform:scale(1.5)}
  50%,80%{opacity:0;transform:scale(.3)}
  82%{opacity:.85;transform:scale(.45)}
  86%{opacity:0;transform:scale(1.5)}
  87%,100%{opacity:0;transform:scale(.3)}
}

/* The two screens. The click lands at 45%, the swap follows it; Workspace's
   click at 82% brings the dashboard back before the loop closes. */
.m-view-dash{animation:m-view-dash 8s ease-in-out infinite}
.m-view-obl{animation:m-view-obl 8s ease-in-out infinite}
@keyframes m-view-dash{
  0%,47%{opacity:1;visibility:visible}
  50%,85%{opacity:0;visibility:hidden}
  88%,100%{opacity:1;visibility:visible}
}
@keyframes m-view-obl{
  0%,47%{opacity:0;visibility:hidden}
  50%,85%{opacity:1;visibility:visible}
  88%,100%{opacity:0;visibility:hidden}
}

/* Reactions, all on the same 8s clock. Rest frames restate cascade values,
   because an infinite animation owns its properties for the whole run. */
.m-hero-right .m-prod-nav > .nv-obl{animation:m-demo-nav 8s ease-in-out infinite}
@keyframes m-demo-nav{
  0%,43%{transform:none;background:transparent;color:var(--m-2nd);font-weight:400}
  45%{transform:scale(.96)}
  48%,85%{transform:none;background:var(--m-acc-bg);color:var(--m-acc-text);font-weight:600}
  90%,100%{transform:none;background:transparent;color:var(--m-2nd);font-weight:400}
}
.m-hero-right .m-prod-nav > .nv-ws{animation:m-demo-ws 8s ease-in-out infinite}
@keyframes m-demo-ws{
  0%,47%{transform:none;background:var(--m-acc-bg);color:var(--m-acc-text)}
  50%,81%{transform:none;background:transparent;color:var(--m-2nd)}
  82%{transform:scale(.96)}
  86%,100%{transform:none;background:var(--m-acc-bg);color:var(--m-acc-text)}
}
/* The two clicked controls press when the cursor clicks them — a click ring
   over a button that does not move reads as a miss. Same 8s clock as the ring
   (13% and 27%). */
.m-hero-right .m-plan-row .m-ans:first-child{animation:m-demo-ans 8s ease-in-out infinite}
@keyframes m-demo-ans{
  0%,12%{transform:none}
  13%{transform:scale(.93)}
  16%,100%{transform:none}
}
.m-hero-right .m-chat-acts span:first-child{animation:m-demo-chatact 8s ease-in-out infinite}
@keyframes m-demo-chatact{
  0%,26%{transform:none}
  27%{transform:scale(.94)}
  30%,100%{transform:none}
}
.m-hero-right .m-obl-hot{border-radius:7px;animation:m-demo-oblrow 8s ease-in-out infinite}
@keyframes m-demo-oblrow{
  0%,58%{background:transparent}
  62%,72%{background:var(--m-acc-bg)}
  78%,100%{background:transparent}
}

/* Cursor, screens and reactions travel together: a swap or highlight with no
   pointer would read as a glitch, not a click. With animations off the static
   opacity:0 on .m-view-obl leaves the dashboard showing. */
@media(max-width:820px){.m-cursor,.m-view-dash,.m-view-obl,
  .m-hero-right .m-obl-hot,.m-hero-right .m-plan-row .m-ans:first-child,.m-hero-right .m-chat-acts span:first-child,
  .m-hero-right .m-prod-nav > .nv-obl,
  .m-hero-right .m-prod-nav > .nv-ws{animation:none}
  .m-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.m-cursor,.m-view-dash,.m-view-obl,
  .m-hero-right .m-obl-hot,.m-hero-right .m-plan-row .m-ans:first-child,.m-hero-right .m-chat-acts span:first-child,
  .m-hero-right .m-prod-nav > .nv-obl,
  .m-hero-right .m-prod-nav > .nv-ws{animation:none}
  .m-cursor{display:none}}

/* ── The two screens' own furniture ─────────────────────────────────────────
   Everything below draws the app as it is now: the Needs-you plan card, the
   Obligations dot grid, and the chat panel that shares the frame with both.
   Sized down from the real interface rather than redrawn: same shapes, same
   pink/black button language, roughly half the type. */

.m-pghead{display:flex;align-items:baseline;gap:8px;font-size:15.4px;font-weight:700;
  color:var(--m-ink);border:1.5px solid var(--m-ink);border-radius:9px;
  padding:8px 11px;margin-bottom:9px;
  background:linear-gradient(120deg,rgba(217,4,192,.10),rgba(123,47,247,.05))}
.m-pghead small{font-size:11px;font-weight:500;color:var(--m-2nd)}

/* Needs you */
.m-plan{border:1.5px solid var(--m-ink);border-radius:9px;overflow:hidden}
.m-plan-h{padding:9px 11px;font-size:11.6px;font-weight:700;line-height:1.45;color:#fff;
  background:linear-gradient(135deg,#d939d0,#6b2cce)}
.m-plan-b{padding:8px 11px 10px;background:var(--m-cardbg)}
.m-plan-note{font-size:10.5px;font-style:italic;color:var(--m-2nd);margin-bottom:7px}
.m-plan-row{display:grid;grid-template-columns:1fr max-content;gap:8px;align-items:center;
  padding:7px 0;border-top:1px solid var(--m-line)}
.m-plan-row:first-of-type{border-top:0}
.m-plan-t{min-width:0;font-size:11px;line-height:1.4;color:var(--m-2nd)}
.m-plan-t b{display:inline;color:var(--m-acc-text);font-size:11.6px}
.m-plan-d{color:var(--m-muted);white-space:nowrap}
.m-plan-act{display:block;margin-top:2px;color:var(--m-ink)}
.m-plan-why{display:block;margin-top:2px;font-weight:700;font-size:10.5px;color:var(--m-acc-text)}
.m-plan-acts{display:flex;gap:5px;justify-content:flex-end}
.m-ans{border:1.5px solid #262626;border-radius:999px;background:#f6c0ea;color:#262626;
  font-size:9.9px;font-weight:700;padding:4px 9px;white-space:nowrap}

/* Obligations */
.m-ochips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.m-ochips span{border:1.5px solid var(--m-ink);border-radius:999px;padding:3px 8px;
  font-size:9.9px;font-weight:600;color:var(--m-ink);background:var(--m-cardbg)}
.m-dots-card{border:1.5px solid var(--m-ink);border-radius:9px;background:var(--m-cardbg);
  padding:9px 11px;margin-bottom:9px}
.m-dots{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:7px}
.m-dots i{width:7px;height:15px;border-radius:3px;border:1px solid var(--m-ink);
  background:var(--m-cardbg)}
.m-dots i.r{background:#e5484d}
.m-dots i.y{background:#f5c518}
.m-dots-f{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:9.9px;color:var(--m-2nd);flex-wrap:wrap}
/* nowrap on the legend: it wrapped between the dot and its word, so a red dot
   sat alone on one line above the label it belongs to. */
.m-dots-f em{display:flex;align-items:center;gap:4px;font-style:normal;
  color:var(--m-muted);white-space:nowrap;flex-shrink:0}
.m-dots-f em i{width:6px;height:6px;border-radius:50%;margin-left:6px;flex-shrink:0}
.m-dots-f em i.r{background:#e5484d}
.m-dots-f em i.y{background:#f5c518}
/* ONE card owns the border. The rows used to carry their own left and right
   edges, which met the animated highlight's 7px corners and left a visible
   seam down each side. */
.m-ocard{border:1.5px solid var(--m-ink);border-radius:9px;overflow:hidden;
  background:var(--m-cardbg)}
.m-osec{background:rgba(229,72,77,.10);border-bottom:1.5px solid var(--m-ink);
  padding:6px 10px;font-size:11px;font-weight:700;color:#b02a2f}
.m-ocat{padding:6px 10px 0;font-size:10.5px;font-weight:700;color:var(--m-2nd)}
.m-orow{padding:5px 10px;font-size:10.5px;line-height:1.4}
.m-orow:last-child{padding-bottom:8px}
.m-orow b{display:block;font-size:11px;color:var(--m-acc-text)}
.m-orow .s{display:block;color:var(--m-muted)}
.m-orow .s.bad{color:#b02a2f;font-weight:600}
.m-orow .n{display:block;color:#b02a2f}

/* The chat panel, shared by both screens */
.m-prod-chat{border-left:1px solid var(--m-line);background:var(--m-surf-2);
  padding:10px 9px;display:flex;flex-direction:column;gap:7px;min-width:0}
.m-chat-h{display:flex;align-items:center;gap:6px}
.m-chat-av{width:20px;height:20px;border-radius:50%;background:var(--m-acc);
  display:grid;place-items:center;flex-shrink:0}
.m-chat-av i{width:13px;height:13px;background:#fff}
.m-chat-who{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.m-chat-who b{font-size:11px;color:var(--m-ink)}
.m-chat-who small{font-size:9.4px;color:var(--m-muted)}
.m-chat-q{align-self:flex-end;max-width:92%;background:var(--m-ink);color:#fff;
  border-radius:11px 11px 3px 11px;padding:5px 8px;font-size:10.5px}
.m-chat-a{font-size:9.9px;line-height:1.5;color:var(--m-2nd)}
.m-chat-a p{margin:0 0 5px}
.m-chat-a ul{margin:0 0 5px;padding-left:12px}
.m-chat-a li{margin-bottom:3px}
.m-chat-acts{display:flex;flex-direction:column;gap:4px}
.m-chat-acts span{border:1px solid var(--m-acc);border-radius:999px;padding:4px 8px;
  font-size:9.4px;font-weight:600;color:var(--m-acc-text);background:var(--m-acc-bg);
  line-height:1.3}
.m-chat-box{margin-top:auto;display:flex;align-items:center;gap:5px;
  border:1px solid var(--m-line);border-radius:999px;background:var(--m-cardbg);padding:3px 3px 3px 9px}
.m-chat-box .ph{flex:1;font-size:9.4px;color:var(--m-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.m-chat-box em{font-style:normal;background:var(--m-acc);color:#fff;border-radius:999px;
  padding:3px 8px;font-size:9.4px;font-weight:700}
.m-chat-dis{font-size:8.2px;line-height:1.4;color:var(--m-muted);text-align:center}

.m-prod-chrome{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:var(--m-surf-2);border-bottom:1px solid var(--m-line)}
.m-prod-chrome>span:not(.m-prod-url){width:9px;height:9px;border-radius:50%;
  background:var(--m-line-2);flex-shrink:0}
.m-prod-url{margin-left:10px;flex:1;font-size:12.7px;color:var(--m-muted);
  background:var(--m-surf);border:1px solid var(--m-line);border-radius:9999px;
  padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-prod-body{display:grid;grid-template-columns:140px 1fr 176px;min-height:0}
/* Breakpoints live in the container queries near the end of this file, not
   here: the frame's width comes from the hero column, not the viewport, and at
   every desktop size this frame is ~660px inside a 1500px window. A viewport
   breakpoint would describe the wrong box. */
.m-prod-rail{background:var(--m-surf-2);border-right:1px solid var(--m-line);padding:14px 10px}
.m-prod-brand{display:flex;align-items:flex-start;gap:8px;padding:0 8px 14px}
.m-prod-mark{width:26px;height:26px;border-radius:8px;background:var(--m-brand);
  display:grid;place-items:center;flex-shrink:0}
/* The mark reverses to white on the brand tile, like the app icon. */
.m-prod-mark .ovs-nav-mark{height:13px;margin:0;background-color:#fff}
.m-prod-brand-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.m-prod-brand-t b{font-size:13.8px;font-weight:700;color:var(--m-ink)}
/* Wraps rather than truncates: the rail is 150px and 'Hospitality
   Operations' needs 94, so nowrap either bled past the divider or
   ellipsed to 'Hospitality Operatio…'. Two short lines read fine. */
.m-prod-brand-t small{font-size:9.9px;line-height:1.25;color:var(--m-muted);
  white-space:normal;overflow-wrap:anywhere}
.m-nav-count{margin-left:auto;font-style:normal;background:var(--m-acc);color:#fff;
  font-size:9.9px;font-weight:700;min-width:14px;height:14px;border-radius:9999px;
  display:grid;place-items:center;padding:0 3px;flex-shrink:0}
.m-prod-user{display:flex;align-items:center;gap:7px;margin-top:14px;padding:7px 8px;
  border-top:1px solid var(--m-line)}
.m-prod-user .av{width:22px;height:22px;border-radius:50%;background:var(--m-acc-bg);
  color:var(--m-acc-text);font-size:10.5px;font-weight:700;display:grid;place-items:center;
  flex-shrink:0}
.m-prod-user .nm{font-size:12.1px;font-weight:600;color:var(--m-ink);white-space:nowrap}
.m-prod-nav{display:flex;flex-direction:column;gap:2px}
.m-prod-nav span{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  font-size:13.2px;color:var(--m-2nd);white-space:nowrap}
.m-prod-nav span span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.m-prod-nav span.on{background:var(--m-acc-bg);color:var(--m-acc-text);font-weight:600}
.m-prod-nav i{width:14px;height:14px}
/* lucide swaps <i data-lucide> for <svg>, which the i rules no longer match —
   unsized, the first icons collapsed to 0 width inside the flex row. */
.m-prod-nav svg{width:14px;height:14px;flex-shrink:0}
.m-prod-main{padding:15px 16px;min-width:0}
.m-prod-title{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:11px}
.m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px}
@media(max-width:620px){.m-kpis{grid-template-columns:repeat(2,1fr)}}
.m-kpi{background:var(--m-cardbg);border:1px solid var(--m-cardline);border-radius:8px;
  box-shadow:var(--m-sh-sm);padding:11px 11px}
.m-kpi b{display:block;font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.m-kpi span{font-size:12.1px;color:var(--m-2nd);white-space:nowrap}
.m-kpi.alert b{color:var(--m-late)}
.m-prod-split{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:720px){.m-prod-split{grid-template-columns:1fr}}
.m-panel{background:var(--m-cardbg);border:1px solid var(--m-cardline);border-radius:8px;
  box-shadow:var(--m-sh-sm);padding:10px 12px;min-width:0}
.m-panel-h{display:flex;align-items:center;justify-content:space-between;
  font-size:13.8px;font-weight:600;margin-bottom:8px}
.m-panel-h em{font-style:normal;font-size:12.7px;font-weight:500;color:var(--m-muted)}
.m-li{display:flex;align-items:center;gap:7px;padding:6px 0;
  border-top:1px solid var(--m-line);font-size:13.2px;min-width:0}
.m-li:first-of-type{border-top:none}
.m-li i{width:14px;height:14px;color:var(--m-acc);flex-shrink:0}
.m-li svg{width:14px;height:14px;color:var(--m-acc);flex-shrink:0}
.m-li .t{flex:1;min-width:0;font-weight:600;color:var(--m-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.m-li .s{font-size:12.7px;color:var(--m-muted);white-space:nowrap}
.m-li .p{font-size:11px;font-weight:600;padding:2px 7px;border-radius:9999px;flex-shrink:0}
.p-ok{background:var(--m-ok-bg);color:var(--m-ok)}
.p-soon{background:var(--m-warn-bg);color:var(--m-warn)}
.p-late{background:var(--m-late-bg);color:var(--m-late)}
.p-rev{background:var(--m-acc-bg);color:var(--m-acc-text)}

/* ── Preview: pieces mirroring the real Command Center ── */
.m-chips{display:flex;gap:6px;margin-bottom:9px;flex-wrap:nowrap;min-width:0}
.m-chips > span{font-size:11.6px;font-weight:500;color:var(--m-2nd);white-space:nowrap;
  border:1px solid transparent;border-radius:9999px;padding:4px 10px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(var(--m-surf),var(--m-surf)) padding-box,
    linear-gradient(100deg,#93c5fd,#6366f1,#60a5fa) border-box}
.m-chips > .c-ai{flex-shrink:0;font-weight:600;color:var(--m-acc-text);
  background:linear-gradient(var(--m-acc-bg),var(--m-acc-bg)) padding-box,
    linear-gradient(100deg,#c4b5fd,#818cf8,#a855f7,#818cf8,#c4b5fd) border-box;
  border:1.5px solid transparent;box-shadow:0 1px 8px rgba(129,140,248,.32)}
.m-propline{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.m-propline .prop{display:inline-flex;align-items:center;gap:6px;font-size:12.1px;
  font-weight:600;color:var(--m-ink);border:1px solid var(--m-line);border-radius:9999px;
  padding:4px 10px;background:var(--m-surf)}
.m-propline .prop::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--m-ok)}
.m-propline .stat{font-size:11.6px;font-weight:600;color:var(--m-late);
  background:var(--m-late-bg);border-radius:9999px;padding:4px 10px;white-space:nowrap}
.m-cal-h{text-align:center;font-size:12.1px;font-weight:600;color:var(--m-ink);
  margin-bottom:6px}
.m-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.m-cal-g b{font-size:9.4px;font-weight:600;color:var(--m-muted);padding:2px 0}
.m-cal-g span{font-size:11px;color:var(--m-2nd);padding:4px 0;border-radius:6px;
  position:relative}
.m-cal-g span.o{color:var(--m-line-2)}
.m-cal-g span.today{background:var(--m-acc);color:#fff;font-weight:700}
.m-cal-g span.dot::after{content:"";position:absolute;left:50%;bottom:1px;
  transform:translateX(-50%);width:3px;height:3px;border-radius:50%;
  background:var(--m-late)}
.m-drop{border:1.5px dashed var(--m-acc);border-radius:8px;background:var(--m-acc-bg);
  color:var(--m-acc-text);font-size:11.6px;font-weight:600;text-align:center;
  padding:10px 8px;margin-bottom:8px}
.m-sec{font-size:9.9px;font-weight:700;letter-spacing:.08em;color:var(--m-muted);
  margin:7px 0 2px}

/* ── Preview: the two screens the demo cursor navigates between ── */
.m-prod-main{position:relative}
.m-view-obl{position:absolute;inset:15px 16px;opacity:0;visibility:hidden;
  pointer-events:none}
.m-obl-sub{font-size:12.7px;color:var(--m-2nd);margin:-6px 0 10px}
.m-gcard{background:var(--m-cardbg);border:1px solid var(--m-cardline);border-radius:8px;
  box-shadow:var(--m-sh-sm);padding:10px 12px;margin-bottom:10px}
.m-gcard-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13.8px;font-weight:700;padding-bottom:7px;margin-bottom:4px;
  border-bottom:2px solid var(--m-line)}
.m-gcard.warn .m-gcard-h{border-bottom-color:var(--m-late)}
.m-gcard.ok .m-gcard-h{border-bottom-color:var(--m-acc)}
.m-gcard-h em{font-style:normal;font-size:11.6px;font-weight:500;color:var(--m-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-gcard .m-li{border-top:none}
.m-obl-note{font-size:11px;color:var(--m-muted);text-align:right}

/* ── Contact / request-access form ── */
/* The left column is the pitch and the right is the form. An even split left
   the pitch cramped against a form that only needs its own width, so the copy
   takes the larger share and scales up with it. */
.m-contact-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start;
  max-width:1140px;margin:0 auto;text-align:left}
@media(max-width:900px){.m-contact-grid{grid-template-columns:1fr;gap:32px}}
.m-contact-grid h2{font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:700;
  letter-spacing:-.028em;margin-top:14px}
.m-contact-grid>div>p{margin-top:18px;font-size:19.8px;line-height:1.6;max-width:34em}
.m-contact-list{list-style:none;padding:0;margin:30px 0 0;display:flex;
  flex-direction:column;gap:15px}
.m-contact-list li{display:flex;align-items:flex-start;gap:11px;font-size:17.6px;
  color:var(--m-2nd)}
.m-contact-list li svg{width:19px;height:19px;color:var(--m-ok);flex-shrink:0;margin-top:2px}
.m-form{background:var(--m-surf);border:1px solid var(--m-line);border-radius:14px;
  padding:26px;box-shadow:var(--m-sh-lg)}
/* Honeypot. Off-screen rather than display:none, because some bots skip inputs
   the browser reports as hidden. A sighted or screen-reader user never reaches
   it: aria-hidden on the wrapper, tabindex -1 on the input. */
.m-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.m-form-msg{margin:12px 0 0;font-size:14.9px;line-height:1.5;text-align:center;
  color:var(--m-2nd);min-height:1px}
.m-form-msg.is-ok{color:var(--m-ok);font-weight:600}
.m-form-msg.is-err{color:var(--m-late);font-weight:600}
.m-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.m-form-row{grid-template-columns:1fr}}
.m-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.m-field label{font-size:13.2px;font-weight:600;letter-spacing:.03em;color:var(--m-2nd)}
.m-field label .req{color:var(--m-late)}
.m-field input,.m-field select,.m-field textarea{font-family:inherit;font-size:15.4px;
  color:var(--m-ink);background:var(--m-surf-2);border:1px solid var(--m-line);
  border-radius:7px;padding:10px 12px;width:100%;
  transition:border-color 130ms,box-shadow 130ms,background 130ms}
.m-field input:focus,.m-field select:focus,.m-field textarea:focus{outline:none;
  background:var(--m-surf);border-color:var(--m-acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m-acc) 18%,transparent)}
.m-field textarea{resize:vertical;min-height:84px}
.m-form .m-btn{width:100%;justify-content:center;margin-top:4px}
.m-form-note{font-size:13.2px;color:var(--m-muted);margin-top:11px;line-height:1.5;
  text-align:center}

/* ── Free-download pages (/resources/<download>): summary beside the form ── */
.m-lead{max-width:1180px;margin:0 auto;padding:44px 24px 20px;scroll-margin-top:90px}
.m-lead .m-contact-grid h2{font-size:clamp(23px,3vw,31px)}
.m-contact-grid>div>p.m-lead-meta{font-size:14.9px;color:var(--m-muted);margin-top:20px}
/* Square and flat, like the landing page's contact form (.v2-contact .m-form). */
.m-lead .m-form{border-radius:0;box-shadow:none}
.m-lead-h{font-size:19px;margin:0 0 16px;letter-spacing:-.01em}
.m-field-err{font-size:13.2px;color:var(--m-late);font-weight:600}
.m-field input[aria-invalid=true],.m-field select[aria-invalid=true]{border-color:var(--m-late)}
.m-check{display:flex;gap:10px;align-items:flex-start;font-size:14.3px;line-height:1.45;
  color:var(--m-2nd);margin:4px 0 16px;cursor:pointer}
.m-check input{width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--m-acc)}
.m-lead-thanks p{font-size:16px;line-height:1.55;margin:0 0 18px;color:var(--m-2nd)}
.m-lead-thanks:focus{outline:none}

/* ── Shell-component overrides ──
   .ovs-nav-mark / .ovs-lang-* come from shared.py, which is still on the older
   linen+near-black token set. Re-point them at the indigo scale so the wordmark
   and language toggle match the login page exactly. */
/* The real logo, masked so its 21KB path lives once in this stylesheet rather
   than inline at each of the three places the mark appears on this page. */
.ovs-nav-mark{display:inline-block;height:1.05em;aspect-ratio:1000/692;
  vertical-align:-.16em;margin-right:.3em;flex-shrink:0;background-color:var(--m-brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20692%27%3E%3Cpath%20fill%3D%27%23000%27%20fill-rule%3D%27evenodd%27%20d%3D%27M196.7%20689.4L196.2%20686.9L189.9%20686.9C183.9%20686.9%20183.5%20686.8%20181.8%20684.3C180.0%20681.8%20180.0%20681.8%20171.7%20681.8C163.5%20681.8%20163.4%20681.8%20161.6%20684.3L159.8%20686.9L146.5%20686.9L133.1%20686.9L131.3%20684.3C129.9%20682.4%20128.9%20681.8%20126.6%20681.8C123.9%20681.8%20122.5%20680.7%20111.1%20669.2L98.6%20656.6L55.3%20656.6L11.9%20656.6L10.1%20654.0C8.5%20651.8%207.8%20651.5%204.2%20651.5L0.0%20651.5L0.0%20641.4C0.0%20631.9%200.1%20631.3%201.7%20631.3C2.6%20631.3%204.2%20630.2%205.2%20628.8L7.1%20626.3L50.5%20626.3C83.2%20626.3%2094.2%20626.0%2094.9%20625.3C95.5%20624.7%2096.0%20621.9%2096.0%20618.6C96.0%20613.2%2096.1%20612.8%2098.5%20611.1C100.9%20609.4%20101.0%20609.0%20101.0%20603.5C101.0%20598.1%20101.1%20597.7%20103.5%20596.0C105.6%20594.5%20106.1%20593.6%20106.1%20590.9C106.1%20588.3%20106.5%20587.3%20108.6%20585.9C110.6%20584.4%20111.1%20583.4%20111.1%20581.1C111.1%20578.4%20112.0%20577.3%20118.7%20570.7C125.1%20564.5%20126.3%20562.9%20126.3%20560.6C126.3%20556.8%20132.6%20550.5%20136.4%20550.5C138.7%20550.5%20140.0%20549.6%20143.9%20545.5C148.1%20541.1%20149.1%20540.4%20151.7%20540.4C154.1%20540.4%20155.1%20539.9%20156.6%20537.9C158.0%20535.8%20159.0%20535.4%20161.6%20535.4C164.3%20535.4%20165.2%20534.9%20166.7%20532.8C168.1%20530.8%20169.1%20530.3%20171.7%20530.3C174.4%20530.3%20175.3%20529.8%20176.8%20527.8C178.5%20525.4%20178.9%20525.3%20184.3%20525.3C189.8%20525.3%20190.2%20525.1%20191.9%20522.7L193.7%20520.2L209.6%20520.2L225.5%20520.2L227.3%20522.7C229.2%20525.5%20234.3%20526.3%20236.4%20524.2C237.1%20523.5%20237.4%20513.0%20237.4%20482.2L237.4%20441.2L239.9%20439.4L242.4%20437.6L242.4%20426.8L242.4%20415.9L244.9%20414.1L247.5%20412.3L247.5%20394.3L247.5%20376.2L232.3%20361.1C218.4%20347.3%20217.2%20345.8%20217.2%20343.1C217.2%20340.8%20216.6%20339.8%20214.6%20338.4C212.3%20336.7%20212.1%20336.3%20212.1%20330.8C212.1%20325.3%20212.0%20324.9%20209.6%20323.2C207.2%20321.5%20207.1%20321.1%20207.1%20315.7C207.1%20310.2%20206.9%20309.8%20204.5%20308.1L202.0%20306.3L202.0%20270.2L202.0%20234.1L199.5%20232.3C197.1%20230.6%20197.0%20230.2%20197.0%20224.7C197.0%20219.3%20196.8%20218.9%20194.4%20217.2L191.9%20215.4L191.9%20204.5L191.9%20193.7L189.4%20191.9L186.9%20190.1L186.9%20146.5L186.9%20102.8L189.4%20101.0L191.9%2099.2L191.9%2088.4L191.9%2077.6L194.4%2075.8C196.8%2074.1%20197.0%2073.6%20197.0%2068.2C197.0%2062.7%20197.1%2062.3%20199.5%2060.6C201.9%2058.9%20202.0%2058.5%20202.0%2053.0C202.0%2047.6%20202.2%2047.2%20204.5%2045.5C206.5%2044.1%20207.1%2043.0%20207.1%2040.8C207.1%2038.1%20208.5%2036.4%20223.5%2021.4L239.9%205.1L245.8%205.1C251.7%205.1%20251.7%205.0%20252.2%202.5L252.7%200.0L265.2%200.0L277.6%200.0L278.1%202.5L278.6%205.1L284.9%205.1C290.9%205.1%20291.2%205.2%20292.9%207.6C294.4%209.6%20295.3%2010.1%20298.0%2010.1C300.6%2010.1%20301.6%2010.6%20303.0%2012.6C304.4%2014.6%20305.5%2015.2%20307.7%2015.2C312.0%2015.2%20358.6%2061.5%20358.6%2065.7C358.6%2067.9%20359.8%2069.6%20366.2%2075.8C372.9%2082.3%20373.7%2083.5%20373.7%2086.1C373.7%2088.5%20374.3%2089.5%20376.3%2090.9C378.3%2092.3%20378.8%2093.3%20378.8%2095.7C378.8%2098.3%20379.5%2099.4%20383.8%20103.5C388.2%20107.6%20388.9%20108.7%20388.9%20111.3C388.9%20113.7%20389.4%20114.7%20391.4%20116.2C393.5%20117.6%20393.9%20118.6%20393.9%20121.2C393.9%20123.9%20394.4%20124.8%20396.5%20126.3C398.5%20127.7%20399.0%20128.7%20399.0%20131.3C399.0%20134.0%20399.5%20134.9%20401.5%20136.4C403.6%20137.8%20404.0%20138.8%20404.0%20141.4C404.0%20144.1%20404.5%20145.0%20406.6%20146.5C408.6%20147.9%20409.1%20148.9%20409.1%20151.5C409.1%20154.2%20409.6%20155.1%20411.6%20156.6C414.0%20158.3%20414.1%20158.7%20414.1%20164.1C414.1%20169.6%20414.3%20170.0%20416.7%20171.7C418.7%20173.2%20419.2%20174.1%20419.2%20176.8C419.2%20179.4%20419.7%20180.4%20421.7%20181.8C423.7%20183.2%20424.2%20184.2%20424.2%20186.6C424.2%20194.2%20435.4%20200.0%20439.4%20194.4L441.2%20191.9L494.9%20191.9L548.7%20191.9L550.5%20194.4C552.3%20196.9%20552.4%20197.0%20560.3%20197.0L568.3%20197.0L572.0%20193.2C575.0%20190.3%20575.8%20188.9%20575.8%20186.6C575.8%20184.2%20576.3%20183.2%20578.3%20181.8C580.7%20180.1%20580.8%20179.7%20580.8%20174.2C580.8%20168.8%20580.9%20168.4%20583.3%20166.7C585.4%20165.2%20585.9%20164.3%20585.9%20161.6C585.9%20159.0%20586.3%20158.0%20588.4%20156.6C590.4%20155.1%20590.9%20154.2%20590.9%20151.5C590.9%20148.9%20591.4%20147.9%20593.4%20146.5C595.5%20145.0%20596.0%20144.1%20596.0%20141.4C596.0%20138.8%20596.4%20137.8%20598.5%20136.4C600.5%20134.9%20601.0%20133.9%20601.0%20131.5C601.0%20128.9%20601.7%20127.9%20606.1%20123.7C610.4%20119.6%20611.1%20118.5%20611.1%20115.9C611.1%20113.5%20611.6%20112.5%20613.6%20111.1C615.6%20109.7%20616.2%20108.7%20616.2%20106.3C616.2%20103.7%20616.9%20102.6%20621.2%2098.5C625.4%2094.5%20626.3%2093.2%20626.3%2091.0C626.3%2088.6%20627.3%2087.1%20633.8%2080.8C640.2%2074.6%20641.4%2073.0%20641.4%2070.8C641.4%2066.8%20688.0%2020.2%20692.0%2020.2C694.2%2020.2%20695.6%2019.3%20699.5%2015.2C703.6%2010.8%20704.7%2010.1%20707.3%2010.1C709.7%2010.1%20710.7%209.6%20712.1%207.6C713.8%205.2%20714.2%205.1%20720.2%205.1L726.5%205.1L727.0%202.5L727.5%200.0L739.9%200.0L752.3%200.0L752.8%202.5C753.3%205.1%20753.3%205.1%20759.4%205.1L765.4%205.1L770.2%2010.1C774.1%2014.3%20775.5%2015.2%20777.7%2015.2C781.6%2015.2%20787.9%2021.4%20787.9%2025.3C787.9%2027.6%20788.8%2028.9%20792.9%2032.8C797.3%2036.9%20798.0%2038.0%20798.0%2040.6C798.0%2043.0%20798.5%2044.0%20800.5%2045.5C802.6%2046.9%20803.0%2047.9%20803.0%2050.5C803.0%2053.2%20803.5%2054.1%20805.6%2055.6C808.1%2057.3%20808.1%2057.4%20808.1%2065.7C808.1%2073.9%20808.1%2074.0%20810.6%2075.8L813.1%2077.6L813.1%2090.9L813.1%20104.3L815.7%20106.1L818.2%20107.9L818.2%20136.4L818.2%20164.9L815.7%20166.7L813.1%20168.5L813.1%20181.8L813.1%20195.2L810.6%20197.0C808.1%20198.8%20808.1%20198.8%20808.1%20207.1C808.1%20215.3%20808.1%20215.4%20805.6%20217.2C803.2%20218.9%20803.0%20219.3%20803.0%20224.7C803.0%20230.2%20802.9%20230.6%20800.5%20232.3C798.1%20234.0%20798.0%20234.4%20798.0%20239.9C798.0%20245.4%20797.8%20245.8%20795.5%20247.5C791.8%20250.1%20791.8%20255.0%20795.5%20257.6L798.0%20259.4L798.0%20282.8L798.0%20306.3L795.5%20308.1C792.9%20309.9%20792.9%20309.9%20792.9%20318.2C792.9%20326.4%20792.9%20326.5%20790.4%20328.3C788.3%20329.7%20787.9%20330.7%20787.9%20333.3C787.9%20336.0%20787.4%20336.9%20785.4%20338.4C783.4%20339.8%20782.8%20340.8%20782.8%20343.1C782.8%20345.8%20781.7%20347.2%20770.2%20358.6L757.6%20371.1L757.6%20396.8L757.6%20422.4L760.1%20424.2L762.6%20426.0L762.6%20439.4L762.6%20452.7L765.2%20454.5L767.7%20456.3L767.7%20484.8L767.7%20513.4L765.3%20515.1C762.6%20516.9%20761.1%20525.5%20762.8%20528.8C764.0%20531.1%20766.6%20530.6%20768.1%20527.8L769.4%20525.3L785.3%20525.3L801.2%20525.3L803.0%20527.8C804.8%20530.3%20804.9%20530.3%20813.1%20530.3C821.4%20530.3%20821.4%20530.3%20823.2%20532.8C824.7%20534.9%20825.6%20535.4%20828.3%20535.4C830.9%20535.4%20831.9%20535.8%20833.3%20537.9C834.8%20539.9%20835.7%20540.4%20838.4%20540.4C841.0%20540.4%20842.0%20540.9%20843.4%20542.9C844.9%20544.9%20845.9%20545.5%20848.3%20545.5C850.9%20545.5%20851.9%20546.2%20856.1%20550.5C860.0%20554.7%20861.3%20555.6%20863.6%20555.6C867.4%20555.6%20873.7%20561.8%20873.7%20565.7C873.7%20568.0%20874.9%20569.5%20881.3%20575.8C888.0%20582.3%20888.9%20583.5%20888.9%20586.1C888.9%20588.5%20889.4%20589.5%20891.4%20590.9C893.5%20592.4%20893.9%20593.3%20893.9%20596.0C893.9%20598.6%20894.4%20599.5%20896.5%20601.0L899.0%20602.8L899.0%20613.5C899.0%20620.7%20899.3%20624.6%20900.0%20625.3C900.8%20626.0%20912.3%20626.3%20947.0%20626.3L992.9%20626.3L994.8%20628.8C995.8%20630.2%20997.4%20631.3%20998.3%20631.3C999.9%20631.3%201000.0%20631.9%201000.0%20641.4L1000.0%20651.5L995.8%20651.5C992.2%20651.5%20991.5%20651.8%20989.9%20654.0L988.1%20656.6L942.0%20656.6C892.0%20656.6%20893.9%20656.4%20893.9%20661.4C893.9%20665.6%20882.7%20676.8%20878.5%20676.8C876.2%20676.8%20875.1%20677.3%20873.7%20679.3C872.3%20681.4%20871.3%20681.8%20868.7%20681.8C866.0%20681.8%20865.1%20682.3%20863.6%20684.3L861.8%20686.9L851.0%20686.9L840.2%20686.9L838.4%20684.3L836.6%20681.8L825.8%20681.8L814.9%20681.8L813.1%20684.3L811.3%20686.9L802.5%20686.9L793.7%20686.9L793.2%20689.4L792.7%20691.9L785.4%20691.9L778.0%20691.9L777.5%20689.4L777.0%20686.9L770.7%20686.9C764.7%20686.9%20764.3%20686.8%20762.6%20684.3C759.8%20680.4%20745.2%20680.4%20742.4%20684.3L740.6%20686.9L724.7%20686.9L708.9%20686.9L707.1%20684.3C705.7%20682.4%20704.6%20681.8%20702.3%20681.8C699.6%20681.8%20698.4%20680.8%20689.4%20671.7L679.4%20661.6L497.5%20661.6L315.5%20661.6L305.6%20671.7C296.6%20680.8%20295.3%20681.8%20292.6%20681.8C290.3%20681.8%20289.3%20682.4%20287.9%20684.3L286.1%20686.9L272.7%20686.9L259.4%20686.9L257.6%20684.3L255.8%20681.8L244.9%20681.8L234.1%20681.8L232.3%20684.3C230.6%20686.8%20230.3%20686.9%20224.2%20686.9L218.0%20686.9L217.5%20689.4L217.0%20691.9L207.1%20691.9L197.2%20691.9L196.7%20689.4ZM792.9%20659.1C794.6%20656.7%20795.1%20656.6%20800.4%20656.6C807.4%20656.6%20808.1%20655.9%20808.1%20649.2C808.1%20643.9%20808.2%20643.7%20811.8%20640.1L815.5%20636.4L823.2%20636.4L830.9%20636.4L834.7%20640.1C838.3%20643.7%20838.4%20643.9%20838.4%20649.2C838.4%20656.5%20838.5%20656.6%20850.8%20656.6L861.2%20656.6L865.0%20652.8C868.0%20649.9%20868.7%20648.5%20868.7%20646.2C868.7%20643.8%20869.2%20642.8%20871.2%20641.4L873.7%20639.6L873.7%20628.8L873.7%20618.0L871.2%20616.2C869.2%20614.7%20868.7%20613.8%20868.7%20611.1C868.7%20608.5%20868.2%20607.5%20866.2%20606.1C864.2%20604.6%20863.6%20603.6%20863.6%20601.2C863.6%20598.6%20862.9%20597.5%20858.6%20593.4C854.3%20589.4%20853.5%20588.2%20853.5%20585.7C853.5%20582.1%20852.3%20580.8%20848.6%20580.8C846.1%20580.8%20844.8%20579.9%20838.4%20573.2C831.8%20566.5%20830.7%20565.7%20828.0%20565.7C825.7%20565.7%20824.7%20565.1%20823.2%20563.1C821.8%20561.1%20820.8%20560.6%20818.2%20560.6C815.5%20560.6%20814.6%20560.1%20813.1%20558.1L811.3%20555.6L785.4%20555.6L759.4%20555.6L757.6%20558.1C756.1%20560.1%20755.2%20560.6%20752.5%20560.6C749.9%20560.6%20748.9%20561.1%20747.5%20563.1C746.1%20565.1%20745.0%20565.7%20742.8%20565.7C740.1%20565.7%20738.4%20567.1%20723.5%20582.1C708.5%20597.0%20707.1%20598.7%20707.1%20601.4C707.1%20603.6%20706.5%20604.7%20704.5%20606.1L702.0%20607.9L702.0%20625.9L702.0%20644.0L708.3%20650.3L714.6%20656.6L725.0%20656.6C737.2%20656.6%20737.4%20656.5%20737.4%20649.2C737.4%20643.9%20737.5%20643.7%20741.1%20640.1L744.8%20636.4L752.5%20636.4L760.2%20636.4L764.0%20640.1C767.6%20643.7%20767.7%20643.9%20767.7%20649.2C767.7%20655.4%20768.5%20656.6%20772.8%20656.6C775.4%20656.6%20776.3%20657.1%20777.8%20659.1C779.5%20661.5%20779.9%20661.6%20785.4%20661.6C790.8%20661.6%20791.2%20661.5%20792.9%20659.1ZM157.9%20652.8C161.5%20649.2%20161.6%20649.0%20161.6%20643.8C161.6%20637.5%20162.4%20636.4%20166.8%20636.4C169.5%20636.4%20170.2%20636.0%20171.3%20633.8C172.1%20632.3%20173.3%20631.3%20174.2%20631.3C175.2%20631.3%20176.4%20632.3%20177.2%20633.8C178.3%20636.0%20179.0%20636.4%20181.7%20636.4C185.7%20636.4%20186.9%20637.6%20186.9%20641.5C186.9%20644.1%20187.4%20645.0%20189.4%20646.5C191.4%20647.9%20191.9%20648.9%20191.9%20651.4C191.9%20656.5%20192.3%20656.6%20209.6%20656.6C226.9%20656.6%20227.3%20656.5%20227.3%20651.4C227.3%20648.9%20227.8%20647.9%20229.8%20646.5C231.8%20645.0%20232.3%20644.1%20232.3%20641.5C232.3%20637.6%20233.5%20636.4%20237.5%20636.4C240.2%20636.4%20240.9%20636.0%20242.0%20633.8C242.8%20632.3%20244.0%20631.3%20244.9%20631.3C245.9%20631.3%20247.1%20632.3%20247.9%20633.8C249.0%20636.0%20249.7%20636.4%20252.4%20636.4C257.1%20636.4%20257.6%20637.3%20257.6%20646.5C257.6%20657.0%20256.9%20656.6%20272.7%20656.6C287.2%20656.6%20287.9%20656.3%20287.9%20651.6C287.9%20649.2%20288.6%20648.0%20292.9%20643.9L298.0%20639.2L298.0%20626.0L298.0%20612.9L295.5%20611.1C293.1%20609.4%20292.9%20609.0%20292.9%20603.5C292.9%20598.1%20292.8%20597.7%20290.4%20596.0C288.4%20594.6%20287.9%20593.5%20287.9%20591.2C287.9%20587.0%20266.7%20565.7%20262.5%20565.7C260.3%20565.7%20258.9%20564.7%20255.1%20560.6L250.3%20555.6L244.7%20555.6C239.5%20555.6%20239.1%20555.4%20237.4%20553.0L235.6%20550.5L214.6%20550.5L193.7%20550.5L191.9%20553.0C190.2%20555.4%20189.8%20555.6%20184.3%20555.6C178.9%20555.6%20178.5%20555.7%20176.8%20558.1C175.3%20560.1%20174.3%20560.6%20171.9%20560.6C169.3%20560.6%20168.3%20561.3%20164.1%20565.7C160.2%20569.8%20158.9%20570.7%20156.7%20570.7C152.5%20570.7%20136.4%20587.0%20136.4%20591.2C136.4%20593.5%20135.8%20594.6%20133.8%20596.0C131.8%20597.4%20131.3%20598.4%20131.3%20601.0C131.3%20603.7%20130.8%20604.6%20128.8%20606.1L126.3%20607.9L126.3%20625.9L126.3%20644.0L132.4%20650.2L138.5%20656.5L146.3%20656.5L154.2%20656.6L157.9%20652.8ZM425.6%20627.6C428.6%20624.6%20429.3%20623.3%20429.3%20620.9C429.3%20618.6%20429.8%20617.6%20431.8%20616.2C433.8%20614.7%20434.3%20613.7%20434.3%20611.4C434.3%20608.7%20435.2%20607.6%20441.9%20601.0C448.3%20594.8%20449.5%20593.2%20449.5%20590.9C449.5%20587.1%20455.8%20580.8%20459.7%20580.8C461.9%20580.8%20463.2%20579.9%20467.2%20575.8L471.9%20570.7L477.4%20570.7C485.1%20570.7%20484.8%20571.5%20484.8%20550.5C484.8%20530.4%20484.8%20530.3%20479.7%20530.3C477.2%20530.3%20476.2%20529.8%20474.7%20527.8C473.3%20525.8%20472.3%20525.3%20470.0%20525.3C465.9%20525.3%20459.6%20519.1%20459.6%20515.1C459.6%20512.8%20458.7%20511.5%20454.5%20507.6L449.5%20502.8L449.5%20495.0L449.5%20487.3L455.8%20481.0C461.2%20475.6%20462.4%20474.7%20465.0%20474.7C467.3%20474.7%20468.3%20474.2%20469.7%20472.2L471.5%20469.7L497.5%20469.7L523.5%20469.7L525.3%20472.2C526.7%20474.3%20527.7%20474.7%20530.3%20474.7C533.0%20474.7%20533.9%20475.2%20535.4%20477.3C536.8%20479.3%20537.8%20479.8%20540.3%20479.8C545.3%20479.8%20545.5%20480.4%20545.5%20495.1L545.5%20508.3L542.9%20510.1C540.9%20511.5%20540.4%20512.5%20540.4%20514.9C540.4%20519.1%20534.3%20525.3%20530.0%20525.3C527.7%20525.3%20526.7%20525.8%20525.3%20527.8C523.8%20529.8%20522.8%20530.3%20520.5%20530.3C518.1%20530.3%20516.8%20531.0%20513.8%20534.0L510.1%20537.7L510.1%20550.5L510.1%20563.3L513.8%20567.0C516.8%20570.0%20518.1%20570.7%20520.5%20570.7C522.8%20570.7%20523.8%20571.2%20525.3%20573.2C526.7%20575.2%20527.7%20575.8%20530.0%20575.8C534.4%20575.8%20560.6%20602.0%20560.6%20606.4C560.6%20608.7%20561.2%20609.7%20563.1%20611.1C565.2%20612.6%20565.7%20613.5%20565.7%20616.2C565.7%20618.8%20566.1%20619.7%20568.2%20621.2C570.2%20622.7%20570.7%20623.6%20570.7%20626.2C570.7%20627.9%20571.2%20629.7%20571.7%20630.3C573.2%20631.8%20654.1%20631.8%20655.6%20630.3C656.3%20629.6%20656.6%20624.7%20656.6%20613.8L656.6%20598.4L660.3%20594.6C665.3%20589.6%20674.0%20589.0%20676.3%20593.4C678.7%20598.1%20682.3%20596.4%20681.9%20590.8C681.8%20588.2%20682.2%20587.4%20684.3%20585.9C686.3%20584.4%20686.9%20583.4%20686.9%20581.0C686.9%20578.4%20687.6%20577.3%20691.9%20573.2C696.1%20569.3%20697.0%20568.0%20697.0%20565.7C697.0%20561.9%20703.3%20555.6%20707.1%20555.6C709.4%20555.6%20710.9%20554.4%20717.2%20548.0C723.6%20541.4%20724.9%20540.4%20727.4%20540.4C731.8%20540.4%20732.3%20539.3%20732.3%20530.2C732.3%20522.1%20732.3%20522.0%20734.8%20520.2L737.4%20518.4L737.4%20484.8L737.4%20451.3L734.8%20449.5L732.3%20447.7L732.3%20434.3L732.3%20421.0L729.8%20419.2L727.3%20417.4L727.3%20391.4L727.3%20365.4L729.8%20363.6C732.2%20361.9%20732.3%20361.5%20732.3%20356.2C732.3%20349.7%20733.1%20348.5%20737.2%20348.5C741.4%20348.5%20757.6%20332.3%20757.6%20327.9C757.6%20325.7%20758.1%20324.6%20760.1%20323.2C762.5%20321.5%20762.6%20321.1%20762.6%20315.7C762.6%20310.2%20762.8%20309.8%20765.2%20308.1L767.7%20306.3L767.7%20270.2L767.7%20234.1L770.2%20232.3C772.6%20230.6%20772.7%20230.2%20772.7%20224.7C772.7%20219.3%20772.9%20218.9%20775.3%20217.2C777.8%20215.4%20777.8%20215.3%20777.8%20207.1C777.8%20198.8%20777.8%20198.8%20780.3%20197.0L782.8%20195.2L782.8%20179.3L782.8%20163.4L785.4%20161.6L787.9%20159.8L787.9%20133.8L787.9%20107.9L785.4%20106.1L782.8%20104.3L782.8%2090.9L782.8%2077.6L780.3%2075.8C777.9%2074.1%20777.8%2073.6%20777.8%2068.2C777.8%2062.7%20777.6%2062.3%20775.3%2060.6C773.3%2059.2%20772.7%2058.2%20772.7%2055.9C772.7%2053.3%20771.7%2052.0%20763.9%2044.2L755.1%2035.4L749.6%2035.4C744.4%2035.4%20744.1%2035.2%20742.8%2032.8C742.1%2031.3%20740.9%2030.3%20739.9%2030.3C738.9%2030.3%20737.7%2031.3%20737.0%2032.8C735.7%2035.3%20735.4%2035.4%20729.8%2035.4C724.3%2035.4%20723.9%2035.5%20722.2%2037.9C720.8%2039.9%20719.8%2040.4%20717.2%2040.4C714.5%2040.4%20713.6%2040.9%20712.1%2042.9C710.7%2044.9%20709.7%2045.5%20707.4%2045.5C703.2%2045.5%20666.7%2081.7%20666.7%2085.9C666.7%2088.2%20665.4%2089.8%20659.1%2096.0C652.6%20102.3%20651.5%20103.7%20651.5%20106.1C651.5%20108.4%20650.6%20109.7%20646.5%20113.6C642.3%20117.6%20641.4%20118.9%20641.4%20121.2C641.4%20123.5%20640.6%20124.8%20636.4%20128.8C632.0%20132.9%20631.3%20134.0%20631.3%20136.6C631.3%20139.0%20630.8%20140.0%20628.8%20141.4C626.7%20142.9%20626.3%20143.8%20626.3%20146.5C626.3%20149.1%20625.8%20150.0%20623.7%20151.5C621.7%20153.0%20621.2%20153.9%20621.2%20156.6C621.2%20159.2%20620.7%20160.1%20618.7%20161.6C616.6%20163.1%20616.2%20164.0%20616.2%20166.7C616.2%20169.3%20615.7%20170.3%20613.6%20171.7C611.6%20173.2%20611.1%20174.1%20611.1%20176.8C611.1%20179.4%20610.6%20180.4%20608.6%20181.8C606.5%20183.3%20606.1%20184.2%20606.1%20186.9C606.1%20189.5%20605.6%20190.5%20603.5%20191.9C601.1%20193.6%20601.0%20194.0%20601.0%20199.5C601.0%20205.0%20600.9%20205.4%20598.5%20207.1C596.1%20208.8%20596.0%20209.2%20596.0%20214.3L596.0%20219.8L589.7%20226.1C582.3%20233.5%20579.0%20234.4%20575.8%20229.8L574.0%20227.3L563.1%20227.3L552.3%20227.3L550.5%20224.7L548.7%20222.2L530.3%20222.2L511.9%20222.2L510.1%20219.7C507.5%20216.1%20502.6%20216.1%20500.0%20219.7L498.2%20222.2L469.7%20222.2L441.2%20222.2L439.4%20224.7L437.6%20227.3L424.5%20227.3L411.5%20227.3L407.8%20223.6C404.8%20220.6%20404.0%20219.2%20404.0%20216.9C404.0%20214.6%20403.5%20213.5%20401.5%20212.1C399.1%20210.4%20399.0%20210.0%20399.0%20204.5C399.0%20199.1%20398.9%20198.7%20396.5%20197.0C394.4%20195.5%20393.9%20194.6%20393.9%20191.9C393.9%20189.3%20393.5%20188.3%20391.4%20186.9C389.0%20185.2%20388.9%20184.8%20388.9%20179.3C388.9%20173.8%20388.7%20173.4%20386.4%20171.7C384.3%20170.3%20383.8%20169.3%20383.8%20166.7C383.8%20164.0%20383.4%20163.1%20381.3%20161.6C379.3%20160.1%20378.8%20159.2%20378.8%20156.6C378.8%20153.9%20378.3%20153.0%20376.3%20151.5C374.2%20150.0%20373.7%20149.1%20373.7%20146.5C373.7%20143.8%20373.3%20142.9%20371.2%20141.4C369.2%20140.0%20368.7%20139.0%20368.7%20136.6C368.7%20134.0%20368.0%20132.9%20363.6%20128.8C359.3%20124.7%20358.6%20123.6%20358.6%20121.0C358.6%20118.6%20358.1%20117.6%20356.1%20116.2C354.1%20114.7%20353.5%20113.7%20353.5%20111.3C353.5%20108.7%20352.8%20107.6%20348.5%20103.5C344.3%2099.6%20343.4%2098.3%20343.4%2096.0C343.4%2093.6%20342.1%2092.0%20333.3%2083.3C324.7%2074.8%20323.2%2073.0%20323.2%2070.8C323.2%2066.8%20301.8%2045.5%20297.9%2045.5C295.7%2045.5%20294.3%2044.5%20290.4%2040.4L285.6%2035.4L277.5%2035.4L269.4%2035.4L268.1%2032.8C266.4%2029.5%20263.9%2029.5%20262.2%2032.8C261.0%2035.2%20260.7%2035.4%20255.4%2035.4L249.9%2035.4L243.6%2041.6C238.2%2047.0%20237.4%2048.3%20237.4%2050.8C237.4%2053.1%20236.8%2054.1%20234.8%2055.6C232.8%2057.0%20232.3%2058.0%20232.3%2060.6C232.3%2063.3%20231.9%2064.2%20229.8%2065.7C227.4%2067.4%20227.3%2067.8%20227.3%2073.2C227.3%2078.7%20227.1%2079.1%20224.7%2080.8L222.2%2082.6L222.2%2093.4L222.2%20104.3L219.7%20106.1L217.2%20107.9L217.2%20146.5L217.2%20185.1L219.7%20186.9L222.2%20188.7L222.2%20199.5L222.2%20210.3L224.7%20212.1C227.3%20213.9%20227.3%20214.0%20227.3%20222.2C227.3%20230.5%20227.3%20230.5%20229.8%20232.3L232.3%20234.1L232.3%20270.2L232.3%20306.3L234.8%20308.1C237.2%20309.8%20237.4%20310.2%20237.4%20315.4L237.4%20321.0L242.4%20325.8C246.6%20329.7%20247.5%20331.0%20247.5%20333.3C247.5%20337.1%20253.8%20343.4%20257.6%20343.4C259.7%20343.4%20261.3%20344.6%20266.5%20349.7L272.7%20356.0L272.7%20396.8L272.7%20437.6L270.2%20439.4L267.7%20441.2L267.7%20454.5L267.7%20467.9L265.2%20469.7L262.6%20471.5L262.6%20487.4L262.6%20503.3L265.2%20505.1L267.7%20506.8L267.7%20519.9L267.7%20533.0L271.4%20536.7C274.2%20539.5%20275.8%20540.4%20277.7%20540.4C281.7%20540.4%20308.1%20566.8%20308.1%20570.8C308.1%20572.9%20309.0%20574.4%20312.6%20577.8C315.0%20580.1%20317.5%20582.9%20318.1%20584.0C319.5%20586.6%20322.1%20586.4%20323.7%20583.3C326.1%20578.6%20329.7%20579.7%20337.2%20587.1L343.4%20593.4L343.4%20611.3C343.4%20624.2%20343.7%20629.6%20344.4%20630.3C345.2%20631.1%20355.1%20631.3%20383.7%20631.3L421.9%20631.3L425.6%20627.6ZM539.4%20630.3C541.5%20628.2%20540.6%20623.2%20537.9%20621.2C535.9%20619.8%20535.4%20618.8%20535.4%20616.5C535.4%20612.1%20524.2%20601.0%20519.9%20601.0C517.6%20601.0%20516.6%20600.5%20515.2%20598.5C513.7%20596.4%20512.8%20596.0%20510.1%20596.0C507.4%20596.0%20506.5%20595.5%20505.1%20593.4C503.4%20591.0%20502.9%20590.9%20497.5%20590.9C492.0%20590.9%20491.6%20591.0%20489.9%20593.4C488.5%20595.4%20487.5%20596.0%20485.2%20596.0C480.9%20596.0%20454.5%20622.2%20454.5%20626.5C454.5%20628.0%20455.0%20629.7%20455.6%20630.3C457.0%20631.8%20537.9%20631.8%20539.4%20630.3ZM634.9%20566.9C632.2%20564.1%20631.3%20562.6%20631.3%20560.5C631.3%20558.3%20630.4%20557.0%20626.3%20553.0C622.2%20549.1%20621.2%20547.8%20621.2%20545.6C621.2%20541.6%20574.7%20494.9%20570.7%20494.9C566.9%20494.9%20550.5%20478.6%20550.5%20474.7C550.5%20470.7%20539.1%20459.6%20535.0%20459.6C532.7%20459.6%20531.7%20459.0%20530.3%20457.1C528.6%20454.7%20528.2%20454.5%20522.7%20454.5C517.3%20454.5%20516.9%20454.4%20515.2%20452.0L513.4%20449.5L500.0%20449.5L486.6%20449.5L484.8%20452.0C483.1%20454.4%20482.7%20454.5%20477.3%20454.5C471.8%20454.5%20471.4%20454.7%20469.7%20457.1C468.0%20459.4%20467.5%20459.6%20462.4%20459.6L457.0%20459.6L450.7%20465.9C445.6%20470.9%20444.4%20472.6%20444.4%20474.7C444.4%20478.6%20418.0%20505.1%20414.1%20505.1C410.3%20505.1%20399.0%20516.4%20399.0%20520.2C399.0%20522.5%20397.0%20524.8%20383.8%20537.9C370.6%20551.0%20368.7%20553.3%20368.7%20555.6C368.7%20557.6%20367.8%20559.1%20365.0%20561.9L361.2%20565.7L353.5%20565.7L345.8%20565.7L342.1%20561.9C336.7%20556.5%20336.9%20554.2%20343.4%20548.0C347.6%20544.0%20348.5%20542.7%20348.5%20540.4C348.5%20538.1%20349.6%20536.6%20356.1%20530.3C362.4%20524.1%20363.6%20522.5%20363.6%20520.3C363.6%20516.3%20410.2%20469.7%20414.2%20469.7C416.3%20469.7%20418.0%20468.5%20423.0%20463.4L429.3%20457.2L429.3%20452.0C429.3%20445.5%20434.3%20439.4%20439.7%20439.4C442.0%20439.4%20443.0%20438.9%20444.4%20436.9C445.9%20434.8%20446.8%20434.3%20449.5%20434.3C452.1%20434.3%20453.1%20433.9%20454.5%20431.8C456.0%20429.8%20456.9%20429.3%20459.6%20429.3C462.2%20429.3%20463.2%20428.8%20464.6%20426.8L466.4%20424.2L497.5%20424.2L528.5%20424.2L530.3%20426.8C532.0%20429.2%20532.4%20429.3%20537.9%20429.3C543.3%20429.3%20543.8%20429.4%20545.5%20431.8C546.9%20433.8%20547.9%20434.3%20550.2%20434.3C552.8%20434.3%20554.1%20435.4%20561.9%20443.2L570.7%20452.0L570.7%20457.1C570.7%20463.5%20575.7%20469.7%20580.9%20469.7C583.1%20469.7%20584.5%20470.6%20588.4%20474.7C592.3%20478.9%20593.7%20479.8%20595.9%20479.8C599.8%20479.8%20611.1%20491.1%20611.1%20495.0C611.1%20497.2%20612.8%20499.3%20623.7%20510.1C634.8%20521.1%20636.4%20522.9%20636.4%20525.3C636.4%20527.6%20637.3%20528.9%20641.4%20532.8C645.6%20536.8%20646.5%20538.1%20646.5%20540.4C646.5%20542.7%20647.3%20544.0%20651.5%20548.0L656.6%20552.8L656.6%20558.2C656.6%20564.5%20655.8%20565.7%20651.4%20565.7C648.9%20565.7%20647.9%20566.1%20646.5%20568.2C643.6%20572.1%20639.5%20571.7%20634.9%20566.9ZM358.6%20457.1C356.9%20454.7%20356.4%20454.5%20351.3%20454.5L345.9%20454.5L337.1%20445.7C329.3%20437.9%20328.3%20436.6%20328.3%20434.0C328.3%20431.7%20327.7%20430.7%20325.8%20429.3L323.2%20427.5L323.2%20416.7L323.2%20405.8L325.8%20404.0C327.7%20402.6%20328.3%20401.6%20328.3%20399.3C328.3%20396.7%20329.3%20395.4%20337.1%20387.6L345.9%20378.8L361.4%20378.8L377.0%20378.8L378.8%20381.3C380.2%20383.3%20381.2%20383.8%20383.5%20383.8C387.9%20383.8%20399.0%20395.0%20399.0%20399.3C399.0%20401.6%20399.5%20402.6%20401.5%20404.0L404.0%20405.8L404.0%20416.7L404.0%20427.5L401.5%20429.3C399.5%20430.7%20399.0%20431.7%20399.0%20434.0C399.0%20438.4%20382.8%20454.5%20378.5%20454.5C376.2%20454.5%20375.1%20455.1%20373.7%20457.1C372.0%20459.5%20371.6%20459.6%20366.2%20459.6C360.7%20459.6%20360.3%20459.5%20358.6%20457.1ZM626.3%20457.1C624.9%20455.1%20623.8%20454.5%20621.5%20454.5C619.0%20454.5%20617.6%20453.5%20609.8%20445.7C602.0%20437.9%20601.0%20436.6%20601.0%20434.0C601.0%20431.7%20600.5%20430.7%20598.5%20429.3C596.0%20427.5%20596.0%20427.5%20596.0%20419.2C596.0%20410.9%20596.0%20410.9%20598.5%20409.1C600.8%20407.4%20601.0%20406.9%20601.0%20401.8L601.0%20396.4L607.3%20390.1C612.7%20384.7%20614.0%20383.8%20616.5%20383.8C618.8%20383.8%20619.8%20383.3%20621.2%20381.3L623.0%20378.8L636.4%20378.8L649.7%20378.8L651.5%20381.3C652.9%20383.3%20653.9%20383.8%20656.2%20383.8C660.6%20383.8%20671.7%20395.0%20671.7%20399.3C671.7%20401.6%20672.3%20402.6%20674.2%20404.0L676.8%20405.8L676.8%20416.7L676.8%20427.5L674.2%20429.3C672.2%20430.8%20671.7%20431.7%20671.7%20434.3C671.7%20437.0%20671.3%20437.9%20669.2%20439.4C667.2%20440.8%20666.7%20441.8%20666.7%20444.3C666.7%20448.3%20665.5%20449.5%20661.5%20449.5C659.0%20449.5%20658.0%20450.0%20656.6%20452.0C655.1%20454.1%20654.2%20454.5%20651.5%20454.5C648.9%20454.5%20647.9%20455.0%20646.5%20457.1C644.7%20459.6%20644.6%20459.6%20636.4%20459.6C628.1%20459.6%20628.1%20459.6%20626.3%20457.1ZM680.3%20294.2C673.1%20286.8%20671.7%20285.0%20671.7%20282.8C671.7%20279.0%20665.4%20272.7%20661.6%20272.7C659.3%20272.7%20657.8%20271.6%20651.5%20265.2C645.2%20258.7%20643.7%20257.6%20641.4%20257.6C639.1%20257.6%20637.8%20256.7%20633.8%20252.5C629.8%20248.2%20628.6%20247.5%20626.1%20247.5C622.4%20247.5%20621.2%20246.2%20621.2%20242.3C621.2%20239.8%20620.7%20238.8%20618.7%20237.4C614.7%20234.6%20615.1%20230.7%20619.9%20225.9L623.6%20222.2L631.6%20222.2C639.5%20222.2%20639.6%20222.2%20641.4%20224.7C642.9%20226.8%20643.8%20227.3%20646.5%20227.3C649.1%20227.3%20650.0%20227.7%20651.5%20229.8C652.9%20231.8%20654.0%20232.3%20656.2%20232.3C660.7%20232.3%20702.0%20273.7%20702.0%20278.1C702.0%20280.4%20702.6%20281.4%20704.5%20282.8C709.1%20286.1%20708.2%20289.3%20700.8%20296.8C692.0%20305.6%20691.5%20305.5%20680.3%20294.2ZM291.5%20294.2C288.0%20290.7%20287.9%20290.3%20287.9%20285.3L287.9%20280.0L292.9%20275.3C297.0%20271.4%20298.0%20270.0%20298.0%20267.8C298.0%20263.8%20324.4%20237.4%20328.4%20237.4C330.6%20237.4%20332.0%20236.4%20335.9%20232.3C340.0%20228.0%20341.1%20227.3%20343.7%20227.3C346.1%20227.3%20347.1%20226.8%20348.5%20224.7C350.0%20222.7%20350.9%20222.2%20353.5%20222.2C356.2%20222.2%20357.1%20221.8%20358.6%20219.7C360.1%20217.6%20361.0%20217.2%20363.7%20217.2C366.5%20217.2%20367.2%20216.8%20368.3%20214.6C369.9%20211.5%20372.6%20211.3%20373.9%20214.2C374.4%20215.4%20375.7%20216.9%20376.8%20217.6C378.7%20218.8%20378.8%20219.4%20378.8%20226.9L378.8%20234.9L372.5%20241.2C367.3%20246.4%20365.8%20247.5%20363.5%20247.5C361.3%20247.5%20360.0%20248.4%20356.1%20252.5C352.2%20256.6%20350.8%20257.6%20348.6%20257.6C344.6%20257.6%20318.2%20284.0%20318.2%20287.9C318.2%20289.9%20317.3%20291.5%20314.5%20294.3L310.7%20298.0L302.9%20297.9L295.0%20297.9L291.5%20294.2Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20692%27%3E%3Cpath%20fill%3D%27%23000%27%20fill-rule%3D%27evenodd%27%20d%3D%27M196.7%20689.4L196.2%20686.9L189.9%20686.9C183.9%20686.9%20183.5%20686.8%20181.8%20684.3C180.0%20681.8%20180.0%20681.8%20171.7%20681.8C163.5%20681.8%20163.4%20681.8%20161.6%20684.3L159.8%20686.9L146.5%20686.9L133.1%20686.9L131.3%20684.3C129.9%20682.4%20128.9%20681.8%20126.6%20681.8C123.9%20681.8%20122.5%20680.7%20111.1%20669.2L98.6%20656.6L55.3%20656.6L11.9%20656.6L10.1%20654.0C8.5%20651.8%207.8%20651.5%204.2%20651.5L0.0%20651.5L0.0%20641.4C0.0%20631.9%200.1%20631.3%201.7%20631.3C2.6%20631.3%204.2%20630.2%205.2%20628.8L7.1%20626.3L50.5%20626.3C83.2%20626.3%2094.2%20626.0%2094.9%20625.3C95.5%20624.7%2096.0%20621.9%2096.0%20618.6C96.0%20613.2%2096.1%20612.8%2098.5%20611.1C100.9%20609.4%20101.0%20609.0%20101.0%20603.5C101.0%20598.1%20101.1%20597.7%20103.5%20596.0C105.6%20594.5%20106.1%20593.6%20106.1%20590.9C106.1%20588.3%20106.5%20587.3%20108.6%20585.9C110.6%20584.4%20111.1%20583.4%20111.1%20581.1C111.1%20578.4%20112.0%20577.3%20118.7%20570.7C125.1%20564.5%20126.3%20562.9%20126.3%20560.6C126.3%20556.8%20132.6%20550.5%20136.4%20550.5C138.7%20550.5%20140.0%20549.6%20143.9%20545.5C148.1%20541.1%20149.1%20540.4%20151.7%20540.4C154.1%20540.4%20155.1%20539.9%20156.6%20537.9C158.0%20535.8%20159.0%20535.4%20161.6%20535.4C164.3%20535.4%20165.2%20534.9%20166.7%20532.8C168.1%20530.8%20169.1%20530.3%20171.7%20530.3C174.4%20530.3%20175.3%20529.8%20176.8%20527.8C178.5%20525.4%20178.9%20525.3%20184.3%20525.3C189.8%20525.3%20190.2%20525.1%20191.9%20522.7L193.7%20520.2L209.6%20520.2L225.5%20520.2L227.3%20522.7C229.2%20525.5%20234.3%20526.3%20236.4%20524.2C237.1%20523.5%20237.4%20513.0%20237.4%20482.2L237.4%20441.2L239.9%20439.4L242.4%20437.6L242.4%20426.8L242.4%20415.9L244.9%20414.1L247.5%20412.3L247.5%20394.3L247.5%20376.2L232.3%20361.1C218.4%20347.3%20217.2%20345.8%20217.2%20343.1C217.2%20340.8%20216.6%20339.8%20214.6%20338.4C212.3%20336.7%20212.1%20336.3%20212.1%20330.8C212.1%20325.3%20212.0%20324.9%20209.6%20323.2C207.2%20321.5%20207.1%20321.1%20207.1%20315.7C207.1%20310.2%20206.9%20309.8%20204.5%20308.1L202.0%20306.3L202.0%20270.2L202.0%20234.1L199.5%20232.3C197.1%20230.6%20197.0%20230.2%20197.0%20224.7C197.0%20219.3%20196.8%20218.9%20194.4%20217.2L191.9%20215.4L191.9%20204.5L191.9%20193.7L189.4%20191.9L186.9%20190.1L186.9%20146.5L186.9%20102.8L189.4%20101.0L191.9%2099.2L191.9%2088.4L191.9%2077.6L194.4%2075.8C196.8%2074.1%20197.0%2073.6%20197.0%2068.2C197.0%2062.7%20197.1%2062.3%20199.5%2060.6C201.9%2058.9%20202.0%2058.5%20202.0%2053.0C202.0%2047.6%20202.2%2047.2%20204.5%2045.5C206.5%2044.1%20207.1%2043.0%20207.1%2040.8C207.1%2038.1%20208.5%2036.4%20223.5%2021.4L239.9%205.1L245.8%205.1C251.7%205.1%20251.7%205.0%20252.2%202.5L252.7%200.0L265.2%200.0L277.6%200.0L278.1%202.5L278.6%205.1L284.9%205.1C290.9%205.1%20291.2%205.2%20292.9%207.6C294.4%209.6%20295.3%2010.1%20298.0%2010.1C300.6%2010.1%20301.6%2010.6%20303.0%2012.6C304.4%2014.6%20305.5%2015.2%20307.7%2015.2C312.0%2015.2%20358.6%2061.5%20358.6%2065.7C358.6%2067.9%20359.8%2069.6%20366.2%2075.8C372.9%2082.3%20373.7%2083.5%20373.7%2086.1C373.7%2088.5%20374.3%2089.5%20376.3%2090.9C378.3%2092.3%20378.8%2093.3%20378.8%2095.7C378.8%2098.3%20379.5%2099.4%20383.8%20103.5C388.2%20107.6%20388.9%20108.7%20388.9%20111.3C388.9%20113.7%20389.4%20114.7%20391.4%20116.2C393.5%20117.6%20393.9%20118.6%20393.9%20121.2C393.9%20123.9%20394.4%20124.8%20396.5%20126.3C398.5%20127.7%20399.0%20128.7%20399.0%20131.3C399.0%20134.0%20399.5%20134.9%20401.5%20136.4C403.6%20137.8%20404.0%20138.8%20404.0%20141.4C404.0%20144.1%20404.5%20145.0%20406.6%20146.5C408.6%20147.9%20409.1%20148.9%20409.1%20151.5C409.1%20154.2%20409.6%20155.1%20411.6%20156.6C414.0%20158.3%20414.1%20158.7%20414.1%20164.1C414.1%20169.6%20414.3%20170.0%20416.7%20171.7C418.7%20173.2%20419.2%20174.1%20419.2%20176.8C419.2%20179.4%20419.7%20180.4%20421.7%20181.8C423.7%20183.2%20424.2%20184.2%20424.2%20186.6C424.2%20194.2%20435.4%20200.0%20439.4%20194.4L441.2%20191.9L494.9%20191.9L548.7%20191.9L550.5%20194.4C552.3%20196.9%20552.4%20197.0%20560.3%20197.0L568.3%20197.0L572.0%20193.2C575.0%20190.3%20575.8%20188.9%20575.8%20186.6C575.8%20184.2%20576.3%20183.2%20578.3%20181.8C580.7%20180.1%20580.8%20179.7%20580.8%20174.2C580.8%20168.8%20580.9%20168.4%20583.3%20166.7C585.4%20165.2%20585.9%20164.3%20585.9%20161.6C585.9%20159.0%20586.3%20158.0%20588.4%20156.6C590.4%20155.1%20590.9%20154.2%20590.9%20151.5C590.9%20148.9%20591.4%20147.9%20593.4%20146.5C595.5%20145.0%20596.0%20144.1%20596.0%20141.4C596.0%20138.8%20596.4%20137.8%20598.5%20136.4C600.5%20134.9%20601.0%20133.9%20601.0%20131.5C601.0%20128.9%20601.7%20127.9%20606.1%20123.7C610.4%20119.6%20611.1%20118.5%20611.1%20115.9C611.1%20113.5%20611.6%20112.5%20613.6%20111.1C615.6%20109.7%20616.2%20108.7%20616.2%20106.3C616.2%20103.7%20616.9%20102.6%20621.2%2098.5C625.4%2094.5%20626.3%2093.2%20626.3%2091.0C626.3%2088.6%20627.3%2087.1%20633.8%2080.8C640.2%2074.6%20641.4%2073.0%20641.4%2070.8C641.4%2066.8%20688.0%2020.2%20692.0%2020.2C694.2%2020.2%20695.6%2019.3%20699.5%2015.2C703.6%2010.8%20704.7%2010.1%20707.3%2010.1C709.7%2010.1%20710.7%209.6%20712.1%207.6C713.8%205.2%20714.2%205.1%20720.2%205.1L726.5%205.1L727.0%202.5L727.5%200.0L739.9%200.0L752.3%200.0L752.8%202.5C753.3%205.1%20753.3%205.1%20759.4%205.1L765.4%205.1L770.2%2010.1C774.1%2014.3%20775.5%2015.2%20777.7%2015.2C781.6%2015.2%20787.9%2021.4%20787.9%2025.3C787.9%2027.6%20788.8%2028.9%20792.9%2032.8C797.3%2036.9%20798.0%2038.0%20798.0%2040.6C798.0%2043.0%20798.5%2044.0%20800.5%2045.5C802.6%2046.9%20803.0%2047.9%20803.0%2050.5C803.0%2053.2%20803.5%2054.1%20805.6%2055.6C808.1%2057.3%20808.1%2057.4%20808.1%2065.7C808.1%2073.9%20808.1%2074.0%20810.6%2075.8L813.1%2077.6L813.1%2090.9L813.1%20104.3L815.7%20106.1L818.2%20107.9L818.2%20136.4L818.2%20164.9L815.7%20166.7L813.1%20168.5L813.1%20181.8L813.1%20195.2L810.6%20197.0C808.1%20198.8%20808.1%20198.8%20808.1%20207.1C808.1%20215.3%20808.1%20215.4%20805.6%20217.2C803.2%20218.9%20803.0%20219.3%20803.0%20224.7C803.0%20230.2%20802.9%20230.6%20800.5%20232.3C798.1%20234.0%20798.0%20234.4%20798.0%20239.9C798.0%20245.4%20797.8%20245.8%20795.5%20247.5C791.8%20250.1%20791.8%20255.0%20795.5%20257.6L798.0%20259.4L798.0%20282.8L798.0%20306.3L795.5%20308.1C792.9%20309.9%20792.9%20309.9%20792.9%20318.2C792.9%20326.4%20792.9%20326.5%20790.4%20328.3C788.3%20329.7%20787.9%20330.7%20787.9%20333.3C787.9%20336.0%20787.4%20336.9%20785.4%20338.4C783.4%20339.8%20782.8%20340.8%20782.8%20343.1C782.8%20345.8%20781.7%20347.2%20770.2%20358.6L757.6%20371.1L757.6%20396.8L757.6%20422.4L760.1%20424.2L762.6%20426.0L762.6%20439.4L762.6%20452.7L765.2%20454.5L767.7%20456.3L767.7%20484.8L767.7%20513.4L765.3%20515.1C762.6%20516.9%20761.1%20525.5%20762.8%20528.8C764.0%20531.1%20766.6%20530.6%20768.1%20527.8L769.4%20525.3L785.3%20525.3L801.2%20525.3L803.0%20527.8C804.8%20530.3%20804.9%20530.3%20813.1%20530.3C821.4%20530.3%20821.4%20530.3%20823.2%20532.8C824.7%20534.9%20825.6%20535.4%20828.3%20535.4C830.9%20535.4%20831.9%20535.8%20833.3%20537.9C834.8%20539.9%20835.7%20540.4%20838.4%20540.4C841.0%20540.4%20842.0%20540.9%20843.4%20542.9C844.9%20544.9%20845.9%20545.5%20848.3%20545.5C850.9%20545.5%20851.9%20546.2%20856.1%20550.5C860.0%20554.7%20861.3%20555.6%20863.6%20555.6C867.4%20555.6%20873.7%20561.8%20873.7%20565.7C873.7%20568.0%20874.9%20569.5%20881.3%20575.8C888.0%20582.3%20888.9%20583.5%20888.9%20586.1C888.9%20588.5%20889.4%20589.5%20891.4%20590.9C893.5%20592.4%20893.9%20593.3%20893.9%20596.0C893.9%20598.6%20894.4%20599.5%20896.5%20601.0L899.0%20602.8L899.0%20613.5C899.0%20620.7%20899.3%20624.6%20900.0%20625.3C900.8%20626.0%20912.3%20626.3%20947.0%20626.3L992.9%20626.3L994.8%20628.8C995.8%20630.2%20997.4%20631.3%20998.3%20631.3C999.9%20631.3%201000.0%20631.9%201000.0%20641.4L1000.0%20651.5L995.8%20651.5C992.2%20651.5%20991.5%20651.8%20989.9%20654.0L988.1%20656.6L942.0%20656.6C892.0%20656.6%20893.9%20656.4%20893.9%20661.4C893.9%20665.6%20882.7%20676.8%20878.5%20676.8C876.2%20676.8%20875.1%20677.3%20873.7%20679.3C872.3%20681.4%20871.3%20681.8%20868.7%20681.8C866.0%20681.8%20865.1%20682.3%20863.6%20684.3L861.8%20686.9L851.0%20686.9L840.2%20686.9L838.4%20684.3L836.6%20681.8L825.8%20681.8L814.9%20681.8L813.1%20684.3L811.3%20686.9L802.5%20686.9L793.7%20686.9L793.2%20689.4L792.7%20691.9L785.4%20691.9L778.0%20691.9L777.5%20689.4L777.0%20686.9L770.7%20686.9C764.7%20686.9%20764.3%20686.8%20762.6%20684.3C759.8%20680.4%20745.2%20680.4%20742.4%20684.3L740.6%20686.9L724.7%20686.9L708.9%20686.9L707.1%20684.3C705.7%20682.4%20704.6%20681.8%20702.3%20681.8C699.6%20681.8%20698.4%20680.8%20689.4%20671.7L679.4%20661.6L497.5%20661.6L315.5%20661.6L305.6%20671.7C296.6%20680.8%20295.3%20681.8%20292.6%20681.8C290.3%20681.8%20289.3%20682.4%20287.9%20684.3L286.1%20686.9L272.7%20686.9L259.4%20686.9L257.6%20684.3L255.8%20681.8L244.9%20681.8L234.1%20681.8L232.3%20684.3C230.6%20686.8%20230.3%20686.9%20224.2%20686.9L218.0%20686.9L217.5%20689.4L217.0%20691.9L207.1%20691.9L197.2%20691.9L196.7%20689.4ZM792.9%20659.1C794.6%20656.7%20795.1%20656.6%20800.4%20656.6C807.4%20656.6%20808.1%20655.9%20808.1%20649.2C808.1%20643.9%20808.2%20643.7%20811.8%20640.1L815.5%20636.4L823.2%20636.4L830.9%20636.4L834.7%20640.1C838.3%20643.7%20838.4%20643.9%20838.4%20649.2C838.4%20656.5%20838.5%20656.6%20850.8%20656.6L861.2%20656.6L865.0%20652.8C868.0%20649.9%20868.7%20648.5%20868.7%20646.2C868.7%20643.8%20869.2%20642.8%20871.2%20641.4L873.7%20639.6L873.7%20628.8L873.7%20618.0L871.2%20616.2C869.2%20614.7%20868.7%20613.8%20868.7%20611.1C868.7%20608.5%20868.2%20607.5%20866.2%20606.1C864.2%20604.6%20863.6%20603.6%20863.6%20601.2C863.6%20598.6%20862.9%20597.5%20858.6%20593.4C854.3%20589.4%20853.5%20588.2%20853.5%20585.7C853.5%20582.1%20852.3%20580.8%20848.6%20580.8C846.1%20580.8%20844.8%20579.9%20838.4%20573.2C831.8%20566.5%20830.7%20565.7%20828.0%20565.7C825.7%20565.7%20824.7%20565.1%20823.2%20563.1C821.8%20561.1%20820.8%20560.6%20818.2%20560.6C815.5%20560.6%20814.6%20560.1%20813.1%20558.1L811.3%20555.6L785.4%20555.6L759.4%20555.6L757.6%20558.1C756.1%20560.1%20755.2%20560.6%20752.5%20560.6C749.9%20560.6%20748.9%20561.1%20747.5%20563.1C746.1%20565.1%20745.0%20565.7%20742.8%20565.7C740.1%20565.7%20738.4%20567.1%20723.5%20582.1C708.5%20597.0%20707.1%20598.7%20707.1%20601.4C707.1%20603.6%20706.5%20604.7%20704.5%20606.1L702.0%20607.9L702.0%20625.9L702.0%20644.0L708.3%20650.3L714.6%20656.6L725.0%20656.6C737.2%20656.6%20737.4%20656.5%20737.4%20649.2C737.4%20643.9%20737.5%20643.7%20741.1%20640.1L744.8%20636.4L752.5%20636.4L760.2%20636.4L764.0%20640.1C767.6%20643.7%20767.7%20643.9%20767.7%20649.2C767.7%20655.4%20768.5%20656.6%20772.8%20656.6C775.4%20656.6%20776.3%20657.1%20777.8%20659.1C779.5%20661.5%20779.9%20661.6%20785.4%20661.6C790.8%20661.6%20791.2%20661.5%20792.9%20659.1ZM157.9%20652.8C161.5%20649.2%20161.6%20649.0%20161.6%20643.8C161.6%20637.5%20162.4%20636.4%20166.8%20636.4C169.5%20636.4%20170.2%20636.0%20171.3%20633.8C172.1%20632.3%20173.3%20631.3%20174.2%20631.3C175.2%20631.3%20176.4%20632.3%20177.2%20633.8C178.3%20636.0%20179.0%20636.4%20181.7%20636.4C185.7%20636.4%20186.9%20637.6%20186.9%20641.5C186.9%20644.1%20187.4%20645.0%20189.4%20646.5C191.4%20647.9%20191.9%20648.9%20191.9%20651.4C191.9%20656.5%20192.3%20656.6%20209.6%20656.6C226.9%20656.6%20227.3%20656.5%20227.3%20651.4C227.3%20648.9%20227.8%20647.9%20229.8%20646.5C231.8%20645.0%20232.3%20644.1%20232.3%20641.5C232.3%20637.6%20233.5%20636.4%20237.5%20636.4C240.2%20636.4%20240.9%20636.0%20242.0%20633.8C242.8%20632.3%20244.0%20631.3%20244.9%20631.3C245.9%20631.3%20247.1%20632.3%20247.9%20633.8C249.0%20636.0%20249.7%20636.4%20252.4%20636.4C257.1%20636.4%20257.6%20637.3%20257.6%20646.5C257.6%20657.0%20256.9%20656.6%20272.7%20656.6C287.2%20656.6%20287.9%20656.3%20287.9%20651.6C287.9%20649.2%20288.6%20648.0%20292.9%20643.9L298.0%20639.2L298.0%20626.0L298.0%20612.9L295.5%20611.1C293.1%20609.4%20292.9%20609.0%20292.9%20603.5C292.9%20598.1%20292.8%20597.7%20290.4%20596.0C288.4%20594.6%20287.9%20593.5%20287.9%20591.2C287.9%20587.0%20266.7%20565.7%20262.5%20565.7C260.3%20565.7%20258.9%20564.7%20255.1%20560.6L250.3%20555.6L244.7%20555.6C239.5%20555.6%20239.1%20555.4%20237.4%20553.0L235.6%20550.5L214.6%20550.5L193.7%20550.5L191.9%20553.0C190.2%20555.4%20189.8%20555.6%20184.3%20555.6C178.9%20555.6%20178.5%20555.7%20176.8%20558.1C175.3%20560.1%20174.3%20560.6%20171.9%20560.6C169.3%20560.6%20168.3%20561.3%20164.1%20565.7C160.2%20569.8%20158.9%20570.7%20156.7%20570.7C152.5%20570.7%20136.4%20587.0%20136.4%20591.2C136.4%20593.5%20135.8%20594.6%20133.8%20596.0C131.8%20597.4%20131.3%20598.4%20131.3%20601.0C131.3%20603.7%20130.8%20604.6%20128.8%20606.1L126.3%20607.9L126.3%20625.9L126.3%20644.0L132.4%20650.2L138.5%20656.5L146.3%20656.5L154.2%20656.6L157.9%20652.8ZM425.6%20627.6C428.6%20624.6%20429.3%20623.3%20429.3%20620.9C429.3%20618.6%20429.8%20617.6%20431.8%20616.2C433.8%20614.7%20434.3%20613.7%20434.3%20611.4C434.3%20608.7%20435.2%20607.6%20441.9%20601.0C448.3%20594.8%20449.5%20593.2%20449.5%20590.9C449.5%20587.1%20455.8%20580.8%20459.7%20580.8C461.9%20580.8%20463.2%20579.9%20467.2%20575.8L471.9%20570.7L477.4%20570.7C485.1%20570.7%20484.8%20571.5%20484.8%20550.5C484.8%20530.4%20484.8%20530.3%20479.7%20530.3C477.2%20530.3%20476.2%20529.8%20474.7%20527.8C473.3%20525.8%20472.3%20525.3%20470.0%20525.3C465.9%20525.3%20459.6%20519.1%20459.6%20515.1C459.6%20512.8%20458.7%20511.5%20454.5%20507.6L449.5%20502.8L449.5%20495.0L449.5%20487.3L455.8%20481.0C461.2%20475.6%20462.4%20474.7%20465.0%20474.7C467.3%20474.7%20468.3%20474.2%20469.7%20472.2L471.5%20469.7L497.5%20469.7L523.5%20469.7L525.3%20472.2C526.7%20474.3%20527.7%20474.7%20530.3%20474.7C533.0%20474.7%20533.9%20475.2%20535.4%20477.3C536.8%20479.3%20537.8%20479.8%20540.3%20479.8C545.3%20479.8%20545.5%20480.4%20545.5%20495.1L545.5%20508.3L542.9%20510.1C540.9%20511.5%20540.4%20512.5%20540.4%20514.9C540.4%20519.1%20534.3%20525.3%20530.0%20525.3C527.7%20525.3%20526.7%20525.8%20525.3%20527.8C523.8%20529.8%20522.8%20530.3%20520.5%20530.3C518.1%20530.3%20516.8%20531.0%20513.8%20534.0L510.1%20537.7L510.1%20550.5L510.1%20563.3L513.8%20567.0C516.8%20570.0%20518.1%20570.7%20520.5%20570.7C522.8%20570.7%20523.8%20571.2%20525.3%20573.2C526.7%20575.2%20527.7%20575.8%20530.0%20575.8C534.4%20575.8%20560.6%20602.0%20560.6%20606.4C560.6%20608.7%20561.2%20609.7%20563.1%20611.1C565.2%20612.6%20565.7%20613.5%20565.7%20616.2C565.7%20618.8%20566.1%20619.7%20568.2%20621.2C570.2%20622.7%20570.7%20623.6%20570.7%20626.2C570.7%20627.9%20571.2%20629.7%20571.7%20630.3C573.2%20631.8%20654.1%20631.8%20655.6%20630.3C656.3%20629.6%20656.6%20624.7%20656.6%20613.8L656.6%20598.4L660.3%20594.6C665.3%20589.6%20674.0%20589.0%20676.3%20593.4C678.7%20598.1%20682.3%20596.4%20681.9%20590.8C681.8%20588.2%20682.2%20587.4%20684.3%20585.9C686.3%20584.4%20686.9%20583.4%20686.9%20581.0C686.9%20578.4%20687.6%20577.3%20691.9%20573.2C696.1%20569.3%20697.0%20568.0%20697.0%20565.7C697.0%20561.9%20703.3%20555.6%20707.1%20555.6C709.4%20555.6%20710.9%20554.4%20717.2%20548.0C723.6%20541.4%20724.9%20540.4%20727.4%20540.4C731.8%20540.4%20732.3%20539.3%20732.3%20530.2C732.3%20522.1%20732.3%20522.0%20734.8%20520.2L737.4%20518.4L737.4%20484.8L737.4%20451.3L734.8%20449.5L732.3%20447.7L732.3%20434.3L732.3%20421.0L729.8%20419.2L727.3%20417.4L727.3%20391.4L727.3%20365.4L729.8%20363.6C732.2%20361.9%20732.3%20361.5%20732.3%20356.2C732.3%20349.7%20733.1%20348.5%20737.2%20348.5C741.4%20348.5%20757.6%20332.3%20757.6%20327.9C757.6%20325.7%20758.1%20324.6%20760.1%20323.2C762.5%20321.5%20762.6%20321.1%20762.6%20315.7C762.6%20310.2%20762.8%20309.8%20765.2%20308.1L767.7%20306.3L767.7%20270.2L767.7%20234.1L770.2%20232.3C772.6%20230.6%20772.7%20230.2%20772.7%20224.7C772.7%20219.3%20772.9%20218.9%20775.3%20217.2C777.8%20215.4%20777.8%20215.3%20777.8%20207.1C777.8%20198.8%20777.8%20198.8%20780.3%20197.0L782.8%20195.2L782.8%20179.3L782.8%20163.4L785.4%20161.6L787.9%20159.8L787.9%20133.8L787.9%20107.9L785.4%20106.1L782.8%20104.3L782.8%2090.9L782.8%2077.6L780.3%2075.8C777.9%2074.1%20777.8%2073.6%20777.8%2068.2C777.8%2062.7%20777.6%2062.3%20775.3%2060.6C773.3%2059.2%20772.7%2058.2%20772.7%2055.9C772.7%2053.3%20771.7%2052.0%20763.9%2044.2L755.1%2035.4L749.6%2035.4C744.4%2035.4%20744.1%2035.2%20742.8%2032.8C742.1%2031.3%20740.9%2030.3%20739.9%2030.3C738.9%2030.3%20737.7%2031.3%20737.0%2032.8C735.7%2035.3%20735.4%2035.4%20729.8%2035.4C724.3%2035.4%20723.9%2035.5%20722.2%2037.9C720.8%2039.9%20719.8%2040.4%20717.2%2040.4C714.5%2040.4%20713.6%2040.9%20712.1%2042.9C710.7%2044.9%20709.7%2045.5%20707.4%2045.5C703.2%2045.5%20666.7%2081.7%20666.7%2085.9C666.7%2088.2%20665.4%2089.8%20659.1%2096.0C652.6%20102.3%20651.5%20103.7%20651.5%20106.1C651.5%20108.4%20650.6%20109.7%20646.5%20113.6C642.3%20117.6%20641.4%20118.9%20641.4%20121.2C641.4%20123.5%20640.6%20124.8%20636.4%20128.8C632.0%20132.9%20631.3%20134.0%20631.3%20136.6C631.3%20139.0%20630.8%20140.0%20628.8%20141.4C626.7%20142.9%20626.3%20143.8%20626.3%20146.5C626.3%20149.1%20625.8%20150.0%20623.7%20151.5C621.7%20153.0%20621.2%20153.9%20621.2%20156.6C621.2%20159.2%20620.7%20160.1%20618.7%20161.6C616.6%20163.1%20616.2%20164.0%20616.2%20166.7C616.2%20169.3%20615.7%20170.3%20613.6%20171.7C611.6%20173.2%20611.1%20174.1%20611.1%20176.8C611.1%20179.4%20610.6%20180.4%20608.6%20181.8C606.5%20183.3%20606.1%20184.2%20606.1%20186.9C606.1%20189.5%20605.6%20190.5%20603.5%20191.9C601.1%20193.6%20601.0%20194.0%20601.0%20199.5C601.0%20205.0%20600.9%20205.4%20598.5%20207.1C596.1%20208.8%20596.0%20209.2%20596.0%20214.3L596.0%20219.8L589.7%20226.1C582.3%20233.5%20579.0%20234.4%20575.8%20229.8L574.0%20227.3L563.1%20227.3L552.3%20227.3L550.5%20224.7L548.7%20222.2L530.3%20222.2L511.9%20222.2L510.1%20219.7C507.5%20216.1%20502.6%20216.1%20500.0%20219.7L498.2%20222.2L469.7%20222.2L441.2%20222.2L439.4%20224.7L437.6%20227.3L424.5%20227.3L411.5%20227.3L407.8%20223.6C404.8%20220.6%20404.0%20219.2%20404.0%20216.9C404.0%20214.6%20403.5%20213.5%20401.5%20212.1C399.1%20210.4%20399.0%20210.0%20399.0%20204.5C399.0%20199.1%20398.9%20198.7%20396.5%20197.0C394.4%20195.5%20393.9%20194.6%20393.9%20191.9C393.9%20189.3%20393.5%20188.3%20391.4%20186.9C389.0%20185.2%20388.9%20184.8%20388.9%20179.3C388.9%20173.8%20388.7%20173.4%20386.4%20171.7C384.3%20170.3%20383.8%20169.3%20383.8%20166.7C383.8%20164.0%20383.4%20163.1%20381.3%20161.6C379.3%20160.1%20378.8%20159.2%20378.8%20156.6C378.8%20153.9%20378.3%20153.0%20376.3%20151.5C374.2%20150.0%20373.7%20149.1%20373.7%20146.5C373.7%20143.8%20373.3%20142.9%20371.2%20141.4C369.2%20140.0%20368.7%20139.0%20368.7%20136.6C368.7%20134.0%20368.0%20132.9%20363.6%20128.8C359.3%20124.7%20358.6%20123.6%20358.6%20121.0C358.6%20118.6%20358.1%20117.6%20356.1%20116.2C354.1%20114.7%20353.5%20113.7%20353.5%20111.3C353.5%20108.7%20352.8%20107.6%20348.5%20103.5C344.3%2099.6%20343.4%2098.3%20343.4%2096.0C343.4%2093.6%20342.1%2092.0%20333.3%2083.3C324.7%2074.8%20323.2%2073.0%20323.2%2070.8C323.2%2066.8%20301.8%2045.5%20297.9%2045.5C295.7%2045.5%20294.3%2044.5%20290.4%2040.4L285.6%2035.4L277.5%2035.4L269.4%2035.4L268.1%2032.8C266.4%2029.5%20263.9%2029.5%20262.2%2032.8C261.0%2035.2%20260.7%2035.4%20255.4%2035.4L249.9%2035.4L243.6%2041.6C238.2%2047.0%20237.4%2048.3%20237.4%2050.8C237.4%2053.1%20236.8%2054.1%20234.8%2055.6C232.8%2057.0%20232.3%2058.0%20232.3%2060.6C232.3%2063.3%20231.9%2064.2%20229.8%2065.7C227.4%2067.4%20227.3%2067.8%20227.3%2073.2C227.3%2078.7%20227.1%2079.1%20224.7%2080.8L222.2%2082.6L222.2%2093.4L222.2%20104.3L219.7%20106.1L217.2%20107.9L217.2%20146.5L217.2%20185.1L219.7%20186.9L222.2%20188.7L222.2%20199.5L222.2%20210.3L224.7%20212.1C227.3%20213.9%20227.3%20214.0%20227.3%20222.2C227.3%20230.5%20227.3%20230.5%20229.8%20232.3L232.3%20234.1L232.3%20270.2L232.3%20306.3L234.8%20308.1C237.2%20309.8%20237.4%20310.2%20237.4%20315.4L237.4%20321.0L242.4%20325.8C246.6%20329.7%20247.5%20331.0%20247.5%20333.3C247.5%20337.1%20253.8%20343.4%20257.6%20343.4C259.7%20343.4%20261.3%20344.6%20266.5%20349.7L272.7%20356.0L272.7%20396.8L272.7%20437.6L270.2%20439.4L267.7%20441.2L267.7%20454.5L267.7%20467.9L265.2%20469.7L262.6%20471.5L262.6%20487.4L262.6%20503.3L265.2%20505.1L267.7%20506.8L267.7%20519.9L267.7%20533.0L271.4%20536.7C274.2%20539.5%20275.8%20540.4%20277.7%20540.4C281.7%20540.4%20308.1%20566.8%20308.1%20570.8C308.1%20572.9%20309.0%20574.4%20312.6%20577.8C315.0%20580.1%20317.5%20582.9%20318.1%20584.0C319.5%20586.6%20322.1%20586.4%20323.7%20583.3C326.1%20578.6%20329.7%20579.7%20337.2%20587.1L343.4%20593.4L343.4%20611.3C343.4%20624.2%20343.7%20629.6%20344.4%20630.3C345.2%20631.1%20355.1%20631.3%20383.7%20631.3L421.9%20631.3L425.6%20627.6ZM539.4%20630.3C541.5%20628.2%20540.6%20623.2%20537.9%20621.2C535.9%20619.8%20535.4%20618.8%20535.4%20616.5C535.4%20612.1%20524.2%20601.0%20519.9%20601.0C517.6%20601.0%20516.6%20600.5%20515.2%20598.5C513.7%20596.4%20512.8%20596.0%20510.1%20596.0C507.4%20596.0%20506.5%20595.5%20505.1%20593.4C503.4%20591.0%20502.9%20590.9%20497.5%20590.9C492.0%20590.9%20491.6%20591.0%20489.9%20593.4C488.5%20595.4%20487.5%20596.0%20485.2%20596.0C480.9%20596.0%20454.5%20622.2%20454.5%20626.5C454.5%20628.0%20455.0%20629.7%20455.6%20630.3C457.0%20631.8%20537.9%20631.8%20539.4%20630.3ZM634.9%20566.9C632.2%20564.1%20631.3%20562.6%20631.3%20560.5C631.3%20558.3%20630.4%20557.0%20626.3%20553.0C622.2%20549.1%20621.2%20547.8%20621.2%20545.6C621.2%20541.6%20574.7%20494.9%20570.7%20494.9C566.9%20494.9%20550.5%20478.6%20550.5%20474.7C550.5%20470.7%20539.1%20459.6%20535.0%20459.6C532.7%20459.6%20531.7%20459.0%20530.3%20457.1C528.6%20454.7%20528.2%20454.5%20522.7%20454.5C517.3%20454.5%20516.9%20454.4%20515.2%20452.0L513.4%20449.5L500.0%20449.5L486.6%20449.5L484.8%20452.0C483.1%20454.4%20482.7%20454.5%20477.3%20454.5C471.8%20454.5%20471.4%20454.7%20469.7%20457.1C468.0%20459.4%20467.5%20459.6%20462.4%20459.6L457.0%20459.6L450.7%20465.9C445.6%20470.9%20444.4%20472.6%20444.4%20474.7C444.4%20478.6%20418.0%20505.1%20414.1%20505.1C410.3%20505.1%20399.0%20516.4%20399.0%20520.2C399.0%20522.5%20397.0%20524.8%20383.8%20537.9C370.6%20551.0%20368.7%20553.3%20368.7%20555.6C368.7%20557.6%20367.8%20559.1%20365.0%20561.9L361.2%20565.7L353.5%20565.7L345.8%20565.7L342.1%20561.9C336.7%20556.5%20336.9%20554.2%20343.4%20548.0C347.6%20544.0%20348.5%20542.7%20348.5%20540.4C348.5%20538.1%20349.6%20536.6%20356.1%20530.3C362.4%20524.1%20363.6%20522.5%20363.6%20520.3C363.6%20516.3%20410.2%20469.7%20414.2%20469.7C416.3%20469.7%20418.0%20468.5%20423.0%20463.4L429.3%20457.2L429.3%20452.0C429.3%20445.5%20434.3%20439.4%20439.7%20439.4C442.0%20439.4%20443.0%20438.9%20444.4%20436.9C445.9%20434.8%20446.8%20434.3%20449.5%20434.3C452.1%20434.3%20453.1%20433.9%20454.5%20431.8C456.0%20429.8%20456.9%20429.3%20459.6%20429.3C462.2%20429.3%20463.2%20428.8%20464.6%20426.8L466.4%20424.2L497.5%20424.2L528.5%20424.2L530.3%20426.8C532.0%20429.2%20532.4%20429.3%20537.9%20429.3C543.3%20429.3%20543.8%20429.4%20545.5%20431.8C546.9%20433.8%20547.9%20434.3%20550.2%20434.3C552.8%20434.3%20554.1%20435.4%20561.9%20443.2L570.7%20452.0L570.7%20457.1C570.7%20463.5%20575.7%20469.7%20580.9%20469.7C583.1%20469.7%20584.5%20470.6%20588.4%20474.7C592.3%20478.9%20593.7%20479.8%20595.9%20479.8C599.8%20479.8%20611.1%20491.1%20611.1%20495.0C611.1%20497.2%20612.8%20499.3%20623.7%20510.1C634.8%20521.1%20636.4%20522.9%20636.4%20525.3C636.4%20527.6%20637.3%20528.9%20641.4%20532.8C645.6%20536.8%20646.5%20538.1%20646.5%20540.4C646.5%20542.7%20647.3%20544.0%20651.5%20548.0L656.6%20552.8L656.6%20558.2C656.6%20564.5%20655.8%20565.7%20651.4%20565.7C648.9%20565.7%20647.9%20566.1%20646.5%20568.2C643.6%20572.1%20639.5%20571.7%20634.9%20566.9ZM358.6%20457.1C356.9%20454.7%20356.4%20454.5%20351.3%20454.5L345.9%20454.5L337.1%20445.7C329.3%20437.9%20328.3%20436.6%20328.3%20434.0C328.3%20431.7%20327.7%20430.7%20325.8%20429.3L323.2%20427.5L323.2%20416.7L323.2%20405.8L325.8%20404.0C327.7%20402.6%20328.3%20401.6%20328.3%20399.3C328.3%20396.7%20329.3%20395.4%20337.1%20387.6L345.9%20378.8L361.4%20378.8L377.0%20378.8L378.8%20381.3C380.2%20383.3%20381.2%20383.8%20383.5%20383.8C387.9%20383.8%20399.0%20395.0%20399.0%20399.3C399.0%20401.6%20399.5%20402.6%20401.5%20404.0L404.0%20405.8L404.0%20416.7L404.0%20427.5L401.5%20429.3C399.5%20430.7%20399.0%20431.7%20399.0%20434.0C399.0%20438.4%20382.8%20454.5%20378.5%20454.5C376.2%20454.5%20375.1%20455.1%20373.7%20457.1C372.0%20459.5%20371.6%20459.6%20366.2%20459.6C360.7%20459.6%20360.3%20459.5%20358.6%20457.1ZM626.3%20457.1C624.9%20455.1%20623.8%20454.5%20621.5%20454.5C619.0%20454.5%20617.6%20453.5%20609.8%20445.7C602.0%20437.9%20601.0%20436.6%20601.0%20434.0C601.0%20431.7%20600.5%20430.7%20598.5%20429.3C596.0%20427.5%20596.0%20427.5%20596.0%20419.2C596.0%20410.9%20596.0%20410.9%20598.5%20409.1C600.8%20407.4%20601.0%20406.9%20601.0%20401.8L601.0%20396.4L607.3%20390.1C612.7%20384.7%20614.0%20383.8%20616.5%20383.8C618.8%20383.8%20619.8%20383.3%20621.2%20381.3L623.0%20378.8L636.4%20378.8L649.7%20378.8L651.5%20381.3C652.9%20383.3%20653.9%20383.8%20656.2%20383.8C660.6%20383.8%20671.7%20395.0%20671.7%20399.3C671.7%20401.6%20672.3%20402.6%20674.2%20404.0L676.8%20405.8L676.8%20416.7L676.8%20427.5L674.2%20429.3C672.2%20430.8%20671.7%20431.7%20671.7%20434.3C671.7%20437.0%20671.3%20437.9%20669.2%20439.4C667.2%20440.8%20666.7%20441.8%20666.7%20444.3C666.7%20448.3%20665.5%20449.5%20661.5%20449.5C659.0%20449.5%20658.0%20450.0%20656.6%20452.0C655.1%20454.1%20654.2%20454.5%20651.5%20454.5C648.9%20454.5%20647.9%20455.0%20646.5%20457.1C644.7%20459.6%20644.6%20459.6%20636.4%20459.6C628.1%20459.6%20628.1%20459.6%20626.3%20457.1ZM680.3%20294.2C673.1%20286.8%20671.7%20285.0%20671.7%20282.8C671.7%20279.0%20665.4%20272.7%20661.6%20272.7C659.3%20272.7%20657.8%20271.6%20651.5%20265.2C645.2%20258.7%20643.7%20257.6%20641.4%20257.6C639.1%20257.6%20637.8%20256.7%20633.8%20252.5C629.8%20248.2%20628.6%20247.5%20626.1%20247.5C622.4%20247.5%20621.2%20246.2%20621.2%20242.3C621.2%20239.8%20620.7%20238.8%20618.7%20237.4C614.7%20234.6%20615.1%20230.7%20619.9%20225.9L623.6%20222.2L631.6%20222.2C639.5%20222.2%20639.6%20222.2%20641.4%20224.7C642.9%20226.8%20643.8%20227.3%20646.5%20227.3C649.1%20227.3%20650.0%20227.7%20651.5%20229.8C652.9%20231.8%20654.0%20232.3%20656.2%20232.3C660.7%20232.3%20702.0%20273.7%20702.0%20278.1C702.0%20280.4%20702.6%20281.4%20704.5%20282.8C709.1%20286.1%20708.2%20289.3%20700.8%20296.8C692.0%20305.6%20691.5%20305.5%20680.3%20294.2ZM291.5%20294.2C288.0%20290.7%20287.9%20290.3%20287.9%20285.3L287.9%20280.0L292.9%20275.3C297.0%20271.4%20298.0%20270.0%20298.0%20267.8C298.0%20263.8%20324.4%20237.4%20328.4%20237.4C330.6%20237.4%20332.0%20236.4%20335.9%20232.3C340.0%20228.0%20341.1%20227.3%20343.7%20227.3C346.1%20227.3%20347.1%20226.8%20348.5%20224.7C350.0%20222.7%20350.9%20222.2%20353.5%20222.2C356.2%20222.2%20357.1%20221.8%20358.6%20219.7C360.1%20217.6%20361.0%20217.2%20363.7%20217.2C366.5%20217.2%20367.2%20216.8%20368.3%20214.6C369.9%20211.5%20372.6%20211.3%20373.9%20214.2C374.4%20215.4%20375.7%20216.9%20376.8%20217.6C378.7%20218.8%20378.8%20219.4%20378.8%20226.9L378.8%20234.9L372.5%20241.2C367.3%20246.4%20365.8%20247.5%20363.5%20247.5C361.3%20247.5%20360.0%20248.4%20356.1%20252.5C352.2%20256.6%20350.8%20257.6%20348.6%20257.6C344.6%20257.6%20318.2%20284.0%20318.2%20287.9C318.2%20289.9%20317.3%20291.5%20314.5%20294.3L310.7%20298.0L302.9%20297.9L295.0%20297.9L291.5%20294.2Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.ovs-nav-mark svg{display:none}
/* On the black hero panel the mark reverses to white; on the pink utility bar
   it goes to ink — pink on pink would vanish. */
.m-hero-left .ovs-nav-mark{background-color:#fff}
.m-util .ovs-nav-mark{background-color:#fff}
/* The nav mark carries the brand on the one bar that is on every marketing page,
   so it is sized against the wordmark rather than inheriting the 1.05em default
   the inline uses want. Scoped to .m-brand: the footer and the legal pages use
   the same class at body size, where a larger mark would tower over its line. */
.m-page .m-brand .ovs-nav-mark{height:1.45em}
.m-page .ovs-nav-lang{border-color:var(--m-line);background:var(--m-surf)}
.m-page .ovs-lang-btn{color:var(--m-muted)}
.m-page .ovs-lang-btn:hover{color:var(--m-ink)}
.m-page .ovs-lang-btn.active{background:var(--m-acc);color:#fff}
.m-page .ovs-lang-sep{background:var(--m-line)}

/* ── Bilingual switch (driven by html.lang-en) ── */
.m-en{display:none}
html.lang-en .m-fr{display:none}
html.lang-en .m-en{display:inline}

/* ── Entrance ── */
@keyframes mUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m-hero>*:not(.m-bp){animation:mUp .5s cubic-bezier(.2,.7,.3,1) both}
.m-hero>*:nth-child(2){animation-delay:.05s}
.m-hero>*:nth-child(3){animation-delay:.10s}
.m-hero>*:nth-child(4){animation-delay:.15s}
.m-hero>*:nth-child(5){animation-delay:.20s}
.m-hero>*:nth-child(6){animation-delay:.26s}
@media(prefers-reduced-motion:reduce){.m-hero>*:not(.m-bp){animation:none}}

/* Container query, not a media query: the frame's width depends on the hero
   column, not the viewport, so viewport breakpoints cannot describe it. */
/* 182 was measured for 'Review queue', a nav entry the app no longer has.
   140 is measured the same way for the entries that exist: the widest row's
   content is 115px ('Needs you' plus its count badge, English) and the rail
   pads 10 each side, so 135 is the floor and 140 is it with a margin. Below
   this the CHAT gives way first, then the rail: the page is the last column
   worth showing. */
@container (max-width:600px){
  .m-prod-body{grid-template-columns:140px 1fr}
  .m-prod-chat{display:none}
}
@container (max-width:420px){
  .m-prod-body{grid-template-columns:1fr}
  .m-prod-rail{display:none}
}
/* 540, not 760: the redesigned preview (calendar + review list) reads fine in
   two columns down to ~270px each, and the real dashboard IS two-column — the
   old threshold stacked it at every desktop width. */
@container (max-width:540px){
  .m-prod-split{grid-template-columns:1fr}
}

/* ── Language dropdown (utility bar) ─────────────────────────────────────────
   A <details> menu rather than the old two-pill toggle: it scales past two
   languages, and it opens without JavaScript. Each row shows the language's
   own name for itself. */
.m-lang{position:relative;display:inline-block;
  /* the base template styles <details> for FAQ accordions (max-width:760px;
     margin:12px auto;border-bottom) - undo all of it here or the dropdown
     centres itself in the bar and grows a stray rule under it */
  margin:0;padding:0;border:0;max-width:none}
.m-lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;padding:5px 12px;border-radius:999px;font-size:13.8px;font-weight:700;
  color:#fff;background:#14121f;border:1px solid #14121f;
  transition:opacity 140ms}
.m-lang summary::-webkit-details-marker{display:none}
.m-lang summary:hover{opacity:.8}
.m-lang summary svg:first-child{width:14px;height:14px}
.m-lang-chev{width:12px;height:12px;transition:transform 160ms}
.m-lang[open] .m-lang-chev{transform:rotate(180deg)}
.m-lang-panel{position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:300;min-width:172px;
  background:#fff;border:1px solid var(--m-line);border-radius:12px;padding:6px;
  box-shadow:0 12px 34px rgba(26,25,22,.16);display:flex;flex-direction:column;gap:2px}
.m-lang-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:8px;font-size:14.9px;font-weight:600;color:var(--m-ink);
  transition:background 120ms}
.m-lang-item:hover{background:var(--m-surf-2)}
.m-lang-item.active{color:var(--m-acc)}
.m-lang-item svg{width:15px;height:15px;color:var(--m-acc)}

/* ── Marketing SUBPAGES (platform / solutions / resources) ──
   THE ONE COPY. This block previously existed twice: a rich version in
   marketing.py's _PAGE_CSS that was never injected anywhere, and a drifted
   summary inlined in templates/base.html that actually shipped. The drift is
   what a visitor saw: no .m-art-h rule, so the artwork heading rendered as
   "Command CenterOne property"; no .m-blk-solo, so an artless block kept a
   two-column grid with one column empty. base.html now carries only the
   chrome and legal styles; everything below ships from here. */
.m-ph{padding:64px 24px 40px;max-width:1180px;margin:0 auto;text-align:center}
.m-ph-in{max-width:760px;margin:0 auto}
.m-ph h1{font-size:clamp(30px,5vw,50px);line-height:1.05;letter-spacing:-.035em;
  margin:10px 0 16px}
.m-ph p.lede{font-size:19.8px;line-height:1.6;color:var(--m-2nd);margin:0 0 26px}
.m-ph-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;justify-content:center}
.m-crumb{font-size:13.2px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--m-brand)}
.m-crumb a{color:var(--m-muted)}
.m-crumb a:hover{color:var(--m-brand)}

.m-blk{max-width:1180px;margin:0 auto;padding:26px 24px;display:grid;
  grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.m-blk:nth-child(even) .m-blk-art{order:-1}
@media(max-width:860px){.m-blk{grid-template-columns:1fr;gap:22px}
  .m-blk:nth-child(even) .m-blk-art{order:0}}
.m-blk h2{font-size:clamp(21px,3vw,29px);letter-spacing:-.025em;margin:0 0 12px}
.m-blk p{font-size:17.1px;line-height:1.65;margin:0 0 14px}
.m-blk ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.m-blk li{display:flex;gap:9px;font-size:16px;color:var(--m-2nd);line-height:1.55}
.m-blk li i{width:16px;height:16px;color:var(--m-ok);flex-shrink:0;margin-top:3px}
/* An artless block reads as one centred column, never half a grid. */
.m-blk-solo{grid-template-columns:1fr}
.m-blk-solo>div{max-width:760px;margin:0 auto;text-align:center}

.m-blk-art{background:var(--m-cardbg);border:1px solid var(--m-cardline);
  border-radius:12px;box-shadow:var(--m-sh-sm);padding:16px 18px;min-width:0}
.m-art-h{font-size:13.2px;font-weight:700;letter-spacing:.02em;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.m-art-h em{font-style:normal;font-size:12.1px;font-weight:500;color:var(--m-muted)}
.m-art-r{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13.8px;
  border-top:1px solid var(--m-line)}
.m-art-r:first-of-type{border-top:none}
.m-art-r .t{flex:1;min-width:0;font-weight:600;color:var(--m-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-art-r .s{font-size:12.7px;color:var(--m-muted);white-space:nowrap}
.m-art-note{font-size:12.1px;color:var(--m-muted);margin-top:10px}

.m-specs{background:var(--m-surf-2);border-top:1px solid var(--m-line);
  border-bottom:1px solid var(--m-line);margin-top:26px}
.m-specs-in{max-width:1180px;margin:0 auto;padding:34px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;text-align:center}
.m-spec b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;
  color:var(--m-ink);margin-bottom:4px}
.m-spec span{font-size:14.9px;color:var(--m-2nd);line-height:1.55}

/* FAQ: served open (see marketing.py _faq); the marker still signals folding.
   Scoped to section>details: `.m-page details` outweighed `.m-lang`'s reset
   (class+element beats class), so the utility bar's language <details> caught
   this margin:0 auto and the pill floated to the centre of the bar. */
.m-page section>details{max-width:760px;margin:0 auto;padding:16px 14px;
  border-bottom:1px solid var(--m-line)}
.m-page section>details summary{font-weight:700;font-size:17.1px;cursor:pointer}
.m-page section>details p{font-size:16px;line-height:1.65;color:var(--m-2nd);margin:10px 0 0}

.m-close{max-width:1180px;margin:0 auto;padding:56px 24px 68px;text-align:center}
.m-close h2{font-size:clamp(23px,3.4vw,33px);letter-spacing:-.028em;margin:0 0 10px}
.m-close p{font-size:17.6px;color:var(--m-2nd);margin:0 auto 22px;max-width:560px}

/* Related: labelled and visibly clickable. These rendered as two anonymous
   bordered boxes with no heading, no hover and no affordance — information
   cards to the eye, though they are the only navigation on the page. */
.m-rel-head{max-width:1180px;margin:0 auto;padding:0 24px 12px;font-size:13.2px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--m-muted)}
.m-related{max-width:1180px;margin:0 auto;padding:0 24px 56px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.m-rel{position:relative;display:block;background:var(--m-surf);
  border:1px solid var(--m-line);border-radius:10px;padding:16px 40px 16px 18px;
  transition:border-color 160ms,box-shadow 160ms}
.m-rel::after{content:"→";position:absolute;right:16px;top:50%;
  transform:translateY(-50%);font-size:16.5px;color:var(--m-muted);
  transition:transform 160ms,color 160ms}
.m-rel:hover{border-color:var(--m-brand);box-shadow:var(--m-sh-sm)}
.m-rel:hover::after{color:var(--m-brand);transform:translateY(-50%) translateX(3px)}
.m-rel b{display:block;font-size:14.5px;color:var(--m-ink);margin-bottom:3px}
.m-rel span{font-size:14.3px;color:var(--m-2nd)}

.m-tblwrap{max-width:1180px;margin:0 auto;padding:12px 24px 8px;overflow-x:auto}
.m-tbl{width:100%;border-collapse:collapse;font-size:14.9px;min-width:860px}
.m-tbl th{text-align:left;padding:10px 12px;font-size:12.1px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--m-muted);
  border-bottom:2px solid var(--m-line)}
.m-tbl td{padding:11px 12px;border-bottom:1px solid var(--m-line);
  color:var(--m-2nd);vertical-align:top}
.m-tbl td.d{font-weight:600;color:var(--m-ink)}
.m-tbl td.i{white-space:nowrap;font-weight:600;color:var(--m-ink)}
.m-tbl td.c{font-size:13.8px;color:var(--m-muted)}
.m-tbl tr:hover td{background:#f6e1f3}
/* The About page's key facts: two columns of short text inside a 760px reading
   column, so the duty table's 860px floor would clip the value column. */
.m-tblwrap:has(.m-facts){padding-left:0;padding-right:0}
.m-facts{min-width:0}
.m-facts th[scope=row]{width:32%;vertical-align:top;border-bottom:1px solid var(--m-line)}
.m-facts td{overflow-wrap:anywhere}
.m-notice{max-width:1180px;margin:0 auto;padding:0 24px 8px}
.m-notice div{background:var(--m-warn-bg);border:1px solid rgba(187,90,8,.22);
  border-radius:10px;padding:13px 16px;font-size:14.3px;color:var(--m-warn);
  line-height:1.55}

/* The real product, on a solutions page. The browser-framed mock is the same
   one the homepage hero renders (_hero_mockup — example data, and it says so);
   the abstract three-row cards further down are then variations on something
   the visitor has already seen for real. scroll-margin clears the sticky nav
   when the hero's "How it works" anchors here. */
.m-ph-product{max-width:1020px;margin:0 auto;padding:0 24px 34px;scroll-margin-top:80px}
.m-ph-product .m-prod-frame{width:100%;box-shadow:var(--m-sh-lg)}

/* ── Footer (2026-09-03): four columns, the sign-off, the company ── */
.m-footer{display:block;max-width:1080px;margin:0 auto;padding:44px 24px 30px;border-top:1px solid var(--m-line)}
.m-foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
@media(max-width:900px){.m-foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.m-foot-grid{grid-template-columns:1fr}}
.m-foot-brand>span{font-size:19.8px;font-weight:700;color:var(--m-ink)}
.m-foot-signoff{margin:10px 0 0;font-size:15.4px;color:var(--m-2nd);max-width:26ch;line-height:1.5}
.m-foot-h{font-size:12.7px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--m-muted);margin-bottom:10px}
.m-foot-col a{display:block;font-size:15.4px;color:var(--m-ink);padding:4px 0}
.m-foot-col a:hover{color:var(--m-acc-text)}
.m-foot-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:34px;
  padding-top:18px;border-top:1px solid var(--m-line);font-size:13.8px;color:var(--m-muted)}


/* ── 2026-09-03: the sign-in page's ground and buttons, on the site ─────────
   The story panel of the sign-in page — pink-white with a violet bloom in one
   corner and a pink one in the other — is the ground of every public page.
   Two fixed blooms behind everything; the values are login.css's light theme
   (--pl-bg2 and ground.css's --bloom-a/--bloom-b), copied rather than shared
   because the public pages load no SPA stylesheet. */
:root{--m-ground-a:rgba(0,0,0,.05);--m-ground-b:rgba(0,0,0,.04)}
body.body--dark{--m-ground-a:rgba(255,255,255,.05);--m-ground-b:rgba(255,255,255,.04)}
.m-ground{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--m-bg)}
.m-bloom{position:absolute;display:block;border-radius:50%;filter:blur(20px)}
.m-bloom--a{width:min(620px,70vw);height:min(620px,70vw);right:-160px;top:-120px;
  background:radial-gradient(circle,var(--m-ground-a),transparent 62%);animation:mBloomDrift 18s ease-in-out infinite}
.m-bloom--b{width:min(520px,60vw);height:min(520px,60vw);left:-140px;bottom:-160px;
  background:radial-gradient(circle,var(--m-ground-b),transparent 62%);animation:mBloomDrift 22s ease-in-out 1.5s infinite}
@keyframes mBloomDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2.5%,-2%) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.m-bloom{animation:none}}
html,body{background:var(--m-bg) !important}
.m-page{background:transparent}
/* Bands and the sticky nav let the ground show through. */
.m-section-alt{background:rgba(255,255,255,.55)}
.m-navbg{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.m-mega-in,.m-lang-panel{background:var(--m-surf)}
.m-price,.m-ledger-tile,.m-founder,.m-split-col,.m-cmpwrap,.m-faq details,.m-form,.m-rel{background:rgba(255,255,255,.82)}

/* The Needs-you pill, inverted: indigo fill, white ink, pink edge, and the
   same 4px offset shadow on hover — in pink (Juanjo, 2026-09-03). One shape
   for every button on the public pages. */
.m-btn{--mb-fill:var(--m-acc);--mb-ink:#fff;--mb-edge:#111827;--mb-shadow:var(--m-brand);
  border-radius:999px;border:2px solid var(--mb-edge);background:var(--mb-fill);color:var(--mb-ink) !important;
  font-weight:700;box-shadow:none;transform:none;
  transition:transform 150ms ease,box-shadow 150ms ease,background 150ms ease}
.m-btn:hover{transform:translateY(-1px)}
/* Visible focus ring: outline:none here used to hide the keyboard focus
   (legal audit 2026-10-08). .m-page .m-btn:focus-visible below reinforces. */
.m-btn:focus-visible{transform:translateY(-1px);outline:2px solid var(--m-ink);outline-offset:3px}
.m-btn:active{transform:none;box-shadow:none}
.m-btn-accent{background:var(--mb-fill);color:#fff !important;box-shadow:none}
.m-btn-accent:hover{background:var(--m-acc-hover);transform:translateY(-1px)}
.m-btn-accent:active{background:var(--m-acc-press);transform:none;box-shadow:none}
.m-btn-ghost,.m-page .m-btn-onDark{--mb-fill:#fff;--mb-ink:var(--m-acc);background:#fff;color:var(--m-acc) !important;border-color:#111827}
.m-btn-ghost:hover,.m-page .m-btn-onDark:hover{background:#fff;color:var(--m-acc) !important;border-color:#111827}
@media(prefers-reduced-motion:reduce){.m-btn{transition:none}.m-btn:hover{transform:none}}

/* The nav shares the utility bar's width, so "Book a demo" ends where the
   strip's Login ends instead of 90px short of it (Juanjo, 2026-09-03). */
.m-nav{max-width:1320px}

/* ── v2 landing (Juanjo, 2026-09-04: "Homepage v2" from the UI mockups) ──
   Ruled editorial layout: one black hairline between every block, the
   register extract as the hero's right half, square buttons, the brand pink
   and the interactive blue as the only two colours. Scoped to .v2 so the
   subpages keep their own look. Tokens map onto the --m-* set so the dark
   toggle keeps working. */
/* THE REFERENCE'S CREAM, not the pink wash (Juanjo, 2026-09-04: "I prefer the
   cream color of the original file"). The landing page's ground is the
   mockup's paper #F7F4F1 edge to edge — the pink blooms are off on this page,
   the nav sits on the same cream — with the mockup's own pink and blue washes
   for the hero and Courier columns. Dark mode keeps the --m-* dark set. */

body:has(.v2) .m-ground{background:var(--m-bg)}
body:has(.v2) .m-bloom{display:none}
body:has(.v2) .m-navbg{background:color-mix(in srgb,var(--m-bg) 88%,transparent)}
.v2{--p:var(--m-bg);--ink:var(--m-ink);--ink2:var(--m-2nd);--ink3:var(--m-muted);
  --rule:var(--m-ink);--hair:color-mix(in srgb,var(--m-ink) 14%,transparent);
  --blue:var(--m-acc);--pink:var(--m-brand);
  --pinkSoft:var(--m-panel);--blueSoft:var(--m-panel-2);
  --card:var(--m-surf);
  font-family:Archivo,'DM Sans',system-ui,sans-serif;color:var(--ink);
  max-width:1320px;margin:0 auto;background:var(--p)}
body.body--dark .v2{--pinkSoft:color-mix(in srgb,var(--m-brand) 14%,var(--m-bg));--blueSoft:color-mix(in srgb,var(--m-acc) 26%,var(--m-bg))}
.v2 h1,.v2 h2,.v2 h3,.v2 .v2-feat-t{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-optical-sizing:auto}
.v2 a{color:inherit;text-decoration:none}
.v2-n,.v2-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.v2-n{font-size:13.2px;color:var(--ink3);letter-spacing:.08em}
.v2-hair{flex:1;height:1px;background:var(--hair)}
.v2-kick{font-size:12.1px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.v2-kick--pink{color:var(--pink)}
.v2-note{font-size:12.7px;color:var(--ink3);margin:0}
@keyframes v2-mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes v2-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.v2 *{animation:none!important;transition:none!important}}

/* hero */
.v2-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--rule)}
.v2-hero-l{padding:33px 46px 52px 26px;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.v2-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-size:14.3px;color:var(--ink2);animation:v2-up .5s both}
.v2-hero h1{margin:0;font-size:clamp(34px,4.7vw,64px);line-height:.92;letter-spacing:-.045em;font-weight:700;animation:v2-up .6s .05s both}
/* The mark used to be one absolute block behind an inline-block span: right
   for a one-word mark ("due,"), wrong once the marked phrase wraps — only
   the last line got the pink (Juanjo, 2026-09-11, "Except you, of course."
   at 390px). The highlight is now a background on the inline span itself,
   cloned per line fragment, so every line the phrase spans is marked.
   2026-09-20 (Pierre): the .4em band became a .13em underline at the bottom
   edge — same sweep animation, same per-line cloning — then .2em, because at
   .13em the rule read as a hairline against a 64px headline. */
.v2-markwrap{display:inline}
/* "Meet" and "Paco." never part; only "Paco" wears the underline (Pierre, 2026-10-08). */
.v2-nowrap{white-space:nowrap}
.v2-mark{display:none}
.v2-marked{background-image:linear-gradient(var(--pink),var(--pink));background-repeat:no-repeat;
  background-size:100% .2em;background-position:0 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .05em;margin:0 -.05em;
  animation:v2-mark-bg .65s .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes v2-mark-bg{from{background-size:0 .2em}to{background-size:100% .2em}}
.m-page .v2-lede{margin:10px 0 0;font-size:19.2px;line-height:1.55;color:var(--ink2);max-width:50ch;text-wrap:pretty;animation:v2-up .6s .12s both}
.v2-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;animation:v2-up .6s .18s both}
/* The lede says Paco reads every message; a first-time visitor's next
   thought is "is that safe?" The answer sits right under the buttons
   (Juanjo, 2026-10-05, after Google approved the Gmail scopes). */
.m-page .v2-trust{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:14.5px;line-height:1.4;color:var(--ink2);animation:v2-up .6s .22s both}
.v2-trust svg,.v2-trust i{width:18px;height:18px;flex:none}
/* ONE BUTTON FAMILY. The page body used the mockup's square blocks while the
   nav and pricing wore the pill Juanjo specified (indigo, black edge, pink
   lift on hover); "Try Paco" was a square in the hero and a pill in pricing
   (Juanjo, 2026-09-04). The body now uses the site's .m-btn pill; only the
   two fills the dark band needs are added here. */
.v2 a.m-btn.v2-btn--pink{--mb-fill:var(--pink);background:var(--pink);color:#fff !important;border-color:#111827;--mb-shadow:#fff}
.v2 a.m-btn.v2-btn--pink:hover{background:var(--pink);color:#fff !important}
.v2 a.m-btn.v2-btn--ghost{background:transparent;color:var(--p) !important;border-color:var(--p);--mb-shadow:var(--pink)}
.v2 a.m-btn.v2-btn--ghost:hover{background:color-mix(in srgb,var(--p) 8%,transparent);color:var(--p) !important}
.v2-proofs{margin-top:42px;display:flex;flex-direction:column}
.v2-proofs--tight{margin-top:8px}
.v2-proof{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-size:16px;animation:v2-up .5s cubic-bezier(.2,.8,.2,1) both}
.v2-proof--blue{border-top:0;border-bottom:1px solid var(--hair);animation:none}
.v2-proof .v2-n{width:20px;flex:none}
.v2-tick{width:13px;height:13px;flex:none;border:1px solid var(--rule);background:var(--pink);display:grid;place-items:center;font-size:8.8px;color:var(--m-acc-contrast);line-height:1}
.v2-tick::before{content:"\2713"}
.v2-tick--blue{background:var(--blue)}
/* The hero checklist: a 13px tick with an 8.8px glyph vanished on the black
   column (Pierre, 2026-10-08: "a bigger more visible black checkmark").
   Drawn, not a font glyph, so its weight does not depend on the face. */
.v2-hero .v2-tick{width:20px;height:20px;border:0;border-radius:4px}
.v2-hero .v2-tick::before{content:"";width:6px;height:11px;margin-top:-3px;border:solid #0C0B10;border-width:0 3px 3px 0;transform:rotate(45deg)}
/* Both columns start the same distance from the top — a centred card put the
   register caption at 124px and read as empty space above both panels
   (Juanjo, 2026-09-04). Halved from the reference's 66px to 33px on
   2026-09-21: at the reference's own measurement the band still read as a
   gap above the fold (Pierre). */
.v2-hero-r{padding:33px 26px 52px 46px;display:flex;flex-direction:column;gap:14px;background:var(--pinkSoft)}
/* Fills the tail of the hero's right column, which ran out of content above
   the fold and left a pink void. `margin-top:auto` pins it to the bottom of
   the flex column so it closes the panel however tall the mock renders. */
.v2-integ{margin-top:auto;padding-top:26px;display:grid;gap:16px}
.v2-integ .v2-kick{margin-bottom:6px;font-size:13.8px}
.v2-integ-r{display:flex;gap:14px;align-items:center}
.v2-integ-i{flex:none;display:grid;place-items:center;width:28px;height:28px;
  background:transparent;border:none}
/* The brand's own app tile, not a pink bubble (Pierre, 2026-10-07) and not a
   bare glyph that melts into the black (2026-10-08). */
.v2-integ-i svg{width:28px;height:28px;display:block}
.v2-integ-r b{display:block;font-size:17.6px;font-weight:700;line-height:1.3;color:var(--ink)}
.v2-integ-r span{font-size:16px;line-height:1.45;color:var(--ink2)}
.v2-reg-cap{display:flex;justify-content:space-between;gap:14px;font-size:13.8px;color:var(--ink2)}
.v2-reg{border:1px solid var(--rule);background:var(--card);box-shadow:7px 7px 0 var(--rule);animation:v2-up .7s .1s both}
.v2-reg-h,.v2-reg-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 168px;gap:12px;padding:13px 16px;align-items:center}
.v2-reg-h{border-bottom:1px solid var(--rule);font-size:11.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:12px 16px}
.v2-reg-row{border-bottom:1px solid var(--hair);animation:v2-up .5s cubic-bezier(.2,.8,.2,1) both}
.v2-reg-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.v2-reg-t b{font-size:14.9px;font-weight:500;line-height:1.3}
.v2-reg-t small{font-size:12.7px;color:var(--ink3)}
.v2-num{font-size:14.3px;color:var(--ink2)}
.v2-reg-s{display:flex;justify-content:flex-end;text-align:right}
.v2-chip{padding:4px 9px;border:1px solid var(--rule);font-size:11.6px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;white-space:nowrap;color:var(--ink2);background:transparent}
.v2-chip--pink{background:var(--pink);color:#fff}
.v2-chip--blue{background:var(--blue);color:#fff}
.v2-reg-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;font-size:13.8px;color:var(--ink2)}
.v2-reg-f a{border-bottom:1px solid var(--rule)}

/* stats */

/* sections */
.v2-sec{padding:80px 26px;border-bottom:1px solid var(--rule)}
.v2-sec h2,.v2-sec-head h2{margin:0;font-size:clamp(30px,3.6vw,50px);line-height:.96;letter-spacing:-.04em;font-weight:700;text-wrap:pretty;max-width:24ch}
.v2-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.v2-sec-head span{font-size:15.4px;color:var(--ink2);max-width:34ch}
.v2-steps-sec{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:52px;align-items:start}
.v2-sticky{position:sticky;top:92px}
.v2-steps{display:flex;flex-direction:column}
.v2-step{display:flex;gap:8px;padding:28px 0;border-top:1px solid var(--rule)}
.v2-step:first-child{border-top:0;padding-top:0}
.v2-step-n{font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;color:var(--pink);width:42px;flex:none;padding-top:7px}
.v2-step-n svg,.v2-step-n i{display:block;width:24px;height:24px}
.v2-step h3{margin:0 0 11px;font-size:25px;letter-spacing:-.03em;font-weight:600;line-height:1.1}
.v2-step p{margin:0;font-size:17.6px;line-height:1.6;color:var(--ink2);max-width:58ch;text-wrap:pretty}
.v2-feats-sec{border-bottom:1px solid var(--rule)}
.v2-feats-sec .v2-sec-head{padding:80px 26px 34px;margin:0}
.v2-feats{border-top:1px solid var(--rule)}
.v2-feat{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr) auto;gap:26px;align-items:start;padding:26px;border-bottom:1px solid var(--rule);transition:background .18s,padding-left .18s}
.v2-feat:hover{background:var(--pinkSoft);padding-left:34px}
.v2-feat .v2-n{padding-top:5px}
/* The catalogue has carried a lucide icon per feature all along; rendering it
   gives ten identical text rows something to land on. The tile inverts to the
   page ground on hover, where the row fill is the tile's own colour. */
.v2-feat-h{display:flex;flex-direction:column;gap:13px;align-items:flex-start;min-width:0}
.v2-feat-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--pinkSoft);border:1px solid var(--hair);transition:background .18s}
.v2-feat-i svg{width:19px;height:19px;color:var(--m-pink-text)}
.v2-feat:hover .v2-feat-i{background:var(--m-bg)}
.v2-feat-t{font-size:23px;font-weight:600;letter-spacing:-.03em;line-height:1.15;min-width:0}
.v2-feat-d{font-size:16.5px;line-height:1.55;color:var(--ink2);max-width:50ch}
/* The only path into the product pages, so it carries weight: ink, 600,
   sentence case, ruled under, pink on hover. */
.v2-feat-go{display:inline-flex;align-items:center;gap:8px;font-size:15.4px;font-weight:600;color:var(--ink);white-space:nowrap;justify-self:end;border-bottom:1.5px solid var(--ink);padding-bottom:2px;transition:color .15s,border-color .15s}
.v2-feat:hover .v2-feat-go{color:var(--pink);border-color:var(--pink)}
.v2-feat-go i{font-style:normal;font-size:17.6px}

/* courier */
.v2-courier{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--rule)}
.v2-courier-l{padding:80px 46px 80px 26px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:18px}
.v2-courier-l h2{margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.02;letter-spacing:-.038em;font-weight:700;max-width:22ch;text-wrap:pretty}
.v2-courier-l p{margin:0;font-size:17.6px;line-height:1.6;color:var(--ink2);max-width:46ch}
.v2-courier-r{padding:80px 26px 80px 46px;background:var(--blueSoft);display:flex;flex-direction:column;justify-content:center}
.v2-rail{width:1px;height:26px;margin-left:38px;background:var(--rule)}
.v2-mail{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--rule);background:var(--card);box-shadow:5px 5px 0 var(--rule);animation:v2-up .6s cubic-bezier(.2,.8,.2,1) both}
.v2-mail-n{width:26px;height:26px;flex:none;border:1px solid var(--rule);display:grid;place-items:center;font-size:12.1px;color:var(--ink2);font-variant-numeric:tabular-nums}
.v2-mail-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.v2-mail-b b{font-size:15.4px;font-weight:600;line-height:1.3}
.v2-mail-b small{font-size:13.2px;color:var(--ink3)}
.v2-mail .v2-chip{margin-left:auto;flex:none}

/* principle band */
.v2-band{border-bottom:1px solid var(--rule);background:var(--ink);color:var(--p)}
.v2-band-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:end;padding:74px 26px}
.v2-band h2{margin:20px 0;font-size:clamp(34px,4.4vw,64px);line-height:.94;letter-spacing:-.045em;font-weight:700;max-width:24ch;color:var(--p);text-wrap:pretty}
.v2-band p{margin:0;font-size:18.2px;line-height:1.6;color:var(--ink3);max-width:48ch}
/* The rules: what the agent will not do, then what happens to the data, one
   bullet each. The rule is the loud half; the sentence under it carries the
   detail at body size. Two columns once there is room — seven of them in a
   single column pushed the CTAs a screen down. */
.v2-rules{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 38px}
.v2-rules li{display:flex;gap:13px;align-items:flex-start}
.v2-rules svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--pink)}
.v2-rules b{display:block;font-size:19.5px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--p)}
.v2-rules span{font-size:17.1px;line-height:1.5;color:var(--ink3)}
@media (max-width:900px){.v2-rules{grid-template-columns:minmax(0,1fr);gap:18px}}
.v2-band-ctas{display:flex;flex-direction:column;gap:12px;min-width:248px}
.v2-band-ctas .v2-note{text-align:center;color:var(--ink3)}

/* the three sections kept from the old landing, on the ruled grid */
.v2-pricing .m-price,.v2-faq details,.v2-contact .m-form{border-radius:0;border:1px solid var(--rule);box-shadow:none}
.v2-pricing .m-price.featured{border-color:var(--rule);box-shadow:7px 7px 0 var(--rule)}
.v2-pricing .m-price.featured::before{border-radius:0;border:1px solid var(--rule);background:var(--pink);color:#fff;top:-13px;right:20px}
.v2-pricing .m-price-amt{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-weight:700;letter-spacing:-.04em}
.v2-contact h2{margin:12px 0 10px}

@media (max-width:960px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr) and cannot
     shrink below its content's min width, so at 390px both halves of the
     doors section measured 409px and the flow cards' shadow ran off the
     screen (Juanjo, 2026-09-11, mobile pass). */
  .v2-hero,.v2-steps-sec,.v2-courier,.v2-band-in{grid-template-columns:minmax(0,1fr)}
  .v2-hero-l,.v2-hero-r,.v2-courier-l,.v2-courier-r{min-width:0}
  .v2-hero-l,.v2-courier-l{border-right:0;border-bottom:1px solid var(--rule);padding:44px 20px}
  .v2-hero-r,.v2-courier-r{padding:34px 20px}
  .v2-sticky{position:static}
  .v2-feat{grid-template-columns:1fr;gap:10px}
  .v2-feat-go{justify-self:start}
  .v2-sec,.v2-feats-sec .v2-sec-head{padding-left:20px;padding-right:20px}
}


/* ── The reference's chrome (Juanjo, 2026-09-04) ──
   Pink strip: tagline left, plain dark text links right, each ruled under.
   Cream nav on a black hairline: "Paco ■" in Bricolage, plain links that
   rule under on hover, a square blue call to action. Placed last so it wins
   over the pill and glass rules above. */
.m-util{background:var(--m-brand);border-bottom:0;font-size:13.8px;font-weight:500;color:#0C0B10}
.m-util-in{justify-content:space-between;height:auto;min-height:34px;padding:6px 26px;gap:18px;align-items:center}
/* The tag is a value-prop line (Pierre, 2026-09-10), not a two-word label, so
   it wraps instead of truncating with an ellipsis — the strip grows to fit. */
.m-util-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.m-util-links{display:flex;align-items:center;gap:16px;flex:none;margin-left:auto}  /* stays right when a subpage has no tag */
.m-util a,.m-util .m-lang summary{color:#0C0B10;font-weight:500;gap:4px;border-bottom:1px solid rgba(12,11,16,.4);padding-bottom:1px;line-height:1.2}
/* Hover keeps the band's contrast colour: a literal #0C0B10 here put black
   text on the black band and Login vanished under the cursor (2026-09-21). */
.m-util a:hover,.m-util .m-lang summary:hover{opacity:1;color:var(--m-acc-contrast);border-bottom-color:var(--m-acc-contrast)}
.m-util .m-lang summary svg:first-child{display:none}
.m-util .ovs-nav-mark{display:none}
.m-navbg,body:has(.v2) .m-navbg{background:var(--m-bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--m-ink)}
.m-nav{padding:15px 26px;height:auto;gap:36px}
.m-page .m-brand,.m-foot-brand .m-brand{display:inline-flex;align-items:baseline;gap:8px;
  font-family:'Bricolage Grotesque',Archivo,'DM Sans',system-ui,sans-serif;font-size:25.3px;font-weight:700;letter-spacing:-.035em;color:var(--m-ink)}
.m-brand-sq{width:7px;height:7px;background:#FF3EC8;display:inline-block;flex:none}
.m-foot-brand .m-brand{font-size:24.2px}
.m-nav-links{margin-left:0;gap:24px}
.m-nav-links a,.m-mega-btn{font-size:16px;font-weight:400;color:var(--m-2nd);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.m-nav-links a:hover,.m-mega-btn:hover,.m-mega-wrap.open .m-mega-btn{color:var(--m-ink);border-bottom-color:var(--m-ink)}
.m-nav-cta .m-btn,.m-nav-cta .m-btn:hover,.m-nav-cta .m-btn:focus-visible{transform:none;box-shadow:none}
.m-nav-cta .m-btn{border-radius:0;border:1px solid var(--m-acc);background:var(--m-acc);color:#fff !important;font-weight:600;font-size:14px;padding:11px 20px;transition:background .15s,border-color .15s}
.m-nav-cta .m-btn:hover{background:var(--m-ink);border-color:var(--m-ink)}
/* The landing's own buttons follow the reference too: square, blue or ruled. */
.v2 a.m-btn,.v2 a.m-btn:hover,.v2 a.m-btn:focus-visible{transform:none;box-shadow:none}
.v2 a.m-btn{border-radius:0;border-width:1px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.v2 a.m-btn-accent{border-color:var(--m-acc)}
.v2 a.m-btn-accent:hover{background:var(--m-ink);border-color:var(--m-ink)}
.v2 a.m-btn-ghost{background:transparent;color:var(--ink) !important;border-color:var(--rule)}
.v2 a.m-btn-ghost:hover{background:var(--pinkSoft);color:var(--ink) !important;border-color:var(--rule)}
.v2 .m-price .m-btn{border-radius:0;transform:none;box-shadow:none;border-width:1px}
/* The language switch had kept its black pill from the previous strip and
   read as a dark blot with invisible text; it is a ruled text link like its
   neighbours. */
.m-util .m-lang summary,.m-util .m-lang summary:hover{background:transparent;border:0;border-bottom:1px solid rgba(12,11,16,.4);border-radius:0;padding:0 0 1px;color:#0C0B10;font-size:13.8px;font-weight:500;box-shadow:none}
.m-util .m-lang summary:hover{border-bottom-color:#0C0B10}
.m-util .m-lang-chev{color:#0C0B10}
.m-util .m-lang-item{border-bottom:0;padding-bottom:8px}

/* FULL BLEED, 26px from the edge, like the reference (measured 2026-09-04:
   strip text, wordmark, call to action, hero eyebrow and register card all
   26px from the viewport edge; ours sat at 86px inside a 1320px column —
   Juanjo: "too much empty space on either side"). The nav is 70px tall as
   the reference's is. And the reference's pink, #FF3EC8, on the public
   pages: the strip, the wordmark square, the hero mark and every chip. */
.m-util-in,.m-nav,.v2,.m-footer,.m-foot-grid{max-width:none;margin-left:0;margin-right:0}
.m-util-in{padding:0 26px}
.m-nav{height:70px;padding:0 26px}
.m-footer{padding-left:26px;padding-right:26px}


/* THE REFERENCE'S BUTTONS, measured (2026-09-04). Its blue is #2333F0 and
   its ink #0C0B10 (ours were #0b03fc and #1a1f36); the nav call to action is
   Archivo 14px on 11px 20px with a normal line-height (39px tall — ours ran
   Inter at 46px); the hero pair is 16px on 16px 30px (blue) and 16px 26px
   (ruled); the band pair is 16px on 17px 30px, the pink one with INK text and
   a paper hover, the ghost one edged in 40% paper. */
/* Monochrome: the v3 accent/ink re-set folds into the top token blocks. */
.m-nav-cta .m-btn{font-family:Archivo,'DM Sans',system-ui,sans-serif;line-height:normal;padding:11px 20px;font-size:14px}
.v2 a.m-btn{font-family:Archivo,'DM Sans',system-ui,sans-serif;line-height:normal;font-size:16px}
.v2 a.m-btn-accent{padding:16px 30px}
.v2 a.m-btn-ghost{padding:16px 26px;border-color:var(--ink)}
.v2 a.m-btn.v2-btn--pink,.v2 a.m-btn.v2-btn--ghost{padding:17px 30px;line-height:normal}
.v2 a.m-btn.v2-btn--pink{border-color:var(--pink);color:var(--ink) !important;background:var(--pink)}
.v2 a.m-btn.v2-btn--pink:hover{background:var(--p);border-color:var(--p);color:var(--ink) !important}
.v2 a.m-btn.v2-btn--ghost{border-color:color-mix(in srgb,var(--p) 40%,transparent);color:var(--p) !important}
.v2 a.m-btn.v2-btn--ghost:hover{border-color:var(--p);background:color-mix(in srgb,var(--p) 8%,transparent)}

/* The chrome in the reference's body face: Archivo, antialiased, like the
   landing beneath it. DM Sans in the strip and nav read lighter beside it
   (Juanjo, 2026-09-04: "the text color in the reference seems darker"). */
.m-util,.m-nav,.m-nav-links a,.m-mega-btn,.m-footer{font-family:Archivo,'DM Sans',system-ui,sans-serif}
body:has(.m-page){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* On a phone the two buttons wrap to full width, so an overlay anchored to
   the row's bottom-right lands on top of "How it works" (Juanjo, 2026-09-11,
   iPhone screenshot). Below 640px the dog leaves the overlay and takes his
   own row under the buttons, right-aligned: nothing to cover. */
@media (max-width:640px){
  .v2-ctas::after{content:"";flex-basis:100%;height:0;order:1}   /* forced line break after the buttons */
}

/* FROM THE v3 MOCKUP (Juanjo, 2026-09-04). The stats strip is a black band
   (Pierre, 2026-09-10) with type in a soft, clear pink — #FBC4E2 (Pierre's
   final pick from rendered swatches; the gradient stop #FF3EC8 read too
   strong and the mid #FF74D8 read as a different pink). The old fill was
   #FF3EC8 → #FF74D8 → #FFC8A8 at 112°. And its button: pink fill, 1px ink
   edge, ink text, a hard 5px offset shadow (3px in the nav, where the button
   is 13px on 9px 17px); the secondary beside it is the same shape on paper.
   Replaces the blue on every public-page button. Hover presses the button
   into its shadow. */
.m-nav-cta .m-btn,.v2 a.m-btn,.v2 .m-price .m-btn,.v2 .m-form .m-btn{
  border-radius:0;border:1px solid var(--m-ink);color:var(--m-ink) !important;font-weight:600;
  box-shadow:none;transform:none;transition:background .15s,border-color .15s}
.m-nav-cta .m-btn,.v2 a.m-btn-accent,.v2 .m-price .m-btn-accent,.v2 .m-form .m-btn{background:var(--m-acc)}
.v2 a.m-btn-ghost,.v2 .m-price .m-btn-ghost{background:var(--m-surf);color:var(--m-ink) !important}
.m-nav-cta .m-btn{font-size:13px;padding:9px 17px}
.m-nav-cta .m-btn:hover,.v2 a.m-btn:hover,.v2 .m-price .m-btn:hover,.v2 .m-form .m-btn:hover{
  color:var(--m-ink) !important}
.m-nav-cta .m-btn:hover{background:var(--m-acc);border-color:var(--m-ink)}
.v2 a.m-btn-accent:hover,.v2 .m-price .m-btn-accent:hover,.v2 .m-form .m-btn:hover{background:var(--m-acc);border-color:var(--m-ink)}
.v2 a.m-btn-ghost:hover,.v2 .m-price .m-btn-ghost:hover{background:var(--m-surf);border-color:var(--m-ink)}
.m-nav-cta .m-btn:active,.v2 a.m-btn:active,.v2 .m-price .m-btn:active,.v2 .m-form .m-btn:active{opacity:.85}
.v2 .m-price .m-btn{border-radius:0}
.v2 .m-price.featured::before{background:var(--m-acc);color:var(--m-acc-contrast)}

/* v3's papers (Juanjo, 2026-09-04: "change the white on the page to the soft
   light cream in v3"): the page on --paper #F4F1EC, every sheet — cards,
   dropdowns, form, FAQ rows, inputs — on --sheet #FCFAF7. No pure white left. */

.v2{--card:var(--m-surf)}
.v2 .m-price,.v2 .m-faq details,.v2 .m-form,.v2 .m-form input,.v2 .m-form textarea,.m-mega-in,.m-lang-panel,.m-mega-art{background:var(--m-surf)}
.v2 .m-price.featured{background:var(--m-surf)}
.v2 a.m-btn-ghost,.v2 .m-price .m-btn-ghost{background:var(--m-surf)}

/* ═══════════════════════════════════════════════════════════════════════════
   EVERY PUBLIC PAGE IN THE LANDING'S SYSTEM (Juanjo, 2026-09-04: "go through
   all of the pages on paco and change them to make them uniform with the
   landing page and sign up page"). The platform, solutions and resources
   pages and the mega menu kept the old look — centred heroes on a pink
   bloom, rounded blue pills, glass cards. They now share the landing's:
   cream paper, Archivo and Bricolage, black hairlines between blocks,
   square sheets with the offset shadow, the v3 pink button, the dark close
   band, the gradient strip. Placed last so it wins over everything above.
   ═════════════════════════════════════════════════════════════════════════ */
body:has(.m-page) .m-bloom{display:none}
body:has(.m-page) .m-ground{background:var(--m-bg)}
.m-page{font-family:Archivo,'DM Sans',system-ui,sans-serif;color:var(--m-ink)}
.m-page h1,.m-page h2,.m-page h3{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-optical-sizing:auto;letter-spacing:-.035em}
.m-section-alt{background:transparent;border-block:0}

/* buttons: the v3 pink square everywhere on the public pages */
.m-page .m-btn,.m-page .m-btn:hover,.m-page .m-btn:focus-visible{transform:none;box-shadow:none}
.m-page .m-btn{border-radius:0;border:1px solid var(--m-ink);background:var(--m-surf);color:var(--m-ink) !important;font-family:Archivo,'DM Sans',system-ui,sans-serif;font-weight:600;font-size:16px;padding:16px 26px;line-height:normal;transition:background .15s,border-color .15s}
.m-page .m-btn-accent{background:var(--m-acc);padding:16px 30px}
.m-page .m-btn:hover{background:var(--m-surf);color:var(--m-ink) !important;border-color:var(--m-ink)}
.m-page .m-btn-accent:hover{background:var(--m-acc)}
.m-page .m-btn:active{opacity:.85}
.m-page .m-nav-cta .m-btn{font-size:13px;padding:9px 17px;background:var(--m-acc)}
.m-page .m-nav-cta .m-btn:hover{background:var(--m-acc)}

/* the mega menu: a sheet under the nav's hairline, ruled columns, square rows */
.m-mega{background:var(--m-surf);border-bottom:1px solid var(--m-ink);box-shadow:none;transform:none}
.m-mega-in{max-width:none;padding:28px 26px 32px}
.m-mega-col{border-left:1px solid var(--m-ink)}
.m-mega-col:first-child{border-left:none}
.m-mega-h{color:var(--m-muted);letter-spacing:.14em;font-weight:500}
.m-mega-lead{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-weight:600;letter-spacing:-.02em}
.m-mega-item{border-radius:0;transition:background .13s,padding-left .13s}
.m-mega-item:hover{background:var(--m-panel);color:var(--m-ink);padding-left:13px}
.m-mega-item:hover small{color:var(--m-2nd)}
.m-mega-item .m-soon{border-radius:0;border:1px solid var(--m-ink);background:var(--m-acc);color:var(--m-acc-contrast);padding:1px 6px}
.m-mega-feat{border-radius:0;background:var(--m-surf);border:1px solid var(--m-ink);box-shadow:5px 5px 0 var(--m-ink)}
.m-mega-feat:hover{border-color:var(--m-ink);box-shadow:5px 5px 0 var(--m-ink);background:var(--m-panel)}
.m-mega-art{border-radius:0;border:1px solid var(--m-ink);background:var(--m-surf)}
.m-mega-art .r{border-bottom:1px solid var(--m-line)}
.m-mega-art .sw{border-radius:0}
.m-mega-art .pl{border-radius:0;border:1px solid var(--m-ink)}
.m-lang-panel{border-radius:0;border:1px solid var(--m-ink);box-shadow:5px 5px 0 var(--m-ink);background:var(--m-surf)}
.m-lang-item{border-radius:0}
.m-lang-item:hover{background:var(--m-panel)}

/* the subpage hero: left-aligned on the ruled grid, like the landing's */
.m-ph{max-width:none;margin:0;padding:66px 26px 52px;text-align:left;border-bottom:1px solid var(--m-ink)}
.m-ph-in{max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:0 46px;align-items:end}
.m-ph-in>*{grid-column:1}
.m-crumb{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-size:14.3px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--m-2nd)}
.m-crumb::before{content:"";flex:1;max-width:220px;height:1px;background:color-mix(in srgb,var(--m-ink) 14%,transparent);order:-1}
.m-crumb a{color:var(--m-2nd);text-transform:uppercase;letter-spacing:.12em;font-size:12.1px}
.m-crumb a:hover{color:var(--m-ink)}
.m-ph h1{font-size:clamp(40px,5.6vw,72px);line-height:.92;letter-spacing:-.045em;font-weight:700;margin:0 0 26px;max-width:16ch;text-wrap:pretty}
.m-ph p.lede{font-size:19.2px;line-height:1.55;color:var(--m-2nd);max-width:50ch;margin:0 0 32px;text-wrap:pretty}
.m-ph-cta{justify-content:flex-start;gap:14px;margin:0}

/* The spend-forecast mock in a page hero's right column. Flat bars on the
   page's own ground, in the two inks the rest of the site uses: ink for a cost
   read off an invoice, pink for one projected from last time. Sits in column 2,
   which the grid above reserves but `.m-ph-in>*{grid-column:1}` otherwise
   leaves empty. */
/* `grid-row:1/-1` collapses to row 1 here: the hero's rows are implicit, so
   line -1 IS line 1 and the art never spanned. An explicit span does. */
.m-ph-art{grid-column:2;grid-row:1/span 20;align-self:end;min-width:0}
.m-bud{border:1px solid var(--m-ink);background:var(--m-bg);box-shadow:7px 7px 0 var(--m-ink);padding:18px 18px 16px}
.m-bud-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-muted)}
.m-bud-h em{font-style:normal;font-size:10.5px;letter-spacing:.04em;text-transform:none}
.m-bud-tot{margin:10px 0 16px}
.m-bud-tot b{display:block;font-family:'Bricolage Grotesque',Archivo,sans-serif;
  font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--m-ink);font-variant-numeric:tabular-nums}
.m-bud-tot span{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:var(--m-2nd)}
.m-bud-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;
  align-items:end;height:128px;padding-bottom:18px;border-bottom:1px solid var(--m-ink);position:relative}
.m-bud-c{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;position:relative}
.m-bud-c i{display:block;width:100%;min-height:3px;border:1px solid var(--m-ink);border-bottom:0}
.m-bud-c i.is-known{background:var(--m-ink)}
.m-bud-c i.is-est{background:var(--m-pink-vivid)}
.m-bud-c span{position:absolute;bottom:-17px;left:0;right:0;text-align:center;
  font-size:10.5px;color:var(--m-muted)}
.m-bud-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12px;color:var(--m-2nd)}
.m-bud-key span{display:inline-flex;align-items:center;gap:7px}
.m-bud-key i{width:11px;height:11px;border:1px solid var(--m-ink);flex:none}
.m-bud-key i.is-known{background:var(--m-ink)}
.m-bud-key i.is-est{background:var(--m-pink-vivid)}

/* What a reported fault is likely to cost, stacked under the spend chart.
   Each row is led by where the report came in from, because that is the page's
   point: the forecast starts with a person saying something is broken. */
.m-trk{border:1px solid var(--m-ink);background:var(--m-bg);box-shadow:7px 7px 0 var(--m-ink);
  padding:16px 18px 14px;margin-top:22px}
.m-trk-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--m-ink) 12%,transparent)}
.m-trk-r:last-child{border-bottom:0;padding-bottom:0}
.m-trk-src{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;
  border:1px solid var(--m-ink);white-space:nowrap}
.m-trk-src.is-wa{background:var(--m-ink);color:var(--m-bg)}
.m-trk-src.is-guest{background:var(--m-pink-pale)}
.m-trk-src.is-rep{background:var(--m-surf-2)}
.m-trk-b{min-width:0}
.m-trk-b b{display:block;font-size:13.5px;font-weight:600;color:var(--m-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-trk-b small{display:block;font-size:11.5px;line-height:1.4;color:var(--m-muted);margin-top:2px}
.m-trk-v{font-size:12.5px;font-weight:600;color:var(--m-2nd);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.m-trk-v.is-rep{color:var(--m-ink);border:1px solid var(--m-pink-vivid);
  background:var(--m-pink-pale);padding:3px 8px}

/* the product frame under a hero, on the cream */
.m-ph-product{max-width:none;padding:52px 26px;border-bottom:1px solid var(--m-ink)}
.m-ph-product .m-prod-frame{box-shadow:7px 7px 0 var(--m-ink);border:1px solid var(--m-ink);border-radius:0}

/* blocks: ruled sections, the art as a sheet with the offset shadow */
.m-blk{max-width:none;margin:0;padding:64px 26px;gap:52px;border-bottom:1px solid var(--m-ink)}
.m-blk h2{font-size:clamp(28px,3.4vw,44px);line-height:.98;letter-spacing:-.04em;margin:0 0 16px;max-width:22ch;text-wrap:pretty}
.m-blk p{font-size:17.6px;line-height:1.6;color:var(--m-2nd);max-width:52ch}
.m-blk li{font-size:16px;color:var(--m-ink);gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--m-ink) 14%,transparent)}
.m-blk ul{gap:0;margin-top:18px;max-width:52ch}
.m-blk li i{width:13px;height:13px;margin-top:3px;color:#fff;background:var(--m-acc);border:1px solid var(--m-ink);padding:1px;box-sizing:border-box}
.m-blk-solo>div{max-width:760px;margin:0;text-align:left}
.m-blk-art{background:var(--m-surf);border:1px solid var(--m-ink);border-radius:0;box-shadow:7px 7px 0 var(--m-ink);padding:0}
.m-art-h{padding:12px 16px;border-bottom:1px solid var(--m-ink);margin:0;font-size:11.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-muted);font-weight:500}
.m-art-h em{font-size:11.6px;letter-spacing:.1em;text-transform:uppercase}
.m-art-r{padding:12px 16px;border-top:1px solid var(--m-line);font-size:14.9px}
.m-art-r:first-of-type{border-top:none}
.m-art-r .s{font-size:12.7px}
.m-art-r .p{border-radius:0;border:1px solid var(--m-ink);font-size:11.6px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:3px 8px}
.m-art-note{padding:11px 16px;margin:0;border-top:1px solid var(--m-line);font-size:12.7px}

/* the specs strip, as the landing's stats strip */
.m-specs{margin:0;border:0;border-bottom:1px solid var(--m-ink);background:var(--m-bg)}
.m-specs-in{max-width:none;padding:0;gap:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.m-spec{padding:30px 24px;border-right:1px solid var(--m-ink);border-bottom:1px solid var(--m-ink);color:var(--m-ink)}
.m-spec:nth-child(3n){border-right:0}
.m-spec:nth-last-child(-n+3){border-bottom:0}
/* The band was a pink->peach gradient carrying black text. The colour now
   lives in the type instead (Pierre, 2026-09-21): the figure in pink, its
   label in ink, on the page's own ground. Vivid pink is AA-large only
   (3.1:1 on white) and this is 26px bold, the same basis on which the
   step numbers already use it. */
.m-spec b{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:26px;letter-spacing:-.03em;color:var(--m-pink-vivid)}
.m-spec span{color:var(--m-ink)}

/* FAQ rows, the duty table, the notice */
.m-page section>details,.m-faq details{border-radius:0;border:1px solid var(--m-ink);background:var(--m-surf);box-shadow:none}
.m-page section>h2{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em;text-align:left !important;padding:64px 26px 24px;margin:0}
.m-page section>details{margin:0 26px 10px;max-width:none}
.m-tblwrap{max-width:none;padding:0 26px 40px}
.m-tbl{border:1px solid var(--m-ink)}
/* On a phone the guide table sat in a sideways scroller with no cue, and the
   column that matters most (the legal reference) was the one off-screen.
   Below 640px it reflows: three wrapped columns, the interval allowed to
   break (Juanjo, 2026-09-11, mobile pass). */
@media (max-width:640px){
  .m-tblwrap{padding:0 12px 32px}
  .m-tbl{min-width:0;font-size:13.2px}
  .m-tbl th,.m-tbl td{padding:8px 6px}
  .m-tbl td.i{white-space:normal}
  .m-tbl td.c{font-size:12.7px}
}
.m-tbl th{border-bottom:1px solid var(--m-ink);letter-spacing:.1em;font-weight:500}
.m-tbl tr:hover td{background:var(--m-panel)}
.m-notice{max-width:none;padding:24px 26px 0}
.m-notice div{border-radius:0;border:1px solid var(--m-ink);background:var(--m-surf);color:var(--m-ink)}

/* the close: the landing's dark band */
.m-close{max-width:none;margin:0;padding:74px 26px;text-align:left;background:#0C0B10;color:#F7F4F1;border-bottom:1px solid var(--m-ink);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
/* The closing band ran copy across the full width with a lot of empty
   right-hand ground. Paco's own mark fills it (Pierre, 2026-09-21); the
   PNG is already the brand pink on transparency, so it needs no tint.
   Decorative, so alt="" — a screen reader has the heading beside it. */
/* Bigger, and sitting ON the band's bottom rule rather than floating in the
   middle of it, so he reads as leaning out of the frame (Pierre,
   2026-09-21). The negative margin is exactly the band's own 74px bottom
   padding, so his feet land on the border and nothing overflows past it. */
.m-close-dog{height:clamp(190px,27vw,400px);width:auto;justify-self:end;align-self:end;margin-bottom:-74px;display:block}
.m-close h2{font-size:clamp(34px,4.4vw,64px);line-height:.94;letter-spacing:-.045em;color:#F7F4F1;max-width:24ch;margin:0 0 20px;text-wrap:pretty}
.m-close p{margin:0 0 28px;max-width:48ch;color:#8B8794;font-size:18.2px}
.m-close .m-btn-accent{color:var(--m-ink) !important;border-color:var(--m-acc)}
.m-close .m-btn-accent:hover{background:#F7F4F1;border-color:#F7F4F1}

/* related pages: ruled rows like the landing's feature rows */
.m-rel-head{max-width:none;padding:56px 26px 20px;font-size:12.1px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted)}
.m-related{max-width:none;padding:0 0 0;grid-template-columns:1fr;gap:0;border-top:1px solid var(--m-ink)}
.m-rel{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr) auto;gap:26px;align-items:start;padding:26px;border:0;border-bottom:1px solid var(--m-ink);border-radius:0;background:transparent;box-shadow:none;transition:background .18s,padding-left .18s}
.m-rel:hover{background:var(--m-panel);padding-left:34px;border-color:var(--m-ink);box-shadow:none}
.m-rel::after{position:static;transform:none;font-size:17.6px;color:var(--m-ink)}
.m-rel:hover::after{transform:none;color:var(--m-ink)}
.m-rel b{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:23px;font-weight:600;letter-spacing:-.03em;margin:0}
.m-rel span{font-size:16.5px;line-height:1.55;color:var(--m-2nd);max-width:50ch}

@media(max-width:860px){
  .m-ph{padding:44px 20px}
  .m-ph-in{grid-template-columns:1fr}
  .m-blk{padding:40px 20px;gap:26px}
  .m-specs-in{grid-template-columns:1fr}
  .m-spec{border-right:0;border-bottom:1px solid var(--m-ink)}
  .m-rel{grid-template-columns:1fr;gap:8px}
  .m-ph-art{grid-column:1;grid-row:auto;margin-top:34px}
  .m-close{padding:48px 20px;grid-template-columns:minmax(0,1fr)}
  .m-close-dog{display:none}
}
/* the block ticks as the landing's pink squares; the product note clear of its frame */
.m-blk li i{position:relative;overflow:hidden}
.m-blk li i svg{display:none}
.m-blk li i::before{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;font-size:8.8px;line-height:1;color:#fff}
.m-ph-product .m-prod-note{margin-top:16px;font-size:12.7px;color:var(--m-muted)}

/* the legal pages, in the same clothes: cream, Archivo, a Bricolage title,
   ink links ruled under, the TO-COMPLETE chips squared */
.m-legal{max-width:none;margin:0;padding:56px 26px 64px;line-height:1.65;font-family:Archivo,'DM Sans',system-ui,sans-serif;color:var(--m-ink)}
.m-legal>*{max-width:760px}
.m-legal h1{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:clamp(34px,4.4vw,56px);line-height:.96;letter-spacing:-.045em;font-weight:700;margin:0 0 10px}
.m-legal h2{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:24px;letter-spacing:-.03em;margin:36px 0 10px}
.m-legal h3{font-size:16px;margin:22px 0 6px}
.m-legal-date{font-size:12.1px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted);margin:0 0 34px}
.m-legal p,.m-legal li{font-size:16.5px;color:var(--m-2nd)}
.m-legal a{color:var(--m-ink);text-decoration:none;border-bottom:1px solid var(--m-ink)}
.m-legal a:hover{color:var(--m-ink);border-bottom-color:var(--m-ink)}
.m-legal .todo{border-radius:0;border:1px solid var(--m-ink);background:var(--m-acc);color:var(--m-acc-contrast);font-weight:600}
.m-legal table{border:1px solid var(--m-ink)}
.m-legal th{background:var(--m-surf);border-color:var(--m-ink)}
.m-legal th,.m-legal td{border-color:color-mix(in srgb,var(--m-ink) 14%,transparent)}
.m-legal-foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--m-ink);font-size:14.3px;color:var(--m-muted)}

/* ── hero: Paco at work (Pierre, 2026-09-18, notebook sketch) ─────────────
   The cursor walkthrough replaced by the flow itself: one report becoming
   action, four stages down the card the way the app's activity bar draws
   them. The stage Paco is ON wears the product's "Paco s'en occupe"
   treatment — pink edge, soft glow, the pose bobbing, a bar filling for
   exactly as long as the stage holds the light (marketing.js is the
   clock). A finished stage collapses to a ticked row; a not-yet stage
   sits grey. Same editorial frame as the mock it replaces: 1px ink edge,
   7px offset shadow, sheet fill, square. */
/* Paco's own pink, on purpose — the marketing theme is monochrome
   (--m-brand IS the ink), and this is the one element that should look
   alive rather than neutral, exactly like the app's sweep card
   (frontend theme.css, --sweep-pink). */
/* One duration and one curve for everything that moves (smoothness pass,
   2026-10-07): the slot (.7s), the details (.85s) and the card styling (.75s)
   ran on three timings in one frame, and the stack wobbled. marketing.js
   waits CLOSE = this duration between closing a card and opening the next. */
.v2-flow{--flow-dur:.55s;--flow-ease:cubic-bezier(.33,0,.15,1);--flow-pink:#FF3EC8;--flow-pink-soft:#FFE7F7;position:relative;display:flex;flex-direction:column;height:520px;padding:16px 0;border:1px solid var(--rule);background:var(--card);font-family:Archivo,system-ui,sans-serif;color:var(--ink);animation:v2-up .7s .1s both;user-select:none}
.v2-flow *{box-sizing:border-box}
/* The track scrolls the lit stage into view, so the row above it is cut
   mid-line by the frame's top edge; a still frame read as a broken card
   (Juanjo, 2026-10-05). The fade lets the cut row read as "earlier"; it
   waits for marketing.js to mark the track scrolled, or the first stage
   would start half-faded. */
.v2-flow-track{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:4px 24px}
.v2-flow-track.is-scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px);mask-image:linear-gradient(to bottom,transparent 0,#000 44px)}
/* What moves: translateY on this wrapper, never the track's scrollTop. */
.v2-flow-inner{display:flex;flex-direction:column;flex:none;transition:transform var(--flow-dur) var(--flow-ease);will-change:transform}
/* THE INTRO CARD: one line, one pink marker at 3× the original 58px.
   Pops in with the spring, holds a beat, slides away before the slots
   cascade. Ground comes from the hero-r dark tokens. */
.v2-flow-intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--card);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .4s ease}
.v2-flow.is-intro .v2-flow-intro{opacity:1}
.v2-flow.is-intro .v2-flow-intro>*{animation:v2-fin-pop .55s cubic-bezier(.34,1.56,.64,1) both}
.v2-flow.is-intro .v2-intro-line{animation-delay:.12s}
.v2-flow-intro.leaving{opacity:0;transform:translateY(-14px)}
.v2-intro-paco{width:174px;height:165px;object-fit:contain}
.v2-flow-intro .v2-intro-line{margin:0;max-width:32ch;text-align:center;font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.22;color:var(--ink)}
@media (max-width:640px){.v2-intro-line{font-size:21px}}
/* THE ENTRANCE (Pierre, 2026-09-19): before the clock starts, the visible
   slots POP IN one after another instead of sitting there as empty pills.
   Gated on .js — set by marketing.js in its first breath — so a browser
   with no script still shows the static module rather than nothing. */
.v2-flow.js .v2-flow-slot{opacity:0;transform:translateY(12px) scale(.93)}
.v2-flow.js .v2-flow-slot.is-in{opacity:1;transform:none}
.v2-flow.js .v2-flow-slot{transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1),grid-template-rows var(--flow-dur) var(--flow-ease)}
.v2-flow.js .v2-flow-slot.is-far{opacity:0}
.v2-flow.js .v2-flow-slot.is-far.is-in{opacity:0}
/* The step-by-step reveal: a folded slot holds a stage the light has not
   neared yet (active + two ahead show; marketing.js moves the fold). */
.v2-flow-slot{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--flow-dur) var(--flow-ease),opacity .3s ease}
.v2-flow-slot-in{overflow:hidden;min-height:0;display:flex;flex-direction:column}
.v2-flow-slot.is-far{grid-template-rows:0fr;opacity:0}
.v2-flow-step{position:relative;flex:none;display:flex;align-items:center;padding:12px 20px;border:1px solid var(--hair);border-radius:24px;background:var(--card);opacity:.5;transition:border-color var(--flow-dur) ease,box-shadow var(--flow-dur) ease,background var(--flow-dur) ease,opacity var(--flow-dur) ease,border-radius var(--flow-dur) ease}
.v2-flow-step.is-now{opacity:1;border-radius:18px;border-color:var(--flow-pink);background:linear-gradient(115deg,var(--flow-pink-soft) 0%,color-mix(in srgb,var(--flow-pink-soft) 40%,var(--card)) 100%);box-shadow:0 0 0 1px var(--flow-pink),0 14px 36px -16px var(--flow-pink)}
.v2-flow-step.is-done{opacity:.88}
/* The mascot and the kicker grow and shrink in place. As display:none they
   popped: the 88px dog vanished when a step finished and the title jumped
   left (2026-10-07). The step has no gap; the spacing rides on the mascot. */
.v2-flow-paco{flex:none;display:block;width:0;height:0;margin-right:0;opacity:0;object-fit:contain;transition:width var(--flow-dur) var(--flow-ease),height var(--flow-dur) var(--flow-ease),margin var(--flow-dur) var(--flow-ease),opacity .25s ease}
.v2-flow-step.is-now .v2-flow-paco{width:88px;height:88px;margin-right:18px;opacity:1;animation:v2-flow-bob 2.6s var(--flow-dur) ease-in-out infinite}
.v2-flow-body{flex:1;min-width:0}
.v2-flow-kicker{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height var(--flow-dur) var(--flow-ease),opacity .25s ease;font-size:12.1px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--flow-pink)}
.v2-flow-step.is-now .v2-flow-kicker{max-height:20px;opacity:1}
.v2-flow-t{margin:1px 0 0;font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:17.6px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink2);transition:color var(--flow-dur) ease,font-size var(--flow-dur) var(--flow-ease)}
.v2-flow-step.is-now .v2-flow-t{font-size:23.1px;color:var(--ink)}
/* The title conjugates with the state: grey future, lit present, ticked past. */
.v2-flow-icons{display:flex;gap:6px;margin-top:6px}
.v2-flow-wa{display:block;width:22px;height:22px}
/* The three tenses share one grid cell and cross-fade; swapping display
   popped "is pulling out" into "pulled out" (2026-10-07). */
.v2-flow-tt{display:inline-grid}
.v2-flow-tt>span{grid-area:1/1;transition:opacity .3s ease}
.v2-flow-t-now,.v2-flow-t-done{opacity:0}
.v2-flow-step.is-now .v2-flow-t-next,.v2-flow-step.is-done .v2-flow-t-next{opacity:0}
.v2-flow-step.is-now .v2-flow-t-now{opacity:1}
.v2-flow-step.is-done .v2-flow-t-done{opacity:1}
/* The details fade out before the card closes, and in a beat after it opens:
   a closing card used to cut its list off while the next one faded in. */
.v2-flow-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--flow-dur) var(--flow-ease)}
.v2-flow-more>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .2s ease}
.v2-flow-step.is-now .v2-flow-more>div{opacity:1;transition:opacity .3s ease .15s}
.v2-flow-step.is-now .v2-flow-more{grid-template-rows:1fr}
.v2-flow-d{margin:5px 0 0;font-size:14.9px;line-height:1.45;color:var(--ink2)}
.v2-flow-items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14.3px}
.v2-flow-items li{position:relative;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 28px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:999px;background:var(--card);color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s ease}
.v2-flow-items li::before{content:"";position:absolute;left:11px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.v2-flow-items li.show{opacity:1;transform:none}
.v2-flow-items em{font-style:normal;margin-left:auto;padding:2px 10px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--card);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.v2-flow-bar{position:relative;height:7px;margin:12px 0 2px;overflow:hidden;border-radius:3px;background:color-mix(in srgb,var(--flow-pink) 15%,var(--card))}
.v2-flow-bar span{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--flow-pink) 55%,var(--card)),var(--flow-pink))}
.v2-flow-state{flex:none;width:24px;height:24px;margin-left:12px;display:none;place-items:center;border:1px solid var(--flow-pink);border-radius:50%;background:var(--flow-pink-soft);color:var(--flow-pink);font-size:14.3px;font-weight:700}
.v2-flow-state::before{content:"✓"}
.v2-flow-step.is-done .v2-flow-state{display:grid;animation:v2-up .35s both}
.v2-flow-when{align-self:center;flex:none;margin:8px 0 3px;font-size:12.7px;letter-spacing:.05em;color:var(--ink3);text-transform:uppercase}
.v2-flow-gap{align-self:center;flex:none;height:16px;width:0;border-left:3px dotted color-mix(in srgb,var(--ink) 38%,transparent)}
/* The gutter, after the onboarding's sequence (Preview.tsx, onboarding.css
   .pvx-mark/.pvx-churn/.pvx-check/.pvx-ring; Pierre, 2026-10-08). */
.v2-flow-row{display:flex;align-items:flex-start;gap:12px}
.v2-flow-row>.v2-flow-step{flex:1;min-width:0}
.v2-flow-mark{order:-1;flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:11px;transition:margin-top var(--flow-dur) var(--flow-ease)}
.v2-flow-mark>span{grid-area:1/1;display:none}
.v2-flow-ring{width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 35%,transparent)}
.v2-flow-churn{grid-template-columns:repeat(3,5px);gap:3px}
.v2-flow-churn i{width:5px;height:5px;border-radius:1.5px;background:var(--flow-pink);animation:v2-churn 1.1s steps(1) infinite}
.v2-flow-churn i:nth-child(1){animation-delay:-.15s;animation-duration:.9s}
.v2-flow-churn i:nth-child(2){animation-delay:-.6s;animation-duration:1.3s}
.v2-flow-churn i:nth-child(3){animation-delay:-.35s;animation-duration:1s}
.v2-flow-churn i:nth-child(4){animation-delay:-.8s;animation-duration:1.2s}
.v2-flow-churn i:nth-child(5){animation-delay:-.05s;animation-duration:1.4s}
.v2-flow-churn i:nth-child(6){animation-delay:-.5s;animation-duration:.8s}
.v2-flow-churn i:nth-child(7){animation-delay:-.95s;animation-duration:1.1s}
.v2-flow-churn i:nth-child(8){animation-delay:-.25s;animation-duration:1.25s}
.v2-flow-churn i:nth-child(9){animation-delay:-.7s;animation-duration:.95s}
.v2-flow-tick{width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--flow-pink) 18%,var(--card));color:var(--flow-pink);place-items:center;font-size:13px;font-weight:800;line-height:1}
.v2-flow-tick::before{content:"\2713"}
.v2-flow-step:not(.is-now):not(.is-done)+.v2-flow-mark .v2-flow-ring{display:block}
.v2-flow-step.is-now+.v2-flow-mark{margin-top:22px}
.v2-flow-step.is-now+.v2-flow-mark .v2-flow-churn{display:grid}
.v2-flow-step.is-done+.v2-flow-mark .v2-flow-tick{display:grid;animation:v2-tick-in .3s ease-out both}
/* Stages to come: dashed, as in the onboarding; the done row keeps a solid
   edge. The right-hand round tick moved to the gutter. */
.v2-flow-step:not(.is-now):not(.is-done){border-style:dashed;border-color:color-mix(in srgb,var(--ink) 30%,transparent);opacity:1}
/* The step title and line are <p> since the 2026-10-06 outline fix, so the
   page's paragraph colour (#3D3D3D) out-ranked them: dark grey on the black
   card. The flow's own colours win here. */
.v2-flow p.v2-flow-t{color:var(--ink2)}
.v2-flow p.v2-flow-d{color:var(--ink2)}
.v2-flow .v2-flow-step.is-now p.v2-flow-t{color:var(--ink)}
.v2-flow .v2-flow-step:not(.is-now):not(.is-done) p.v2-flow-t{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.v2-flow-step.is-done{opacity:1}
/* settledBox() in marketing.js reads the lit card's final size with these off. */
.v2-flow.measuring,.v2-flow.measuring *{transition:none!important}
.v2-flow-state{display:none!important}
/* The rail now runs down the gutter, joining the marks. */
.v2-flow-slot-in>.v2-flow-gap{align-self:flex-start;margin-left:12px;height:12px}
@keyframes v2-churn{0%,100%{opacity:1}35%{opacity:.22}70%{opacity:.55}}
@keyframes v2-tick-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes v2-flow-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Reduced motion (marketing.js adds .still): the deciding stage at rest,
   its bar part-filled — the sketch's own frame. */
.v2-flow.still .v2-flow-bar span{width:62%}
.v2-flow.still .v2-flow-step.is-now .v2-flow-paco{animation:v2-up .45s both}
body.body--dark .v2-flow{--flow-pink:#FF5ED3;--flow-pink-soft:#331128}
/* THE FINALE, take two (Pierre, 2026-09-19: "make it pop"): a full-module
   brand moment. Pink burst ground, a big glowing Paco, a springy typed
   bubble, chips that snap in, brand squares twinkling. Every box here is
   self-contained — explicit display/width/padding on each element — after
   the first take's bubble collapsed mid-flow. */
.v2-flow-finale{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px 24px;text-align:center;opacity:0;pointer-events:none;transition:opacity .45s ease .1s;background:#FFFFFF}
body.body--dark .v2-flow-finale{background:#0E0E0E}
.v2-flow.is-finale .v2-flow-finale{opacity:1;pointer-events:auto}
.v2-flow.is-finale .v2-flow-track{opacity:0;transition:opacity .3s ease}
.v2-flow.is-finale .v2-flow-finale>*{animation:v2-fin-pop .55s cubic-bezier(.34,1.56,.64,1) both}
.v2-flow.is-finale .v2-finale-bubble{animation-delay:.25s}
.v2-flow.is-finale .v2-finale-chips{animation-delay:.4s}
.v2-flow.is-finale .v2-finale-ctas{animation-delay:.4s}
@keyframes v2-fin-pop{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.v2-finale-paco{display:block;width:106px;height:106px;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(255,62,200,.5));animation:v2-flow-bob 2.6s ease-in-out infinite}
.v2-finale-bubble{position:relative;display:inline-block;width:auto;max-width:92%;margin:0;padding:11px 20px;border:2px solid var(--flow-pink);border-radius:18px;background:#FFFFFF;font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:19.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#161513}
body.body--dark .v2-finale-bubble{background:#0E0E0E;color:#FFFFFF}
.v2-finale-bubble::before{content:"";position:absolute;top:-8px;left:50%;margin-left:-8px;width:14px;height:14px;background:inherit;border-left:2px solid var(--flow-pink);border-top:2px solid var(--flow-pink);transform:rotate(45deg)}
.v2-finale-typed::after{content:"";display:inline-block;width:2px;height:.95em;margin-left:2px;vertical-align:-2px;background:var(--flow-pink);animation:v2-caretblink .9s steps(1) infinite}
.v2-flow-finale.typed .v2-finale-typed::after{display:none}
@keyframes v2-caretblink{50%{opacity:0}}
.v2-finale-chips{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:60ch;margin:0;padding:0}
.v2-finale-chips li{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;gap:7px;padding:6px 12px;border:1px solid #161513;border-radius:999px;font-size:14.3px;font-weight:600;color:#161513;background:#FFFFFF;opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .5s cubic-bezier(.3,1.75,.55,1)}
body.body--dark .v2-finale-chips li{background:#0E0E0E;color:#FFFFFF;border-color:#FFFFFF}
.v2-finale-chips li::before{content:"\2713";color:var(--flow-pink);font-weight:800}
.v2-finale-chips li.show{opacity:1;transform:scale(1)}
.v2-finale-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:60ch;opacity:0;transition:opacity .45s ease}
.v2-flow-finale.ctas .v2-finale-ctas{opacity:1}
.v2-flow-finale .v2-finale-ctas a.m-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 14px;font-size:14px;text-align:center}
.v2-finale-replay{display:block;background:none;border:0;padding:0;cursor:pointer;font-size:12.7px;color:#75726b;opacity:0;transition:opacity .45s ease}
body.body--dark .v2-finale-replay{color:#9A9A9A}
.v2-flow-finale.ctas .v2-finale-replay{opacity:1}
.v2-finale-replay:hover{color:var(--flow-pink)}
@media (max-width:960px){.v2-flow{height:500px}}
/* Phone pass (Pierre, 2026-09-19: "make sure mobile displays properly").
   Multi-line text in a 999px pill reads as an egg; the finale outgrew the
   frame; Paco crowded the card. Everything sized for 375px here. */
@media (max-width:640px){
  .v2-flow{height:600px}
  .v2-flow-step{padding:10px 12px}
  .v2-flow-t{font-size:15.4px}
  .v2-flow-step.is-now .v2-flow-t{font-size:18.7px}
  .v2-flow-step.is-now .v2-flow-paco{width:56px;height:56px;margin-right:12px}
  .v2-flow-d{font-size:13.2px}
  .v2-flow-items{font-size:13.2px;gap:6px}
  .v2-flow-items li{border-radius:14px;padding:5px 10px 5px 24px;text-align:left}
  .v2-flow-items li::before{left:9px}
  .v2-flow-items em{font-size:9.9px;padding:1px 7px}
  .v2-flow-finale{padding:14px;gap:10px}
  .v2-finale-paco{width:74px;height:74px}
  .v2-finale-bubble{font-size:16px;padding:9px 14px;max-width:100%}
  .v2-finale-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .v2-finale-chips li{font-size:12.7px;border-radius:14px;padding:5px 8px}
  .v2-finale-ctas{grid-template-columns:1fr;gap:8px}
  .v2-flow-finale .v2-finale-ctas a.m-btn{padding:11px 12px;font-size:13.5px}
}
/* The wordmark's dog (Juanjo, 2026-09-05, after corgi.insure): Paco's own
   head, cut from the sit-hero drawing in two pinks, at the left of the
   name. The name, the font and the square stay as they were. */
/* Pierre, 2026-10-12: head enlarged three times (+25% each, name scaled with it), its bottom on the letters' baseline
   (an img's baseline is its bottom edge, so align-self:baseline lines it up
   with "Paco" and the square), and the square closer to the name. */
.m-brand-dog{height:46.9px;width:auto;align-self:baseline;flex:none;margin-right:-5px}
.m-foot-brand .m-brand-dog{height:40.6px}
.m-brand-sq{margin-left:-5px;width:10.9px;height:10.9px}
/* Pierre, 2026-10-12: the top of the "P" sits level with the top of the
   HEAD (the skull, not the ears). The skull starts 23.7% down the mark, so
   on a 30px head it is ~22.9px tall; Bricolage Grotesque's cap height is
   ~0.73em → ~31.4px, set to 33px after checking it on screen. Footer: 28.6px. */
/* Pierre, 2026-10-12: the name halfway between its original size (25.3px)
   and 51.6px; the head stays large. */
.m-page .m-brand{font-size:38.5px}
/* Pierre, 2026-10-12: the whole logo a little further right in the header. */
.m-nav .m-brand{margin-left:14px}
.m-foot-brand .m-brand{font-size:34.5px}

/* ── Monochrome theme: pieces the tokens cannot reach ──
   The utility strip fills with --m-brand (the theme's ink), so everything on
   it labels with the ground; the logo dog is rendered as the theme's ink;
   the hero's marked word underlines in a mixed grey so the headline stays
   legible on both grounds; the mock's own chat bubble and CTA specificity
   fixes close the last white-on-white traps. */
.m-util, .m-util-tag, .m-util a { color: var(--m-acc-contrast); }
.m-util a:hover, .m-util .m-lang summary:hover { color: var(--m-acc-contrast); border-bottom-color: var(--m-acc-contrast); }
.m-util a { color: var(--m-acc-contrast); }
.m-util a:hover, .m-util .m-lang summary:hover { color: var(--m-acc-contrast); border-bottom-color: var(--m-acc-contrast); }
.v2-marked { background-image: linear-gradient(#FF3EC8, #FF3EC8); }
/* Both hero columns on #0C0B10, just to see (Pierre, 2026-10-07). Same
   deep black as #how and .v2-band. Loop boxes wear dark-mode white
   edges, not the pink chips we tried first. */
.v2-hero { background: #0C0B10; }
/* Left column back on white beside the black loop, just to see (Pierre,
   2026-10-08). */
.v2-hero-l {
  background: #FFFFFF;
  color: #0C0B10;
  --ink: #0C0B10; --ink2: #4A4750; --ink3: #6B6872;
  --rule: rgba(12,11,16,.14); --hair: rgba(12,11,16,.12);
  --pink: #FF3EC8; --p: #0C0B10;
}
.v2-hero-r {
  background: #0C0B10;
  color: #F7F4F1;
  --ink: #F7F4F1; --ink2: #9A9A9A; --ink3: #9A9A9A;
  --rule: rgba(247,244,241,.18); --hair: rgba(247,244,241,.14);
  --card: #0C0B10; --p: #F7F4F1; --pink: #FF3EC8; --pinkSoft: #1A1018;
  --m-pink-text: #FF6FD8;
}
body.body--dark .v2-hero-r {
  background: #0C0B10;
}
.v2-hero-r .v2-flow {
  --flow-pink: #FF5ED3; --flow-pink-soft: #1A1018;
  background: #0C0B10;
  /* Pierre, 2026-10-07: the transparent edge (2838a3b1) made the module
     vanish into the same black as the column. Put a dark-mode edge back,
     greyer than the chips' #FFFFFF so the card reads without competing
     with them or with Try Paco's pink. */
  border-color: #6E6E6E;
}
.v2-hero-r .v2-flow-intro,
.v2-hero-r .v2-flow-finale { background: #0C0B10; }
.v2-hero-r .v2-reg-cap,
.v2-hero-r .v2-note,
.v2-hero-r .v2-kick { color: #9A9A9A; }
.v2-hero-r .v2-integ-r b { color: #F7F4F1; }
.v2-hero-r .v2-integ-r span { color: #9A9A9A; }
.v2-hero-r .v2-finale-bubble { background: #0C0B10; color: #FFFFFF; }
.v2-hero-r .v2-finale-chips li { background: #0C0B10; color: #FFFFFF; border-color: #FFFFFF; }
.v2-hero-r .v2-flow-step.is-now {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 1px #FFFFFF;
}
.v2-hero-r .v2-finale-replay { color: #9A9A9A; }
.v2-hero-r .v2-flow-finale a.m-btn.m-btn-accent {
  border: 2px solid var(--flow-pink) !important;
}
.m-blk li i { color: var(--m-acc-contrast); background: var(--m-acc); }
.m-chat-box em { background: var(--m-acc); color: var(--m-acc-contrast); }
.m-page .m-btn-accent, .v2 a.m-btn-accent, .m-page .m-nav-cta .m-btn, .m-nav-cta .m-btn {
  background: var(--m-acc); color: var(--m-acc-contrast) !important; }
body { background: var(--m-bg); }
/* The specs band used to be a light pink gradient on both themes, so its ink
   was pinned dark. The band is the page's own ground now, so the ink
   follows the theme and only the figure keeps its pink. */
body.body--dark .m-specs .m-spec,
body.body--dark .m-specs .m-spec span { color:var(--m-ink); }
body.body--dark .m-specs .m-spec b { color:#FF9BDE; }
/* E2E 2026-09-08: three public spots went black-on-black when the pink
   variants were tokenised — the kicker and every button inside the black
   band, and the accent CTAs whose old color rule carried !important. */
.v2-kick--pink { color:#FF3EC8; }
.v2-band { color:#FFFFFF; }
.v2-band a.m-btn, .v2-band .v2-btn--pink, .v2-band a.m-btn.m-btn-accent {
  background:#FFFFFF !important; color:#0C0B10 !important; border-color:#FFFFFF !important; }
/* The band's SECOND button went white-on-white: .v2 a.m-btn.v2-btn--ghost
   (0,3,1) outranks .v2-band a.m-btn (0,2,1), so its color:var(--p) — white on
   the light theme — landed on the band rule's white fill (Pierre's screenshot,
   2026-09-19). A true ghost on the black band instead: transparent fill,
   white text and outline, at the specificity that wins. */
.v2-band a.m-btn.v2-btn--pink {
  background:#FFFFFF !important; color:#0C0B10 !important; border-color:#FFFFFF !important; }
.v2-band a.m-btn.v2-btn--ghost {
  background:transparent !important; color:#FFFFFF !important; border-color:#FFFFFF !important; }
.v2-band a.m-btn.v2-btn--ghost:hover { background:rgba(255,255,255,.12) !important; }
/* Paco's pink head rides the ghost button (Pierre, 2026-09-19). */
.v2-band-dog{height:38px;width:auto;margin-right:11px;vertical-align:-13px}  /* 14px put the mark below the label's cap height, where it read as a
     bullet rather than as Paco (Pierre, 2026-09-22). */
/* The theme toggle (Pierre, 2026-09-19): moon shown in light, sun in dark,
   riding the utility strip's own ink. */
.m-theme-btn{background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center}
.m-theme-btn svg{width:15px;height:15px}
.m-theme-btn .lucide-sun{display:none}
body.body--dark .m-theme-btn .lucide-sun{display:inline}
body.body--dark .m-theme-btn .lucide-moon{display:none}
/* « Trois voies » is a deliberate BLACK panel in both themes (Pierre,
   2026-09-20) — it used to be paper on the light page and a white band in
   dark mode. Local token overrides, so every var() inside resolves against
   the dark ground instead of the page's. */
#how{background:#0C0B10;color:#F7F4F1;
  --ink:#F7F4F1;--ink2:#9A9A9A;--ink3:#9A9A9A;--rule:rgba(247,244,241,.16);
  --hair:rgba(247,244,241,.14);--pinkSoft:#2A0E22;--card:#141114;--p:#F7F4F1}
.m-page a.m-btn.m-btn-accent, .m-page button.m-btn.m-btn-accent, .v2 a.m-btn.m-btn-accent {
  background:var(--m-acc) !important; color:var(--m-acc-contrast) !important; }
/* Left hero is black too: the accent rule above is black-on-black, so
   Try Paco would vanish. Invert at the specificity that wins. */
.v2-hero-l a.m-btn.m-btn-accent{
  background:#0C0B10 !important;color:#FFFFFF !important;border-color:#0C0B10 !important}
.v2-hero-l a.m-btn.m-btn-ghost{
  background:transparent !important;color:#0C0B10 !important;border-color:#0C0B10 !important}
.v2-hero-l a.m-btn.m-btn-ghost:hover{background:rgba(12,11,16,.06) !important}
.v2-band .v2-kick--pink { color:#FF9BDE; }

/* ── Accessibility pass (2026-09-10, axe 4.x on every public page) ──
   #FF3EC8 is 2.75:1 on the cream and 3.1:1 on white: fine as a fill with ink
   on it (6.3:1) or as an edge, never as text. Pink TEXT reads this darker
   token instead — 4.87:1 on cream, 5.4:1 on white. The band stays dark on
   both themes, because on the dark theme it flipped to white and kept its
   white text (every line in it was 1:1). The strip's language switch kept a
   hard-coded ink colour on a strip that is now ink itself, so the switch was
   invisible on the live site. */
:root{--m-pink-text:#C4128F}
.v2-kick--pink{color:var(--m-pink-text)}
.v2-band{background:#0C0B10;color:#F7F4F1}
.v2-band h2,.v2-rules b{color:#F7F4F1}
.v2-band p,.v2-rules span,.v2-band .v2-note,.v2-band-ctas .v2-note{color:#9A9A9A}
.v2-band .v2-kick--pink{color:#FF9BDE}
/* The band's check marks ask for var(--pink), which the monochrome theme
   resolves to its ink — black ticks on a #0C0B10 band, i.e. bullets with no
   visible bullet. Same literal the kicker above uses. */
.v2-rules svg{color:#FF9BDE}
/* The closing band's CTA sat white-on-black like every other button. Pierre
   asked for its label in pink (2026-09-21) — it beats the theme's
   .m-page .m-btn-accent !important rule on specificity, not source order. */
.m-close a.m-btn.m-btn-accent{color:#FF9BDE !important}
.m-util .m-lang summary,.m-util .m-lang summary:hover,.m-util .m-lang-chev{color:var(--m-acc-contrast)}
.m-util .m-lang summary{border-bottom-color:color-mix(in srgb,var(--m-acc-contrast) 40%,transparent)}
/* The strip labels with the ground (--m-acc-contrast), and the language
   panel hanging off it INHERITED that: white items on the #FAFAFA panel in
   light, black on #0E0E0E in dark. Only the selected row escaped, because
   .active sets its own colour — so the menu showed one readable language and
   one invisible one (Pierre, 2026-09-21). The panel is a surface, not the
   strip: its rows take the surface's ink. */
.m-util .m-lang-item:not(.active){color:var(--m-ink)}
.m-page ::placeholder{color:#666666;opacity:1}
/* The artwork pills (.p-late/.p-soon/.p-ok on the product pages) read the
   status inks on their tints: 4.33:1 and 4.19:1 on light, 3.4–3.8:1 on dark. */
:root{--m-late:#ca1a3c;--m-warn:#a04d05}
body.body--dark{--m-late:#ff7b96;--m-warn:#f0a35a;--m-ok:#5ad19a}

/* Skip link: the first thing Tab reaches, visible only while focused. */
.m-skip{position:absolute;left:12px;top:-100px;z-index:10000;padding:10px 16px;
  background:#0C0B10;color:#FFFFFF;border:2px solid #FFFFFF;text-decoration:none;
  font:600 14px Archivo,'DM Sans',system-ui,sans-serif}
.m-skip:focus,.m-skip:focus-visible{top:12px;outline:2px solid #FF3EC8;outline-offset:2px}
main#main:focus{outline:none}

/* One visible focus ring for everything, in the theme's ink; on the dark
   surfaces (the strip, the band, the close) it is the paper instead. The
   earlier per-class rules removed the outline on :focus-visible and left a
   keyboard user with no cursor at all. */
.m-page a:focus-visible,.m-page button:focus-visible,.m-page summary:focus-visible,
.m-page input:focus-visible,.m-page select:focus-visible,.m-page textarea:focus-visible,
.m-page [tabindex]:focus-visible{outline:2px solid var(--m-ink);outline-offset:2px}
.m-page .m-btn:focus-visible,.m-page .m-card:focus-visible{outline:2px solid var(--m-ink);outline-offset:3px}
.m-util a:focus-visible,.m-util summary:focus-visible,.v2-band a:focus-visible,.m-close a:focus-visible,
#ovs-cookie button:focus-visible{outline-color:#FFFFFF}
.m-page .m-mega-item:focus-visible{outline-offset:-2px}

/* Reduced motion covers the whole page, not only the .v2 hero: the button
   lifts, the mega-menu slide, the smooth scroll and the bloom drift. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .m-page *,.m-page *::before,.m-page *::after{animation:none!important;transition:none!important}
}

/* The utility band on a phone stays ONE row (Juanjo, 2026-09-11). Beside the
   links the tagline would have ~140px, so below 640px it is hidden and the
   row holds the links; the hero right under it carries the same line. */
.m-util-tag--short{display:none}
@media (max-width:640px){
  .m-util-in{padding:0 16px;min-height:34px;gap:12px}
  .m-util-tag{display:none}
  .m-util-tag--short{display:block}
  /* Contact is one tap away in the header button and the footer; on a
     phone its 90px is what lets the tagline fit on the same row. */
  .m-util-links a[href="/home#contact"]{display:none}
}

/* ── Pierre, 2026-09-13: the brand pink back on the /home reading path ──
   "Three paths" numbers, the "Three doors" kicker + its hairline, the door
   numbers and the rail between them all read in the logo pink (#FF3EC8, the
   gradient's own stop), not the pale tint and not the darker text token; and
   the doors' right panel is white, not grey. Contrast (accessibility pass
   above): #FF3EC8 on white is 3.1:1, so the step numbers are set as LARGE
   text (bold, 20px — AA large needs 3:1) and the door numbers are a pink
   FILL with ink on it (6.3:1); the 11px kicker is the one spot that cannot
   reach AA as vibrant text, kept vibrant on Pierre's explicit word. */
:root{--m-pink-vivid:#FF3EC8;--m-pink-pale:#FFD9F1}
.v2-step-n{color:var(--m-pink-vivid);font-weight:700;font-size:22px;padding-top:4px}
.v2-courier .v2-kick{color:var(--m-pink-text)} /* the label is 11px TEXT: the darker pink token (4.9:1) — vivid #FF3EC8 is 3.1:1 and failed axe; Pierre chose this over a pill, 2026-09-14 */
.v2-courier .v2-hair{background:var(--m-pink-vivid)}
.v2-mail-n{background:var(--m-pink-pale);border-color:var(--m-pink-pale);color:#0C0B10;font-weight:700}
.v2-rail{background:var(--m-pink-vivid);width:2px}
.v2-courier-r{background:#FFFFFF}
body.body--dark .v2-courier-r{background:var(--m-bg)}

/* The finale's second CTA is a ghost ON PAPER, not on the black band: the
   generic .v2 ghost rule paints its text var(--p) — white on the light
   theme — which vanished on the finale card (same war as the band's,
   2026-09-19). At file end so it wins the !important tie. */
.v2-flow-finale a.m-btn.v2-btn--ghost{background:var(--card) !important;color:var(--ink) !important;border-color:var(--ink) !important}
.v2-flow-finale a.m-btn.v2-btn--ghost:hover{background:color-mix(in srgb,var(--ink) 8%,var(--card)) !important}

/* The request-intent radios (code / call), one row, plain. */
.m-intent{border:0;padding:0;margin:0 0 2px}
.m-intent legend{font-size:14.3px;font-weight:600;margin-bottom:6px;padding:0}
.m-intent-opt{display:inline-flex;align-items:center;gap:7px;margin-right:18px;font-size:15.4px;cursor:pointer}
.m-intent-opt input{accent-color:var(--m-acc);width:15px;height:15px;margin:0}

/* ── Front-end audit, 2026-10-06 ─────────────────────────────────────────
   Dark mode flips --m-ink, --m-acc and --m-brand to white. Each rule below
   paired one of those fills with a literal white label, or kept a light
   panel, so it read white-on-white in dark mode. Ratios: axe-core on the
   rendered pages, before → after. */

/* The light card set kept rgba(255,255,255,.82) in dark mode: on the PDF
   lead forms the labels were #C9C9C9 on #D1D1D1 (1.08:1), the heading 1.52:1. */
body.body--dark :is(.m-price,.m-ledger-tile,.m-founder,.m-split-col,.m-cmpwrap,.m-faq details,.m-form,.m-rel){background:var(--m-surf)}

/* "Book a demo" in the closing band. The band is #0C0B10 in both themes; the
   fill is var(--m-acc), white in dark, and Pierre's pink label (2026-09-21)
   sat on it at 1.9:1. Keep the pink label and give the button the dark fill
   it has in light mode, edged white so it still reads as a button. */
body.body--dark .m-close a.m-btn.m-btn-accent{background:#000000 !important;border-color:#FFFFFF}

/* Fills that flip to white in dark mode take the page ground as their ink:
   the home "WhatsApp" / "Email" chips, the mockup nav counter and chat
   bubble were 1:1 in dark mode. */
.v2-chip--pink,.v2-chip--blue{color:var(--m-bg)}
.m-nav-count{color:var(--m-acc-contrast)}
.m-chat-q{color:var(--m-bg)}

/* The pale-pink tracker pills stay pale in both themes, so their ink is
   pinned dark instead of following --m-ink (white on #FFD9F1 was 1.27:1). */
.m-trk-v.is-rep,.m-trk-src.is-guest{color:#3a0d2a}

/* Pink TEXT in dark mode: #C4128F is 3.83:1 on black (the hero eyebrow). */
body.body--dark{--m-pink-text:#FF6FD8}

/* Muted grey on the #F0F0F0 mockup surface was 4.47:1; #666666 is 5.0:1.
   Dark mode keeps its own --m-muted (body.body--dark outranks :root). */
:root{--m-muted:#666666}

/* The lead-form confirmation takes focus and painted no ring. */
.m-lead-thanks:focus{outline:2px solid color-mix(in srgb,var(--m-pink-vivid) 60%,transparent);outline-offset:6px;border-radius:8px}

/* The phone menu (button in site_chrome.py, behaviour in marketing.js).
   The links used to hide at 860px with no way to open them, and the mega
   panels already stopped at 960px, so between 861 and 960 the buttons did
   nothing. One breakpoint now: at 960px and below, the button opens the
   links as one panel, and each mega group expands in place. */
.m-menu-btn{display:none;justify-self:end}
.m-menu-cta{display:none}
@media(max-width:960px){
  .m-nav-links{display:none}
  .m-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-left:10px;
    padding:0;background:none;border:1px solid var(--m-line);border-radius:10px;color:var(--m-ink);cursor:pointer}
  .m-menu-btn svg{width:20px;height:20px}
  .m-menu-btn:focus-visible{outline:2px solid var(--m-pink-vivid);outline-offset:2px}
  .m-navwrap.menu-open .m-nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;margin:0;padding:6px 18px 18px;
    background:var(--m-surf);border-bottom:1px solid var(--m-line);box-shadow:var(--m-sh-lg);
    max-height:calc(100dvh - 110px);overflow-y:auto}
  .m-navwrap.menu-open .m-nav-links > a:not(.m-btn),
  .m-navwrap.menu-open .m-mega-btn{display:flex;width:100%;align-items:center;justify-content:space-between;
    padding:14px 2px;border-bottom:1px solid var(--m-line);font-size:17.6px}
  .m-navwrap.menu-open .m-mega-btn .m-chev{display:inline-block}
  .m-navwrap.menu-open .m-mega-wrap.open .m-mega{display:block;position:static;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:0;background:transparent}
  .m-navwrap.menu-open .m-mega-in{padding:8px 0 14px;background:transparent}
  .m-navwrap.menu-open .m-mega-cols{grid-template-columns:1fr !important;gap:16px}
  .m-navwrap.menu-open .m-mega-col{padding:0;border-left:0}
  .m-navwrap.menu-open .m-mega-art{display:none}
}
/* Below 481px the bar cannot hold the brand, "Book a demo" and the menu
   button: French overflowed by 14px at 390 and 84px at 320. The demo button
   moves to the top of the open menu there. */
@media(max-width:480px){
  .m-nav{grid-template-columns:auto 1fr}
  .m-nav-cta{display:none}
  .m-navwrap.menu-open .m-menu-cta{display:flex;justify-content:center;order:-1;margin:10px 0 6px}
}
/* The finale's replay link touched the frame bottom between 961 and 1199px,
   where the hero column is narrowest. Tighter gaps and a slightly smaller
   Paco there; every other width keeps the big Paco (Pierre, 2026-09-19). */
@media(min-width:961px) and (max-width:1199px){
  .v2-flow-finale{gap:8px}
  .v2-finale-paco{width:94px;height:94px}
}
/* The "Needs you" header in the product mockup: white on #D939D0 at the
   gradient's light end was 3.87:1 for 11.6px text. #C026B8 is 5.0:1, same hue. */
.m-plan-h{background:linear-gradient(135deg,#C026B8,#6b2cce)}

@media (prefers-reduced-motion:reduce){.v2-flow-churn i{animation:none}}

/* The two hero columns share three rows (Pierre, 2026-10-09, lines drawn
   across a screenshot): the buttons end where the "Paco at work" box ends,
   the Google line sits level with the box's caption under it, and the
   checklist starts level with "Works with what you already use". Each
   column is a subgrid of the hero's rows. Hero and courier split 50/50, so
   the column rule runs straight down and lands on the gap between the
   second and third desk tiles (Pierre, 2026-10-09). */
@media (min-width:961px){
  .v2-hero{grid-template-rows:auto auto 1fr}
  .v2-hero-l,.v2-hero-r{grid-row:1 / span 3;display:grid;grid-template-rows:subgrid;row-gap:0;gap:0}
  .v2-hrow{min-width:0}
  .v2-hrow--top{display:flex;flex-direction:column}
  .v2-hero-l .v2-hrow--top .v2-ctas{margin-top:auto;padding-top:34px}
  .v2-hero-r .v2-hrow--top{gap:14px}
  .v2-hero-r .v2-hrow--top .v2-flow{flex:1 0 auto}
  .v2-hrow--mid{display:flex;align-items:center;min-height:56px}
  .m-page .v2-hero .v2-trust,.v2-hero .v2-note{margin:0}
  .v2-hrow--bot{padding-top:18px}
  .v2-hero .v2-proofs{margin-top:0}
  .v2-hero .v2-integ{margin-top:0;padding-top:0}
}

/* One assistant, four desks (Pierre, 2026-10-09). Light by default; the
   dark variant (.v2-desks--dark) is the onboarding tour's look. */
.v2-desks .v2-desks-grid{padding:0 26px 80px}
.v2-desks-head{max-width:760px;margin:0 0 34px}
.v2-desks-head .v2-kick{color:var(--m-pink-text)}
.v2-desks-head h2{margin:10px 0 12px;font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.035em;font-weight:700;color:var(--ink)}
.m-page .v2-desks-head p{margin:0;font-size:17.6px;line-height:1.55;color:var(--ink2);max-width:60ch}
.v2-desks-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.v2-desk{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border:1px solid var(--rule);border-radius:16px;background:var(--p,#fff);color:var(--ink);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.v2-desk:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 18px 40px -22px rgba(0,0,0,.3)}
.v2-desk-i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.v2-desk-i svg{width:21px;height:21px;stroke-width:1.8}
.v2-desk-t{font-family:'Bricolage Grotesque',Archivo,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.v2-desk-d{font-size:15px;line-height:1.5;color:var(--ink2)}
.v2-desk-list{display:flex;flex-direction:column;gap:7px;margin-top:2px;padding-top:12px;border-top:1px solid var(--hair)}
.v2-desk-list span{position:relative;padding-left:18px;font-size:14.3px;line-height:1.4;color:var(--ink)}
.v2-desk-list span::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--ink)}
.v2-desk-paco{display:flex;align-items:flex-start;gap:7px;margin-top:auto;padding-top:10px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ink)}
.v2-desk-paco svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--m-pink-text)}
.v2-desk-go{font-size:14px;font-weight:600;color:var(--ink2)}
.v2-desk:hover .v2-desk-go{color:var(--ink)}
/* Dark variant: black band, dark tiles, white type, Paco's line in pink. */
.v2-desks--dark{background:#0C0B10;border-bottom-color:#0C0B10;--ink:#F7F4F1;--ink2:#9A9A9A;--rule:#2A2830;--hair:#2A2830}
.v2-desks--dark .v2-desks-head .v2-kick{color:#FF6FD8}
.v2-desks--dark .v2-desk{background:#17161B}
.v2-desks--dark .v2-desk:hover{border-color:#FFFFFF;box-shadow:0 18px 44px -16px rgba(255,111,216,.3)}
.v2-desks--dark .v2-desk-i{background:#24222A}
.v2-desks--dark .v2-desk-paco{color:#FF6FD8}
.v2-desks--dark .v2-desk-paco svg{color:#FF6FD8}
@media (max-width:1100px){.v2-desks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.v2-desks .v2-desks-grid{padding:0 20px 56px}}
@media (max-width:640px){.v2-desks-grid{grid-template-columns:minmax(0,1fr)}}
/* The tiles are links, and the page's link colour out-ranked .v2-desk:
   on the dark variant the titles and icons came out black on black. */
.v2-desks .v2-desk .v2-desk-t,.v2-desks .v2-desk .v2-desk-i{color:var(--ink)}
.v2-desks--dark .v2-desk .v2-desk-t,.v2-desks--dark .v2-desk .v2-desk-i{color:#FFFFFF}
.v2-desks--dark .v2-sec-head h2{color:#FFFFFF}
.v2-desks--dark .v2-sec-head span{color:#9A9A9A}
/* The desks' heading sits on the centre line, its line under it (Pierre,
   2026-10-09: "align the center"). */
.v2-desks .v2-sec-head{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.v2-desks .v2-sec-head h2{max-width:22ch;margin-left:auto;margin-right:auto}
.v2-desks .v2-sec-head span{max-width:46ch}
/* Four tiles share six rows (icon, title, line, list, Paco, link), so a
   two-line title no longer pushes one tile's rule and list below the others. */
@media (min-width:1101px){
  .v2-desks-grid{grid-template-rows:repeat(6,auto);row-gap:0}
  .v2-desk{grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:10px}
  .v2-desk-t{align-self:end}
  .v2-desk-paco{margin-top:0;align-self:start}
}
@media (min-width:961px){
  /* Same size, aligned on their first line: when the Google line wraps (FR,
     narrower half since the 50/50 split) its first line stays level with the
     caption across the rule. */
  .v2-hrow--mid{align-items:flex-start;padding-top:14px;min-height:0}
  .m-page .v2-hero .v2-trust,.v2-hero .v2-note{font-size:14px;line-height:1.45}
  .m-page .v2-hero .v2-trust{align-items:flex-start}
  .m-page .v2-hero .v2-trust svg{margin-top:1px}
}

/* Desk variants (Pierre, 2026-10-09, white chosen): --pink wears the
   icons on solid pink tiles; --personas swaps the icon for Paco dressed
   for the desk (certificate, toolbox, housekeeper, ledger). */
.v2-desk-paco-img{display:none}
.v2-desks--pink .v2-desk .v2-desk-i{background:#FF3EC8;color:#FFFFFF}
.v2-desks--personas .v2-desk .v2-desk-i{display:none}
.v2-desks--personas .v2-desk-paco-img{display:block;width:auto;height:96px;object-fit:contain;align-self:flex-start;margin:-4px 0 2px -4px}

/* Desk titles on one line (Pierre, 2026-10-09: "Maintenance and
   equipment" as one line): the type follows the tile width down to 16px. */
@media (min-width:1101px){
  .v2-desk-t{white-space:nowrap;font-size:clamp(14px,1.32vw,20px)}
}
/* The black column's small type in a clear white (Pierre, 2026-10-09): the
   caption, the scenario note, the "works with" heading and each row's line
   read #9A9A9A on #0C0B10. The animation keeps its own greys: they mark the
   done and the coming steps. */
.v2-hero-r .v2-reg-cap,.v2-hero-r .v2-reg-cap span,
.v2-hero-r .v2-note,
.v2-hero-r .v2-integ .v2-kick,
.v2-hero-r .v2-integ-r span{color:#ECEAE6}
.v2-hero-r .v2-integ-r b{color:#FFFFFF}

/* ── Hero window polish (Juanjo, 2026-10-10, design review) ─────────────────
   One shape language, one active colour, finished steps that read finished,
   one marker set on one rail. Scoped to the landing's dark hero window. */
/* 1. Shapes: the window rounds like what it holds; every card shares one
      radius (the pill-to-rectangle morph went with it); one outline level —
      the frame is a hairline, done rows lose their border, the dashed edge is
      kept only for what is still to come. */
.v2-hero-r .v2-flow{border-radius:20px;border-color:rgba(247,244,241,.16);overflow:hidden}
.v2-hero-r .v2-flow-step,.v2-hero-r .v2-flow-step.is-now{border-radius:16px}
.v2-hero-r .v2-flow-step.is-done{border-color:transparent;background:rgba(247,244,241,.045)}
.v2-hero-r .v2-flow-intro,.v2-hero-r .v2-flow-finale{border-radius:20px}
/* 2. The active card is pink, the product's "Paco s'en occupe", not a white
      focus ring competing with the pink kicker. */
.v2-hero-r .v2-flow-step.is-now{border-color:var(--flow-pink);box-shadow:0 0 0 1px var(--flow-pink),0 10px 26px -18px var(--flow-pink)}
/* 3. Finished steps read finished (they are the wins): near-full ink, no
      dimming. To come stays dashed and quieter, but above AA. */
.v2-hero-r .v2-flow-step.is-done{opacity:1}
.v2-hero-r .v2-flow p.v2-flow-t{color:color-mix(in srgb,var(--ink) 86%,transparent)}
.v2-hero-r .v2-flow .v2-flow-step:not(.is-now):not(.is-done) p.v2-flow-t{color:color-mix(in srgb,var(--ink) 62%,transparent)}
.v2-hero-r .v2-flow-step:not(.is-now):not(.is-done){border-color:color-mix(in srgb,var(--ink) 26%,transparent)}
/* 4. One marker set, one size: a ring to come, the churn while working, a
      filled pink circle once done; one continuous line joins them. */
.v2-hero-r .v2-flow-ring{width:18px;height:18px;border-width:2px}
.v2-hero-r .v2-flow-tick{width:22px;height:22px;border-radius:50%;background:var(--flow-pink);color:#0C0B10;font-size:12px}
.v2-hero-r .v2-flow-slot-in>.v2-flow-gap{border-left:2px solid rgba(247,244,241,.18);height:14px;margin-left:12px}
/* 5. The mascot sits with the title it belongs to, not floating mid-card. */
.v2-hero-r .v2-flow-step.is-now{align-items:flex-start}
.v2-hero-r .v2-flow-step.is-now .v2-flow-paco{width:96px;height:96px;margin-top:2px}
/* 6. Channel glyphs sit in one place on every card: the right of the title. */
.v2-hero-r .v2-flow-t{display:flex;align-items:center;gap:12px}
.v2-hero-r .v2-flow-tt{flex:1;min-width:0}
.v2-hero-r .v2-flow-icons{flex:none;margin:0 0 0 auto}
/* 7. The day stamp lines up with the cards' left edge, as everything else. */
.v2-hero-r .v2-flow-when{align-self:flex-start;margin:6px 0 6px 38px;color:#9A9A9A}
/* 8. A row cut by the bottom edge reads as "more below", like the top. */
.v2-hero-r .v2-flow-track.has-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%)}
.v2-hero-r .v2-flow-track.is-scrolled.has-more{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 48px),transparent 100%)}
/* 9. A card's details appear once it has opened, not while it unrolls: the
      text used to show line by line as the row grew. */
.v2-hero-r .v2-flow-step.is-now .v2-flow-more>div{transition:opacity .28s ease .3s}
/* 10. The caption is the figure's title, with the example label beside it,
       and it never touches the frame. */
.v2-hero-r .v2-reg-cap{align-items:baseline;margin-bottom:12px;color:#F7F4F1}
.v2-hero-r .v2-reg-cap span{font-weight:600;font-size:14.5px}
.v2-hero-r .v2-reg-cap .v2-reg-tag{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9A9A9A;border:1px solid rgba(247,244,241,.22);border-radius:999px;padding:3px 9px}
@media (min-width:961px){.v2-hero-r .v2-reg-cap{margin-bottom:0}}
/* A tag that does not fit drops under its line instead of running off the
   card ("YOUR TE…" on a phone, 2026-10-10). */
.v2-hero-r .v2-flow-items li{flex-wrap:wrap;row-gap:4px}
@media (max-width:640px){
  /* On a phone the mascot sits above the text: beside it, it left the list
     too narrow for its pills and tags. */
  /* Every card stacks, not only the lit one: a closing card switched back
     to side-by-side mid-collapse and its mascot jumped beside the text. */
  .v2-hero-r .v2-flow-step{flex-direction:column;align-items:stretch}
  .v2-hero-r .v2-flow-paco{align-self:flex-start}
  .v2-hero-r .v2-flow-step.is-now .v2-flow-paco{width:56px;height:56px;margin:0 0 6px}
  .v2-hero-r .v2-flow-body{width:100%}
  .v2-hero-r .v2-flow-when{margin-left:38px}
}
/* ── Sequence pass (Juanjo, 2026-10-10, frame-by-frame review) ───────────── */
/* 11. The tense swap is sequenced: the old sentence leaves before the new one
       arrives. Cross-fading two sentences of different lengths and sizes
       printed "Paco will setting the next inspection date" at every
       hand-over. */
.v2-hero-r .v2-flow-tt>span{transition:opacity .14s ease}
.v2-hero-r .v2-flow-step:not(.is-now):not(.is-done) .v2-flow-t-next,
.v2-hero-r .v2-flow-step.is-now .v2-flow-t-now,
.v2-hero-r .v2-flow-step.is-done .v2-flow-t-done{transition:opacity .26s ease .2s}
/* 12. Items still to come are drawn as empty dashed pills, so an open card
       reads "a list is coming" instead of standing half empty. */
.v2-hero-r .v2-flow.js .v2-flow-items li{transition:opacity .55s ease,transform .55s ease,color .4s ease,border-color .4s ease}
.v2-hero-r .v2-flow.js .v2-flow-items li:not(.show){opacity:1;transform:none;color:transparent;border-style:dashed;border-color:rgba(247,244,241,.16)}
.v2-hero-r .v2-flow.js .v2-flow-items li:not(.show)::before{background:rgba(247,244,241,.16)}
.v2-hero-r .v2-flow.js .v2-flow-items li:not(.show) em{opacity:0}
.v2-hero-r .v2-flow-items em{transition:opacity .4s ease}
/* 13. The close waits for the list to fade out before it rises: the dog
       used to float over the fading rows. */
.v2-hero-r .v2-flow-finale{transition:opacity .4s ease .3s}
.v2-hero-r .v2-flow.is-finale .v2-flow-finale>*{animation-delay:.3s}
.v2-hero-r .v2-flow.is-finale .v2-finale-bubble{animation-delay:.55s}
.v2-hero-r .v2-flow.is-finale .v2-finale-chips{animation-delay:.7s}
/* 14. The buttons and "watch again" come last, as designed: the pop
       animation's final opacity overrode their own fade, so they showed
       before the bubble had finished typing. */
.v2-hero-r .v2-flow.is-finale .v2-finale-ctas,
.v2-hero-r .v2-flow.is-finale .v2-finale-replay{animation:none}
/* 15. The close speaks the window's shape: rounded buttons, not squares. */
.v2-hero-r .v2-flow-finale .v2-finale-ctas a.m-btn{border-radius:12px}
/* 16. The top fade only touches a row the edge really cuts. */
.v2-hero-r .v2-flow-track.is-scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);mask-image:linear-gradient(to bottom,transparent 0,#000 26px)}
.v2-hero-r .v2-flow-track.is-scrolled.has-more{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 48px),transparent 100%)}
/* 17. The intro leaves faster than the list arrives, so the dog does not
       hang over the first rows (the two overlap by design, 2026-10-07). */
.v2-hero-r .v2-flow-intro{transition:opacity .2s ease,transform .3s ease}
/* ── Right panel pass (Juanjo, 2026-10-10, panel review) ─────────────────── */
/* The caption row carries the note: "Paco at work · How a report becomes
   action", the example tag on the right. */
/* The tag stays top-right; the caption wraps beside it on a phone. */
.v2-hero-r .v2-reg-cap{flex-wrap:nowrap;align-items:flex-start}
.v2-hero-r .v2-reg-cap>span:first-child{flex:1 1 0;min-width:0;line-height:1.4}
.v2-hero-r .v2-reg-cap .v2-reg-tag{flex:none;white-space:nowrap}
.v2-hero-r .v2-reg-sub{font-style:normal;font-weight:400;color:#9A9A9A}
/* The close: one pink outline (the bubble), the main button filled pink,
   the features as plain ticked lines, not button-shaped pills. */
.v2-hero-r .v2-flow-finale a.m-btn.m-btn-accent{background:var(--flow-pink)!important;color:#0C0B10!important;border:2px solid var(--flow-pink)!important}
.v2-hero-r .v2-flow-finale a.m-btn.v2-btn--ghost{border-color:rgba(247,244,241,.4)!important}
.v2-hero-r .v2-finale-chips li{border-color:transparent;background:transparent;justify-content:flex-start;text-align:left;padding:4px 6px;font-weight:600}
.v2-hero-r .v2-finale-chips{max-width:min(92%,560px);column-gap:24px;row-gap:2px}
/* A soft, wide halo, not a silhouette-shaped smudge. */
.v2-hero-r .v2-finale-paco{filter:drop-shadow(0 0 30px rgba(255,62,200,.26))}
/* Wide screens: the close uses more of the window it sits in. */
@media (min-width:1600px){
  .v2-hero-r .v2-finale-chips,.v2-hero-r .v2-finale-ctas{max-width:640px}
  .v2-hero-r .v2-finale-bubble{font-size:21px}
  .v2-hero-r .v2-finale-paco{width:120px;height:120px}
}
/* Works with: the mark sits by its title, the description is smaller and
   grey, and every title is the same white as the caption. */
.v2-hero-r .v2-integ-r{align-items:flex-start}
.v2-hero-r .v2-integ-i{margin-top:1px}
.v2-hero-r .v2-integ-r b,.v2-hero-r .v2-reg-cap>span:first-child{color:#F7F4F1}
.v2-hero-r .v2-integ-r span{font-size:14.5px;line-height:1.45;color:#A3A0A8}
.v2-hero-r .v2-integ-r b{font-size:16.5px;margin-bottom:2px}
/* Phone: one feature per line. */
@media (max-width:640px){
  .v2-hero-r .v2-finale-chips{grid-template-columns:1fr;max-width:92%;row-gap:2px}
  .v2-hero-r .v2-finale-chips li{justify-content:center;text-align:center}
}
/* The window is a raised surface on the panel, not a hairline on the same
   black (Juanjo, 2026-10-10: "hard to discern from the right panel"). One
   step lighter, a clearer edge, a soft shadow under it; the intro and the
   close wear the same fill so nothing inside shows the old black. */
.v2-hero-r .v2-flow{--card:#17161D;background:#17161D;border-color:rgba(247,244,241,.22);box-shadow:0 1px 0 rgba(247,244,241,.06) inset,0 28px 60px -28px rgba(0,0,0,.9)}
.v2-hero-r .v2-flow-intro,.v2-hero-r .v2-flow-finale,
body.body--dark .v2-hero-r .v2-flow-finale{background:#17161D}
.v2-hero-r .v2-finale-bubble,body.body--dark .v2-hero-r .v2-finale-bubble{background:#17161D}
.v2-hero-r .v2-flow-finale a.m-btn.v2-btn--ghost{background:transparent!important}