/* =========================================================================
   Yellowdesk — the next version of the site, rebuilt block by block.
   A layer on top of site.css, never a fork of it.

   Only /v3 loads this file. site.css is untouched, so / and /v3 can be held up
   side by side.
   ========================================================================= */

/* =========================================================================
   NAV — logo left, menu centred, language + log in right

   A three-column grid with equal outer tracks puts the menu on the page's centre line
   whatever the logo and the right-hand group measure. The spacer did the flex layout's
   pushing; the grid doesn't need it.
   ========================================================================= */
@media (min-width:821px){
  .nav__row{display:grid;grid-template-columns:1fr auto 1fr}
  .nav__links{margin-left:0}
  .nav__spacer{display:none}
  .nav__right{justify-self:end}
  /* a 1fr track squeezes harder than the flex row did: "Log in" broke in two at 1024 */
  .nav__login,.nav__link{white-space:nowrap}

  /* site.css opens the mega menu from the Product item's left edge. With the item now near
     the middle of the bar, a 720px panel from there runs off the right edge on any laptop.
     Taking position:relative off the item makes the panel resolve against the sticky header
     (sticky is positioned), and left/right:0 + margin:auto centres it under the bar. */
  .nav__item{position:static}
  .mega{left:0;right:0;margin:0 auto;width:min(720px,calc(100vw - 48px))}
}

/* =========================================================================
   HERO — one centred column

   The photo and its buying-signal badge are gone, and so are the rating and the
   "Made in Europe / GDPR-first" row, so the copy has the whole width to itself.
   ========================================================================= */
.hero__grid{grid-template-columns:1fr;justify-items:center;text-align:center}
/* no width cap on the column: the headline sizes off the viewport and runs on one line
   on desktop; the subtext keeps its own measure (site.css, .hero__sub) */
.hero__copy{margin:0 auto;max-width:none}
/* the subtext is one short sentence now; site.css's 540px measure was built for three
   lines and left "deals." on a line of its own */
.hero__sub{margin-left:auto;margin-right:auto;max-width:none}
.hero__cta,.hero__promise{justify-content:center}
/* room to breathe: the headline, subtext and buttons were set for a two-column hero and
   read cramped once centred on their own over the orange */
@media (min-width:641px){
  .hero h1{margin-top:0}
  .hero__sub{margin-top:22px}
  .hero__cta{margin-top:34px}
  .hero__promise{margin-top:16px}
}

/* ---- the grain ----
   The social kit's surface (LinkedIn avatar and cover): burnt orange with soft light
   pooling in it and a fine film grain over the lot, white IBM Plex on top. The source
   is v3/BG-image-noise-yellowdesk.png (2 MB); hero-noise.jpg is the same pixels at q65
   (97 KB): the grain survives that, checked side by side. WebP was half that again but smoothed the grain
   away, and the grain is the point. The colour under it is the image's own mean, so the
   band reads right before the image lands. */
.hero{background:#b9542f url(v3/hero-noise.jpg) 50% 50%/cover no-repeat;color:#fff}
.hero h1{color:#fff}
.hero__sub{color:rgba(255,255,255,.88)}
.hero__promise{color:rgba(255,255,255,.82)}
.hero__promise svg{color:var(--accent-soft)}
/* site.css packs the phone hero tight (24/26px) to keep the photo above the fold. With the
   photo gone and a band of colour to read as one, it gets room to breathe. */
@media (max-width:640px){
  .hero{padding-top:44px;padding-bottom:44px}
}
/* the site's focus ring is the accent, which vanishes on the accent */
.hero :focus-visible{outline-color:#fff}

/* ---- below the hero: proof first ----
   The logos and the testimonials follow the hero directly; the product tour comes after
   them, in its own band, so it no longer rises into the orange. */
@media (min-width:681px){
  .hero{padding-bottom:clamp(88px,10vw,150px)}
}

/* =========================================================================
   CLOSING CTA — the same grain, so the page opens and closes on one surface

   site.css lays a flat, angled block of --accent over the right-hand third. On the
   grain it reads as a sticker over the light, so it goes; the light in the image
   does that job now. The gold strip bottom-left stays.
   ========================================================================= */
.close{background:#b9542f url(v3/hero-noise.jpg) 50% 50%/cover no-repeat}
.close::before{display:none}
.close :focus-visible{outline-color:#fff}

/* =========================================================================
   NAV ON THE GRAIN — a test

   At the top of the page the bar is transparent and the hero runs up under it, so the
   orange starts at the very top edge like the LinkedIn cover. The hero is pulled up by
   the bar's height (64 + 1px rule) and pads the same amount back. Scrolling, or opening
   the phone menu, drops .nav--onhero (script in /) and the bar is site.css's
   white one again.
   ========================================================================= */
.hero{margin-top:-65px;padding-top:calc(65px + clamp(48px,7.5vh,104px))}
@media (max-width:640px){
  .hero{padding-top:calc(65px + 44px)}
}
/* site.css's bar is 90% white over a blur. Over this much orange that reads as a pink
   tint, so once it is off the grain it is solid white. */
.nav{background:#fff;transition:background-color .2s ease,border-color .2s ease}
.nav--onhero{background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* logo.svg paints in currentColor, which an <img> can't inherit: it renders black. */
.nav--onhero .brand__logo{filter:brightness(0) invert(1)}
.nav--onhero .nav__link,.nav--onhero .lang__btn,.nav--onhero .nav__login,.nav--onhero .nav__burger{color:#fff}
.nav--onhero .nav__link .chev,.nav--onhero .lang__btn svg{color:rgba(255,255,255,.75)}
.nav--onhero .nav__link:hover,.nav--onhero .nav__login:hover{color:var(--accent-soft)}
.nav--onhero .lang__btn:hover{background:rgba(255,255,255,.1)}
/* the bar's CTA turns the way the hero's own does: white, ink type */
.nav--onhero .nav__right .btn--accent{background:#fff;color:var(--ink)}
.nav--onhero .nav__right .btn--accent:hover{background:#ededed}
.nav--onhero :focus-visible{outline-color:#fff}

/* =========================================================================
   PAGE INTRO — factor over form: the hero and the tour fade in evenly and quickly,
   a few pixels of rise, all of it settled within about half a second.
   The class is set in <head> by /.
   ========================================================================= */
@keyframes v3In{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.v3-intro .hero__copy>*,.v3-intro .yt__steps,.v3-intro .yt__stage{animation:v3In .4s ease both}
.v3-intro .hero__copy>:nth-child(2){animation-delay:.04s}
.v3-intro .hero__copy>:nth-child(3){animation-delay:.08s}
.v3-intro .hero__copy>:nth-child(4){animation-delay:.1s}
.v3-intro .yt__steps,.v3-intro .yt__stage{animation-delay:.12s}

/* =========================================================================
   TRUST — a quiet line and the customers' marks, in one ink tone so marks drawn for
   different backgrounds sit together. Heights are set per logo (--h) for optical
   balance: a wide wordmark reads larger than a stacked one at the same height.
   ========================================================================= */
.trust{padding:clamp(40px,5vw,64px) 0 clamp(8px,1.5vw,20px);text-align:center}
/* the tour's own bottom padding was the larger half of the gap above the logos */
.demo-sec{padding-top:clamp(20px,3vh,36px);padding-bottom:clamp(40px,5vw,72px);border-top:1px solid var(--border)}
.trust__h{font-size:15px;color:var(--muted-text)}
.trust__logos{list-style:none;margin:22px auto 0;padding:0;max-width:840px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:36px clamp(36px,5vw,72px)}
/* one ink: every mark is flattened to black, then shown at the same strength. Exacta
   carries white type inside its black box, which flattening would erase, so it keeps
   its own black and white. */
.trust__logo{display:block;height:calc(var(--h,32px) * var(--ls,1));width:auto;max-width:100%;object-fit:contain;filter:brightness(0);opacity:.62;transition:opacity .2s ease}
/* seven marks on one line: they step down in size before the row would have to squeeze them */
@media (max-width:1499px){ .trust__logos{--ls:.92} }
@media (max-width:1199px){ .trust__logos{--ls:.85} }
@media (max-width:999px){ .trust__logos{--ls:.76} }
.trust__logo--keep{filter:grayscale(1) contrast(1.2)}
.trust__logo:hover{opacity:1}
/* the same gesture as the rest of v3: each mark comes into focus, one after another,
   when the row scrolls into view (.is-in is set by assets/v3-tour.js) */
.v3-intro .trust__h,.v3-intro .trust__logos li{opacity:0;filter:blur(8px);transform:translateY(12px);
  transition:opacity .7s ease,filter .8s ease,transform .95s cubic-bezier(.19,1,.22,1)}
.v3-intro .trust.is-in .trust__h,.v3-intro .trust.is-in .trust__logos li{opacity:1;filter:none;transform:none}
.v3-intro .trust.is-in .trust__logos li:nth-child(1){transition-delay:.12s}
.v3-intro .trust.is-in .trust__logos li:nth-child(2){transition-delay:.2s}
.v3-intro .trust.is-in .trust__logos li:nth-child(3){transition-delay:.28s}
.v3-intro .trust.is-in .trust__logos li:nth-child(4){transition-delay:.36s}
.v3-intro .trust.is-in .trust__logos li:nth-child(5){transition-delay:.44s}
.v3-intro .trust.is-in .trust__logos li:nth-child(6){transition-delay:.52s}
.v3-intro .trust.is-in .trust__logos li:nth-child(7){transition-delay:.6s}
.v3-intro .trust.is-in .trust__logos li:nth-child(8){transition-delay:.68s}

/* =========================================================================
   CLOSING BAND — the call to action on the left, "Ask your AI" on the right: a frosted
   panel of six assistants, each opening with the question already typed.
   ========================================================================= */
.close__grid{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:clamp(40px,6vw,96px);align-items:center}
.askai{padding:clamp(24px,2.6vw,32px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.askai__h{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-.01em;color:#fff}
.askai__p{margin-top:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.askai__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.askai__btn{display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;
  transition:transform .15s ease,background-color .15s ease}
.askai__btn svg{width:17px;height:17px;flex:none}
.askai__btn:hover{background:var(--paper);transform:translateY(-1px)}
.askai__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:900px){ .close__grid{grid-template-columns:1fr} }
@media (max-width:420px){ .askai__grid{grid-template-columns:repeat(2,1fr)} }

/* ---- the logos inside the hero: white on the grain, a hairline above them ---- */
.trust--hero{padding:0;margin-top:clamp(32px,4.5vh,56px);padding-top:clamp(20px,2.8vh,28px);border-top:1px solid rgba(255,255,255,.22)}
.trust--hero .trust__h{color:rgba(255,255,255,.75);font-size:14px}
/* five marks on one line on desktop */
.trust--hero .trust__logos{margin-top:14px;gap:20px clamp(32px,4.5vw,64px);max-width:none}
@media (min-width:900px){ .trust--hero .trust__logos{flex-wrap:nowrap} }
.trust--hero .trust__logo{filter:brightness(0) invert(1);opacity:.82}
.trust--hero .trust__logo:hover{opacity:1}
/* Exacta keeps its own black and white: inverted, its box reads white with dark type */
.trust--hero .trust__logo--keep{filter:grayscale(1) invert(1) contrast(1.1);opacity:.8}
/* in the hero the row arrives with the rest of the hero, not on scroll */
.v3-intro .trust--hero .trust__h,.v3-intro .trust--hero .trust__logos li{opacity:1;filter:none;transform:none}
.v3-intro .trust--hero{animation:v3In .4s ease both .16s}
/* the demo now follows the hero directly again */
@media (min-width:681px){ .hero{padding-bottom:clamp(40px,5.5vh,64px)} }
.demo-sec{border-top:none}

/* ---- phones: the hero at the desktop's scale ----
   The demo does not need to be above the fold on a phone, so the hero gets the room:
   a headline as big as the width allows, a subtitle at reading size, and space around. */
@media (max-width:640px){
  .hero{padding-top:calc(65px + 64px);padding-bottom:56px}
  .hero .h-display{font-size:clamp(2.6rem,12.4vw,3.6rem);line-height:1.02;letter-spacing:-.03em}
  .hero__sub{margin-top:20px;font-size:1.22rem;line-height:1.45}
  .hero__cta{margin-top:32px}
  /* the two buttons side by side when they fit, stacked when a language makes them longer
     (French "Commencer gratuitement"); the column never grows past the screen for them */
  .hero__copy{min-width:0}
  .hero__cta{flex-wrap:wrap}
  .hero__cta .btn{flex:1 1 auto;width:auto}
  .hero__promise{margin-top:16px;font-size:13px}
  .trust--hero{margin-top:44px;padding-top:24px}
}

/* =========================================================================
   NAV MENUS — Features and For who

   A panel under the bar, centred on it: white, a hairline frame, the app's lucide icons on
   warm tiles, and on the right a card in the hero's grain that points to the next step.
   It opens the way everything on v3 arrives: a fade and a few pixels of rise.
   ========================================================================= */
@media (min-width:821px){
  .mm{display:flex;gap:0;padding:0;width:min(860px,calc(100vw - 48px));
    border:1px solid var(--border);box-shadow:0 30px 70px -36px rgba(40,15,5,.45);
    transform:translateY(8px);transition:opacity .18s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
  .mm--who{width:min(700px,calc(100vw - 48px))}
  .nav__item.open .mm{transform:none;transition:opacity .18s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s}
}
.mm__grid{flex:1;display:grid;grid-template-columns:1fr;gap:2px;padding:14px}
.mm__grid--2{grid-template-columns:1fr 1fr}
.mm__link{display:flex;gap:14px;align-items:flex-start;padding:12px 12px 13px;color:var(--ink);transition:background-color .15s ease}
.mm__link:hover,.mm__link:focus-visible{background:var(--paper)}
.mm__ic{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#f6ece2;color:var(--accent-deep);
  transition:background-color .15s ease,color .15s ease}
.mm__ic svg{width:18px;height:18px}
.mm__link:hover .mm__ic{background:var(--accent-deep);color:#fff}
.mm__tx{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:1px}
.mm__t{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.mm__d{font-size:13px;line-height:1.4;color:var(--muted-text)}
/* the side card: a warm block inside the white panel, ink type, a solid orange button.
   (In the hero's grain it read as a hole through the panel to the orange behind it.) */
.mm__card{flex:none;width:236px;margin:10px 10px 10px 0;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:22px 20px 20px;
  background:var(--paper);border:1px solid #efe4d8;color:var(--ink)}
.mm__cap{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)}
.mm__ct{font-size:16px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.mm__go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--accent-deep)}
.mm__go--btn{align-self:flex-start;height:38px;padding:0 14px;background:var(--accent-deep);color:#fff}
.mm__go .arrow{transition:transform .2s ease}
.mm__card:hover .mm__go .arrow{transform:translateX(3px)}
.mm__card:hover .mm__go--btn{background:#963e20}
/* the old Product panel's own layout rules do not apply to these */
.mm .mega__grid{display:none}

/* ---- mobile menu: Features and For who are collapsible ---- */
.mnav__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;font-size:17px;font-weight:500;color:var(--ink);text-align:left}
.mnav__chev{width:18px;height:18px;color:var(--muted);transition:transform .25s ease}
.mnav__toggle[aria-expanded="true"] .mnav__chev{transform:rotate(180deg)}
.mnav__list{padding:0 0 10px 14px;border-left:2px solid var(--accent-soft);margin-bottom:8px}
.mnav__list .mnav__link{padding:9px 0;font-size:16px;color:var(--muted-text)}

/* =========================================================================
   FOOTER — the page ends in ink, the way the video band does: five columns (brand,
   Features, For who, Company, Legal), a LinkedIn block under the brand line, and the
   petal mark large and faint in the corner.
   ========================================================================= */
.foot{position:relative;overflow:hidden;background:#161311;color:#fff;border-top:none;padding:clamp(64px,8vw,104px) 0 28px}
.foot::after{content:"";position:absolute;right:-90px;bottom:-110px;width:420px;height:420px;opacity:.05;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280.171 280.159'%3E%3Cpath d='M177.798 37.716C177.798 56.862 145.442 92.786 140.211 98.469C139.816 98.897 139.188 98.892 138.801 98.458C133.696 92.737 102.364 56.849 102.364 37.716C102.364 16.886 119.25 0 140.081 0C160.912 0 177.798 16.886 177.798 37.716Z' fill='white'/%3E%3Cpath d='M177.799 242.17C177.799 263.151 160.912 280.159 140.081 280.159C119.251 280.159 102.364 263.151 102.364 242.17C102.364 222.894 133.725 187.341 138.82 181.691C139.207 181.262 139.829 181.257 140.222 181.68C145.441 187.294 177.799 222.881 177.799 242.17Z' fill='white'/%3E%3Cpath d='M37.717 102.362C56.864 102.362 92.789 134.717 98.473 139.949C98.901 140.343 98.896 140.971 98.461 141.358C92.74 146.464 56.851 177.794 37.717 177.794C16.887 177.794 6.104e-05 160.908 6.104e-05 140.078C6.104e-05 119.248 16.887 102.362 37.717 102.362Z' fill='white'/%3E%3Cpath d='M242.18 102.362C263.162 102.362 280.171 119.248 280.171 140.078C280.171 160.908 263.162 177.794 242.18 177.794C222.904 177.794 187.349 146.435 181.699 141.339C181.27 140.952 181.265 140.331 181.688 139.937C187.302 134.719 222.891 102.362 242.18 102.362Z' fill='white'/%3E%3Cpath d='M94.474 40.98C107.999 54.532 110.472 102.815 110.783 110.533C110.807 111.115 110.358 111.555 109.777 111.521C102.122 111.078 54.593 107.805 41.078 94.262C26.364 79.517 26.389 55.637 41.134 40.923C55.879 26.21 79.76 26.235 94.474 40.98Z' fill='white'/%3E%3Cpath d='M238.902 185.706C253.722 200.557 253.783 224.524 239.038 239.238C224.293 253.951 200.326 253.839 185.505 238.988C171.889 225.343 168.973 178.026 168.589 170.428C168.56 169.85 168.997 169.407 169.574 169.429C177.233 169.717 225.277 172.052 238.902 185.706Z' fill='white'/%3E%3Cpath d='M239.441 95.004C225.815 108.454 177.517 110.665 169.797 110.934C169.215 110.955 168.778 110.504 168.815 109.923C169.3 102.271 172.83 54.762 186.447 41.321C201.272 26.688 225.153 26.842 239.786 41.666C254.42 56.491 254.265 80.371 239.441 95.004Z' fill='white'/%3E%3Cpath d='M93.922 238.636C78.99 253.375 55.022 253.306 40.388 238.482C25.755 223.658 25.996 199.692 40.928 184.953C54.647 171.412 101.981 168.753 109.582 168.41C110.159 168.384 110.6 168.823 110.575 169.4C110.246 177.057 107.65 225.086 93.922 238.636Z' fill='white'/%3E%3C/svg%3E") 0 0/contain no-repeat}
.foot .wrap{position:relative;z-index:1}
@media (min-width:1001px){ .foot__top{grid-template-columns:1.5fr repeat(4,1fr)} }
.foot .brand__logo{filter:brightness(0) invert(1)}
.foot__tag{color:rgba(255,255,255,.62)}
.foot__h{color:var(--accent-soft)}
.foot__col a{color:rgba(255,255,255,.86)}
.foot__col a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.foot__bottom{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.foot__langbtn{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.86)}
.foot__langbtn:hover{background:rgba(255,255,255,.08)}
.foot__langbtn svg{color:rgba(255,255,255,.6)}
.foot__li{display:flex;align-items:center;gap:12px;margin-top:22px;max-width:300px;min-width:0;padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:border-color .15s ease,background-color .15s ease}
.foot__li:hover{border-color:#0a66c2;background:rgba(10,102,194,.12)}
.foot__liic{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#0a66c2;color:#fff}
.foot__liic svg{width:18px;height:18px}
.foot__li b{display:block;font-size:14px;font-weight:600}
.foot__li span span{display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.6)}
.foot__li .arrow{flex:none;width:15px;height:15px;margin-left:auto;color:rgba(255,255,255,.6);transition:transform .2s ease}
.foot__li:hover .arrow{transform:translateX(3px)}
@media (max-width:640px){ .foot__top{grid-template-columns:1fr 1fr} .foot__brand{grid-column:1/-1} .foot__li{max-width:none} }
/* the closing band's gold strip sat on the footer's top edge; on ink it is not needed */
.close::after{display:none}