:root{
  --black:#000; --dark:#0d0d0d; --dark-2:#161616; --dark-3:#232323;
  --paper:#fff; --wash:#f4f4f5;
  --g1:#c9c9c9; --g2:#bfbfbf; --g3:#aaa; --g4:#6e6e6e;
  --hair:#e6e6e6; --hair-d:#2b2b2b;
  --red:#e80808; --red-dk:#c50606;
  --r:30px; --r-sm:18px; --r-pill:999px; --w:1220px;
  --ease:cubic-bezier(.22,.9,.3,1);
}
*{box-sizing:border-box}
/* a display: rule on a class beats the hidden attribute, which had the
   new-advert form showing permanently. hidden should always win. */
[hidden]{display:none!important}
/* copy will be translated: long words wrap instead of widening the page */
h1,h2,h3,h4,p,li,dd,dt,.qhead,.go,.btn{overflow-wrap:break-word}
html{scroll-behavior:smooth}
/* the floating header must not cover whatever an anchor lands on */
[id]{scroll-margin-top:clamp(76px,9vw,104px)}
body{margin:0;background:var(--paper);color:var(--black);
  font:400 17px/1.7 "Open Sans",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.nav a,.btn,.eyebrow,.role,.tag,.stat b,.logo,.qhead,.pname,.pnum{
  font-family:Montserrat,Helvetica,Arial,sans-serif}
h1,h2,h3,h4{margin:0 0 .55em;font-weight:700;letter-spacing:-.025em;line-height:1.12}
h1{font-size:clamp(2.4rem,5.4vw,4.15rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em}
h3{font-size:1.4rem;font-weight:800}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:980px}
section{padding:clamp(64px,8vw,112px) 0}
.dark{background:var(--dark);color:var(--g1)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark strong,
.hero h1,.hero h2{color:#fff}
.eyebrow{font-size:.73rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;
  display:block;margin-bottom:20px;color:var(--g4)}
.dark .eyebrow{color:var(--g3)}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.6;max-width:62ch;color:#3a3a3a}
.dark .lead{color:var(--g2)}

/* header */
/* One header, on every page, signed in or out. Always there, always the same
   shape; only the links change, and the page you are on is marked.
 *
 * This is the dashboard's header, promoted to serve the whole site. It was the
 * better of the two that existed: dark, worked out across three breakpoints,
 * and already marking the current page. partner.css kept this component and
 * three more rules to undo the old header here; both are gone now.
 *
 * What this replaced: a white bar that started hidden and was slid into view by
 * JavaScript once you scrolled past 300px. That behaviour carried two mobile
 * workarounds of its own - phone browsers hiding their address bar ghosted the
 * translucent bar, and the slide animation was caught half way when the
 * viewport resized mid-scroll. Always-visible needs neither.
 *
 * sticky rather than fixed on purpose: it keeps its space in the flow, so no
 * page needs padding at the top to avoid sliding underneath it. Anchors are
 * already handled by the scroll-margin-top rule near the top of this file. */
/* no overflow:hidden here - ::before is inset:0 and never leaves the box, and
   clipping would cut off the menu panel that hangs below the bar on a phone */
header.top{position:sticky;top:0;z-index:40;background:var(--dark);color:#fff}
header.top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 140% at 78% -30%, rgba(255,255,255,.13), transparent 62%)}
.top__in{position:relative;display:flex;align-items:center;gap:30px;height:86px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{display:block;height:34px;width:auto}
/* display:contents on a wide screen, so the links and the sign-in button are
   laid out by the bar itself exactly as if the wrapper were not there. It only
   becomes a box of its own once it is a drop-down panel. */
.menu{display:contents}
.burger{display:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--g1);text-decoration:none;font-weight:600;font-size:14.5px;
  padding:9px 15px;border-radius:var(--r-pill);transition:.18s var(--ease)}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
/* aria-current rather than a class: the page already had to say which link is
   current for a screen reader, so the styling hangs off the same fact instead
   of a second one that can disagree with it. */
.nav a[aria-current="page"]{color:var(--dark);background:#fff}
.who{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--g1)}
.who__name{font-weight:600;color:#fff}
.who .linkish{background:none;border:0;color:var(--g3);cursor:pointer;font:inherit;padding:0}
.who .linkish:hover{color:#fff}
/* signed out, the one thing in that slot is the way in */
.nav-login{display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill);padding:9px 18px;color:#fff;font-weight:700;
  font-size:14px;text-decoration:none;transition:border-color .15s,background .15s}
.nav-login:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
/* on the sign-in page itself, the way in is where you already are */
.nav-login[aria-current="page"]{background:#fff;border-color:#fff;color:var(--dark)}

/* language switch.
   Built from the "languages" list in src/pages.json. A language that is not
   built yet is not a link - it is listed and marked, because offering a link
   to a page that does not exist is the same kind of promise as a price for
   something nobody can buy. */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:700;font-size:13.5px;
  letter-spacing:.05em;color:var(--g1);background:none;border:0;padding:9px 2px;
  transition:color .15s}
.lang__btn:hover,.lang__btn[aria-expanded="true"]{color:#fff}
.lang__btn i{width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;
  transition:transform .2s var(--ease)}
.lang__btn[aria-expanded="true"] i{transform:rotate(180deg)}
.lang__list{display:none;margin:0;padding:8px;z-index:3;
  position:absolute;top:calc(100% + 10px);right:0;width:390px;max-width:88vw;
  background:var(--dark-2);border:1px solid var(--hair-d);border-radius:var(--r-sm);
  box-shadow:0 28px 50px -30px rgba(0,0,0,.9)}
.lang__list.is-open{display:block}
/* a dozen languages in one column is a menu you scroll; in two it is a list
   you read */
.lang__have,.lang__plan{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1px 4px}
.lang__list a,.lang__list span{display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:11px;font-size:14px;text-decoration:none;
  color:var(--g1)}
/* drawn rather than emoji: Windows has no glyphs for flag emoji and shows the
   two letters instead, which is worse than no flag at all */
.lang__flag{flex:0 0 20px;width:20px;height:15px;display:block;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.lang__btn .lang__flag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.lang__list a:hover{background:rgba(255,255,255,.08);color:#fff}
.lang__list a[aria-current="true"]{color:#fff;font-weight:700;
  background:rgba(255,255,255,.08)}
.lang__list span{color:var(--g4);cursor:default;font-size:14px}
/* said once over the group, rather than as a badge on each of eleven rows */
.lang__soon{margin:10px 12px 6px;font-family:Montserrat,Helvetica,Arial,sans-serif;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g4);border-top:1px solid var(--hair-d);padding-top:12px}
/* Phone and tablet: the logo alone in the middle, everything else behind the
   menu button. The links used to take their own row and swipe sideways, which
   made the bar two rows tall on every page and hid the sign-in button off the
   end of a scroller nobody could see was scrollable. */
@media(max-width:980px){
  .top__in{height:64px;gap:0}
  .burger{display:inline-flex;align-items:center;justify-content:center;
    position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:44px;height:44px;padding:0;border:0;background:none;
    color:#fff;cursor:pointer}
  .burger i{display:block;width:22px;height:2px;border-radius:2px;
    background:currentColor;position:relative;transition:.2s var(--ease)}
  .burger i::before,.burger i::after{content:"";position:absolute;left:0;
    width:22px;height:2px;border-radius:2px;background:currentColor;
    transition:.2s var(--ease)}
  .burger i::before{top:-7px}
  .burger i::after{top:7px}
  /* open, the three bars become the cross that closes it */
  .burger[aria-expanded="true"] i{background:transparent}
  .burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

  .brand{margin:0 auto}
  .brand img{height:28px}

  /* a shade lighter than the bar and the hero, or the panel has no visible
     edge against either and reads as the page rather than as a layer over it */
  .menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:1;
    flex-direction:column;align-items:stretch;gap:6px;
    background:var(--dark-2);padding:10px 0 18px;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.12)}
  .menu.is-open{display:flex}
  .nav{flex-direction:column;margin:0;gap:2px}
  .nav a{padding:13px 28px;border-radius:0;font-size:16px}
  .nav a[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
  .who{padding:8px 28px 0;gap:14px;flex-wrap:wrap}
  .nav-login{width:100%;justify-content:center;padding:12px 18px;font-size:15px}
  /* inside the menu panel there is no room to hang a second panel off the
     right edge, so it opens under the button and as wide as the panel */
  .lang{width:100%;order:-1}
  /* flag and code stay together; only the chevron goes to the far edge */
  .lang__btn{width:100%;justify-content:flex-start;padding:11px 0;font-size:14px}
  .lang__btn i{margin-left:auto}
  .lang__list{position:static;width:100%;min-width:0;margin-top:6px;box-shadow:none}
}
@media(max-width:420px){
  .brand img{height:24px}
  .who{font-size:13px;gap:10px}
}
@media(pointer:coarse){.nav a{padding:11px 16px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:transparent;cursor:pointer;
  padding:16px 32px;border-radius:999px;text-decoration:none;font-weight:700;
  font-size:.98rem;letter-spacing:-.01em;border:2px solid transparent;
  transition:transform .15s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--red);color:#fff}
/* primary within its own card, without a second red on the screen */
.btn-dark{background:#141414;color:#fff;border-color:#141414}
.btn-dark:hover{background:#2c2c2c;border-color:#2c2c2c}
.btn-solid:hover{background:var(--red-dk)}
.btn-line{border-color:rgba(255,255,255,.32);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.on-light .btn-line{border-color:var(--black);color:var(--black)}
.price .btn-line{border-color:#cfcfcf;color:var(--black)}
.price .btn-line:hover{border-color:var(--black);background:rgba(0,0,0,.05)}
.on-light .btn-line:hover{background:var(--black);color:#fff}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* hero */
.hero{background:var(--dark);color:var(--g1);position:relative;overflow:hidden;
  padding:clamp(64px,8vw,104px) 0 clamp(56px,7vw,92px)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 72% -8%,rgba(255,255,255,.10),transparent 66%)}
.hero .wrap{position:relative}
.hero:not(.compact) h1{text-wrap:balance;max-width:14ch;margin-inline:auto}
.hero.compact h1{text-wrap:balance;max-width:20ch;margin-inline:0}
.hero.compact h1 em{font-style:normal;color:var(--g3);display:block;
  font-size:.66em;letter-spacing:-.03em;margin-top:.18em}
.hero-sub{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:800;
  color:var(--g3);letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(1.5rem,2.9vw,2.45rem);margin:.55em 0 0}
.hero .lead{text-wrap:pretty}
.hero .lead{margin:0 auto;color:#e2e2e2}
/* The homepage stack was fading out - the connective middle line was the
   brightest of the three. Now it is the dim one, so the headline leads on
   size and colour and the payoff still lifts on the way into the buttons. */
.hero:not(.compact) h1{color:#fff}
.hero:not(.compact) .lead{color:#949494}
.hero:not(.compact) .hero-sub{color:#fff}
.hero > .wrap{position:relative}
@media(max-width:760px){
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:0;align-items:center}
.hero-copy{display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center}
.hero-shot{margin:0;padding:0;display:flex;align-items:center;justify-content:center;
  position:relative}
.hero-shot::before{content:"";position:absolute;width:64%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,8,8,.18),transparent 64%);filter:blur(34px)}
.hero-shot img{position:relative;width:100%;max-width:310px;height:auto;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6))}
@media(max-width:900px){
  .hero{padding:26px 0 34px}
  .hero-grid{grid-template-columns:1fr;gap:0}
  /* let the copy's children join the grid so the icon can sit between the
     paragraph and the buttons, keeping the CTAs last and thumb-reachable */
  .hero-copy{display:contents}
  .hero h1{order:2;max-width:16ch;font-size:clamp(1.95rem,7.4vw,2.5rem)}
  .hero .lead{order:3;font-size:1.06rem;line-height:1.5;color:#e2e2e2}
  .hero-sub{order:4;font-size:clamp(1.35rem,5.6vw,1.85rem);margin-top:.5em}
  .hero-shot{order:5;margin:24px 0 20px}
  /* back to the square app-icon tile: the artwork's own ground was removed,
     so a black tile behind it reproduces the store icon exactly */
  .hero-shot img{width:152px;height:152px;max-width:none;object-fit:contain;
    padding:6px;background:#000;border-radius:23%;
    filter:none;border:1px solid rgba(255,255,255,.14);
    box-shadow:0 14px 34px rgba(0,0,0,.6)}
  .hero-shot::before{width:170px;max-width:none;opacity:.7}
  .hero .ctas{order:6;flex-direction:column;align-items:stretch;
    width:100%;max-width:330px;margin:0 auto;gap:10px}
  .hero .ctas .btn{padding:14px 24px}
  .hero .ctas .btn{width:100%}
}
.hero .ctas{margin-top:38px;justify-content:center}
.hero.compact{padding:clamp(56px,7vw,96px) 0;text-align:left}
.hero.compact .lead{margin:0}

/* the numbers a company weighs the price against - kept few, because three
   figures that survive checking are worth more than six that do not */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media(max-width:860px){.statgrid{grid-template-columns:1fr;gap:14px}}
.stat{background:var(--dark-2);border:1px solid var(--hair-d);border-radius:var(--r);
  padding:34px 30px;display:flex;flex-direction:column;gap:12px}
.stat b{display:block;font-weight:800;color:#fff;line-height:1;letter-spacing:-.04em;
  font-size:clamp(2.6rem,5vw,3.6rem)}
.stat span{color:var(--g2);font-size:.96rem;line-height:1.5;max-width:30ch}
@media(max-width:860px){
  .stat{flex-direction:row;align-items:baseline;gap:18px;padding:22px 24px}
  .stat b{font-size:2.3rem;flex:0 0 auto}
  .stat span{max-width:none}
}

/* the fork */
.fork{background:var(--paper);padding:clamp(56px,7vw,100px) 0}
.fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;grid-auto-rows:1fr}
/* stacked, the rows stay equal too, so a longer translation on one card
   cannot leave the other man sitting in a smaller box */
@media(max-width:940px){.fork-grid{grid-template-columns:1fr;grid-auto-rows:1fr}}
.choice{--fig:clamp(300px,31vw,370px);
  background:var(--dark);border-radius:var(--r);overflow:hidden;color:var(--g1);
  padding:clamp(38px,4.4vw,60px);display:flex;flex-direction:column;text-decoration:none;
  position:relative;min-height:410px;
  box-shadow:0 40px 80px -44px rgba(0,0,0,.55);
  transition:transform .2s,box-shadow .2s}
.choice:hover{transform:translateY(-4px);box-shadow:0 50px 90px -40px rgba(0,0,0,.65)}
.choice::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.choice .who{margin-bottom:auto}
.choice .who,.choice .qhead,.choice p,.choice .go{position:relative;z-index:2}
.who .n{font-weight:700;color:#fff;font-size:.98rem;letter-spacing:-.01em;line-height:1.3;
  font-family:Montserrat}
.who .r{font-size:.78rem;color:var(--g4)}
.qhead{font-size:clamp(1.9rem,2.9vw,2.5rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.06;color:#fff;margin:44px 0 14px;font-family:Montserrat}
.choice p{color:var(--g2);font-size:1.02rem;margin:0 0 28px;max-width:34ch}
.go{display:inline-flex;align-items:center;gap:12px;font-family:Montserrat;font-weight:700;
  color:#fff;font-size:1rem;letter-spacing:-.01em}
.go i{width:38px;height:38px;border-radius:50%;background:var(--red);display:grid;
  place-items:center;font-style:normal;transition:transform .2s}
.go svg{width:16px;height:16px}
.choice:hover .go i{transform:translateX(4px)}

/* the two of them face each other across the gap: the driver card's figure
   sits on its right edge, the company card's on its left */
/* Sized by height, not width — the two photographs have different builds, and
   matching their widths would put their heads at different levels.
   At this size the figure is wider than the space beside the copy, so it runs
   behind it and a gradient scrim fades it out under the text. That is the only
   way to have them this large in a half-width card. */
.choice .figure{position:absolute;bottom:0;height:var(--fig);z-index:0;
  pointer-events:none;user-select:none;display:flex;align-items:flex-end;
  transition:transform .25s}
.choice .scrim{display:none;position:absolute;inset:0;z-index:1;pointer-events:none}

.choice--figr .figure{right:0}
.choice--figl .figure{left:0}
.choice:hover .figure{transform:translateY(-4px)}
.choice--figl:hover .figure{transform:translateY(-4px)}
.choice .figure img{height:100%;width:auto;display:block}
.choice .figure svg{width:100%;height:auto;display:block}
.choice--figr{padding-right:calc(var(--fig) * .86)}
.choice--figl{padding-left:calc(var(--fig) * .86)}
@media(max-width:1100px){
  .choice{--fig:clamp(280px,30vw,330px)}
}
@media(max-width:620px){
  /* Stacked cards: both men sit on the right and every card reads the same
     way - name, question, line, link, all from the same left edge. Swapping
     one of them to the left put the copy on top of Laci, who is the wider of
     the two, and left the two cards indented differently. */
  /* Both men on the right. The name and the question sit ABOVE the figure's
     top edge, so they take the whole card width - reserving a column for him
     up there was what forced "Sofort keresel?" onto two lines, which made
     that card taller and him look smaller inside it. Only the line and the
     link, which are level with him, step aside. min-height keeps the two
     cards identical so neither man is measured against a bigger box. */
  .choice{--fig:clamp(180px,46vw,206px);min-height:320px}
  .choice .scrim{display:block}
  .choice--figr .figure,.choice--figl .figure{left:auto;right:0}
  .choice--figr:hover .figure,.choice--figl:hover .figure{transform:translateY(-4px)}
  .choice--figr,.choice--figl{padding:26px clamp(22px,5.6vw,30px)}
  .choice p,.choice .go{max-width:calc(100% - var(--fig) * .58)}
  .choice--figr .scrim,.choice--figl .scrim{background:linear-gradient(to right,
    var(--dark) 34%, rgba(13,13,13,.95) 52%, rgba(13,13,13,.55) 70%, rgba(13,13,13,0) 86%)}
  .choice .who{margin-bottom:18px}
  .qhead{font-size:clamp(1.55rem,7vw,1.95rem);margin:0 0 10px}
  .choice p{font-size:.95rem;line-height:1.5;margin:0 0 20px}
  .go{font-size:.9rem;gap:9px}
  .go i{width:33px;height:33px}
}

/* story */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
@media(max-width:880px){.halves{grid-template-columns:1fr}}
.half{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  padding:38px;display:flex;flex-direction:column}
.portrait{width:112px;height:112px;border-radius:50%;margin-bottom:30px;background:#fff;
  border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait.contain img{object-fit:contain;padding:8px}
.half .role{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  color:var(--g4);margin:0 0 16px}
.half p{color:#454545;font-size:1rem}
.half .meta{margin-top:auto;padding-top:20px;border-top:1px solid var(--hair);
  font-size:.84rem;color:var(--g4);font-weight:600}

/* video slot */
.slot{border-radius:var(--r);background:var(--dark-2);border:1px solid var(--hair-d);
  display:grid;place-items:center;text-align:center;padding:36px 26px;color:var(--g3)}
.on-light .slot{background:var(--wash);border-color:var(--hair);color:var(--g4)}
.slot.video{aspect-ratio:21/9;padding:0}
.slot .play{width:58px;height:58px;border-radius:50%;border:2px solid currentColor;
  display:grid;place-items:center;margin:0 auto;opacity:.45}
.slot .play svg{width:20px;height:20px;margin-left:3px}

/* youtube facade */
.ytembed{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--dark-2);cursor:pointer}
.ytembed img{width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .2s}
.ytembed:hover img{transform:scale(1.02);opacity:.85}
.ytembed button{position:absolute;inset:0;margin:auto;width:82px;height:82px;
  border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:transform .2s,background .2s;
  box-shadow:0 12px 40px rgba(0,0,0,.45)}
.ytembed button svg{width:30px;height:30px;margin-left:4px}
.ytembed:hover button{transform:scale(1.08);background:var(--red-dk)}
.ytembed iframe{width:100%;height:100%;border:0;display:block}

/* app shot */
/* Laci fronts the driver page from his quote block; Peter fronts this one
   from the hero. The app icon does not belong here - it reads as "download
   the app", which is the driver's call to action, not a company's. */
.heroperson{display:flex;align-items:flex-end;justify-content:center;
  position:relative;align-self:stretch;min-height:340px}
.heroperson::before{content:"";position:absolute;bottom:0;width:72%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(232,8,8,.16),transparent 64%);
  filter:blur(38px)}
.heroperson img{position:relative;width:auto;height:clamp(300px,32vw,430px);
  max-width:100%;object-fit:contain;object-position:bottom;display:block}
.shotwrap{display:flex;justify-content:center;margin-top:auto;padding-top:40px}
.shotwrap img{width:88%;max-width:340px;border-radius:26px 26px 0 0;
  box-shadow:0 -10px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:40px}}
.split .shotwrap{padding-top:0;position:relative}
.split .shotwrap::before{content:"";position:absolute;width:70%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(232,8,8,.18),transparent 64%);
  filter:blur(34px)}
.split .shotwrap img{position:relative;width:100%;max-width:330px;height:auto;
  border-radius:0;box-shadow:none;filter:drop-shadow(0 24px 44px rgba(0,0,0,.6))}

/* feature list */
.plist{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.plist li{position:relative;padding-left:32px;font-size:1rem;line-height:1.6}
.plist li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;
  border-radius:50%;background:var(--red)}
.plist b{display:block;font-family:Montserrat;font-weight:700;font-size:1.04rem;
  letter-spacing:-.01em;margin-bottom:2px}
.dark .plist b{color:#fff}

/* store badges */
/* the badges are black artwork, so they need a light ground to sit on -
   kept as tight as possible so it does not outshine the headline */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;background:#ededed;
  border-radius:12px;padding:10px 12px;align-items:center;width:fit-content}
.badges img{height:38px;width:auto;transition:transform .15s}
.badges a:hover img{transform:translateY(-2px)}

/* pricing */
/* the promise the company page is built on - it has to read as a fact, not
   as another line of copy, so it gets a pill of its own */
.freeline{display:inline-flex;align-items:center;gap:11px;font-family:Montserrat,Helvetica,Arial,sans-serif;
  font-weight:700;color:#fff;font-size:clamp(.9rem,1.15vw,1rem);letter-spacing:-.01em;
  line-height:1.35;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:12px 22px;margin:0 0 28px}
.freeline::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--red);flex:0 0 9px}

/* Start exists in the product and every company lands on it, so it belongs on
   the page ahead of the paid tiers rather than being left out of the ladder */
.freestep{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;margin-top:40px;padding:32px 36px;border-radius:var(--r);
  background:var(--dark-2);border:1px solid var(--hair-d)}
.freestep h3{color:#fff;font-size:clamp(1.2rem,2vw,1.5rem);margin:8px 0 10px}
.freestep p{color:var(--g2);margin:0;max-width:52ch;font-size:.98rem;line-height:1.55}
.fs-tag{display:inline-block;font-family:Montserrat,Helvetica,Arial,sans-serif;
  font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
  color:#fff;background:var(--red);border-radius:999px;padding:5px 13px}
.freestep .btn{flex:0 0 auto}
@media(max-width:700px){
  .freestep{padding:26px 22px;gap:22px}
  .freestep .btn{width:100%}
}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;
  align-items:stretch}
/* Phone and tablet: a rail you swipe, not a column three screens tall.
 *
 * It opens on the most popular tier rather than the cheapest, and whichever
 * card is in the middle is the large one - so the comparison happens between
 * a card and its neighbours, which is what a price table is for. Stacked, you
 * could only ever see one tier at a time and had to remember the last.
 *
 * The cards scale about their own centre, which is why the snap points hold
 * still: scroll-snap-align:center lines up centres, and a centred scale does
 * not move a centre. The side padding is what lets the first and last card
 * reach the middle at all. */
@media(max-width:940px){
  .prices{
    --card:clamp(250px,62vw,380px);
    display:flex;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* overflow-x:auto clips the other axis too, so the tag that hangs above
       the featured card and its shadow both need room here */
    padding:26px calc(50% - var(--card) / 2) 40px;
    margin-top:14px;
  }
  .prices::-webkit-scrollbar{display:none}
  .price{
    flex:0 0 var(--card);
    scroll-snap-align:center;
    transform:scale(.9);
    transform-origin:center center;
    opacity:.72;
    transition:transform .28s var(--ease),opacity .28s var(--ease)}
  .price.is-middle{transform:none;opacity:1}
}
@media(max-width:940px) and (prefers-reduced-motion:reduce){
  .price{transition:none}
}
.price{border:1px solid var(--hair);border-radius:var(--r);padding:36px 32px;
  background:var(--paper);color:#141414;display:flex;flex-direction:column;
  position:relative}
.price.feat{border-color:var(--red);
  box-shadow:0 0 0 1px var(--red),0 40px 80px -34px rgba(232,8,8,.45)}
/* annual is the default (it churns less), monthly the secondary option */
.billing{display:inline-flex;align-items:center;gap:4px;margin-top:30px;padding:5px;
  border-radius:999px;background:var(--dark-2);border:1px solid var(--hair-d)}
.bill-opt{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:700;font-size:.92rem;
  letter-spacing:-.01em;color:var(--g2);background:transparent;border-radius:999px;
  padding:11px 20px;transition:background .15s,color .15s}
.bill-opt:hover{color:#fff}
.bill-opt.is-on{background:#fff;color:var(--black)}
.save{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  background:var(--red);color:#fff;border-radius:999px;padding:4px 10px;white-space:nowrap}
@media(max-width:520px){
  .billing{width:100%;justify-content:stretch}
  .bill-opt{flex:1;justify-content:center;padding:11px 12px;font-size:.86rem}
  .save{display:none}
}
.ptag{position:absolute;top:-13px;left:32px;background:var(--red);color:#fff;
  font-family:Montserrat;font-weight:700;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;padding:6px 14px;border-radius:999px}
.pname{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--g4);margin-bottom:18px}
.pnum{font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);letter-spacing:-.04em;line-height:1}
.pnum small{font-size:.94rem;font-weight:600;letter-spacing:0;color:#5f5f5f}
/* the saving is the reason annual is the default, so it is shown, not
   mentioned: what a year of monthly would have cost, struck through, and the
   two free months as a badge rather than a grey footnote */
.pwas{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:700;font-size:1rem;
  color:#9a9a9a;text-decoration:line-through;text-decoration-thickness:2px;
  letter-spacing:-.02em;line-height:1;margin-bottom:8px}
.pwas:empty{display:none}
.psave{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:800;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.2;
  background:var(--red);color:#fff;border-radius:999px;padding:8px 15px}
/* on monthly there is no saving yet - it becomes a quiet nudge, not a claim */
.psave.is-nudge{background:transparent;color:#5f5f5f;border:1px solid var(--hair);
  font-weight:600;font-size:.82rem;text-transform:none;letter-spacing:0}
.pyear{font-size:.87rem;color:#5f5f5f;margin-top:10px}
.pfeat{list-style:none;padding:0;margin:26px 0 28px;display:grid;gap:12px;flex:1}
.pfeat li{position:relative;padding-left:30px;font-size:.94rem;line-height:1.45}
.pfeat li::before{position:absolute;left:0;top:-1px;font-size:1rem;font-weight:700}
.pfeat .yes::before{content:"✓";color:var(--red)}
.pfeat .no{color:#767676}
.pfeat .no::before{content:"–"}
.pfeat b{font-family:Montserrat;font-weight:800}
.pnote{font-size:.8rem;color:#6e6e6e;margin:-14px 0 22px;line-height:1.5}
.price .btn{margin-top:auto}
.price .btn{width:100%}

.story-end{padding-bottom:clamp(44px,5vw,64px)}
.closing.single{grid-template-columns:1fr}
.closing-card .badges{margin-top:auto;width:fit-content}
.closing{display:grid;grid-template-columns:1fr 1fr;gap:24px;
  margin-top:clamp(46px,5vw,68px)}
.closing-card{background:var(--dark);color:var(--g1);border-radius:var(--r);
  padding:clamp(30px,3.4vw,44px);display:flex;flex-direction:column;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.5)}
.closing-card h3{color:#fff;font-size:clamp(1.35rem,2.2vw,1.75rem);margin:0 0 14px}
.closing-card p{color:var(--g2);font-size:1rem;line-height:1.6;margin:0 0 28px}
.closing-card .btn{align-self:flex-start;margin-top:auto}
/* The last thing on the page was a grey box adrift in white space, with a
   secondary button barely visible against it. The close now carries the brand
   colour and states the page's one promise again. */
.closing-card--push{background:linear-gradient(135deg,var(--red) 0%,var(--red-dk) 100%);
  border:0;text-align:center;align-items:center;
  padding:clamp(44px,5.6vw,72px) clamp(26px,5vw,64px);
  box-shadow:0 44px 90px -44px rgba(232,8,8,.55)}
.closing-card--push h3{color:#fff;font-size:clamp(1.75rem,3.2vw,2.5rem);margin:0 0 14px}
.closing-card--push p{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.4vw,1.12rem);
  max-width:44ch;margin:0 auto 32px}
.closing-card--push .ctas{justify-content:center}
.btn-invert{background:#fff;color:var(--red)}
.btn-invert:hover{background:#f1f1f1}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
/* it is the last word on the page, so it does not float in a wide white gap */
.on-light:has(.closing-card--push){padding-top:clamp(30px,3.4vw,48px)}
/* One flat red rectangle repeating the free step from higher up the page was
   both empty and redundant. Two panels: the visitor either starts on their
   own or wants to ask someone first, and the second half is information the
   page did not have anywhere else. */
.endgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:20px;margin-top:52px}
@media(max-width:820px){.endgrid{grid-template-columns:1fr;gap:14px;margin-top:36px}}
.endcard{border-radius:var(--r);padding:clamp(26px,4vw,52px);display:flex;
  flex-direction:column;align-items:flex-start;min-width:0}
.endcard h3{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 12px;line-height:1.15}
.endcard p{font-size:1rem;line-height:1.6;margin:0 0 26px;max-width:min(34ch,100%)}
.endcard .btn{align-self:flex-start;max-width:100%}
.endcard--go{background:linear-gradient(135deg,var(--red) 0%,var(--red-dk) 100%);
  color:#fff;box-shadow:0 40px 80px -44px rgba(232,8,8,.5)}
.endcard--go h3{color:#fff}
.endcard--go p{color:rgba(255,255,255,.92)}
.endcard--ask{background:var(--dark);color:var(--g1);border:1px solid var(--hair-d)}
.endcard--ask h3{color:#fff}
.endcard--ask p{color:var(--g2)}
.on-light .endcard--ask .btn-line{border-color:rgba(255,255,255,.42);color:#fff}
.on-light .endcard--ask .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.endnote{font-size:.85rem;margin:18px 0 0!important}
.endcard--go .endnote{color:rgba(255,255,255,.75)}
.endcard--go .endnote a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.endcard--ask .endnote{color:var(--g4)}
.closing-icon{display:none}
@media(min-width:821px){
  .closing.single .closing-card:not(.closing-card--push){flex-direction:row;align-items:center;
    gap:clamp(34px,4.5vw,64px)}
  .closing.single .ctext{flex:1;display:flex;flex-direction:column}
  .closing-icon{display:block;flex:0 0 auto;width:clamp(126px,13vw,164px);height:auto;
    border-radius:30px;box-shadow:0 26px 60px -26px rgba(0,0,0,.9),
      inset 0 0 0 1px rgba(255,255,255,.1)}
}
@media(max-width:820px){
  .closing{grid-template-columns:1fr;gap:16px}
  .closing-card .btn{align-self:stretch;width:100%}
}

/* live cards */
.grid{display:grid;gap:22px;margin-top:44px}
.jobs{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.vids{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{border-radius:var(--r-sm);overflow:hidden;background:#fff;border:1px solid var(--hair);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 48px -22px rgba(0,0,0,.4)}
.dark .card{background:var(--dark-2);border-color:var(--hair-d);color:var(--g1)}
.dark .card h4{color:#fff}
.card .body{padding:24px}
.jobs .card .body{padding:26px 24px 28px}
.jobs .card h4{font-size:1.12rem;margin:0;line-height:1.32}
.jobhead{display:flex;gap:13px;align-items:center;margin-bottom:18px}
.jobhead img{width:46px;height:46px;border-radius:11px;object-fit:cover;background:#fff;flex:0 0 46px}
.jobhead .co{font-size:.78rem;font-weight:700;font-family:Montserrat;text-transform:uppercase;
  letter-spacing:.06em;color:var(--g3);line-height:1.35}
.card .where{font-size:.85rem;color:var(--g3);margin:0 0 13px}
.pay{font-family:Montserrat;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.tag{font-size:.7rem;font-weight:600;border:1px solid var(--hair);border-radius:999px;
  padding:4px 12px;color:#5a5a5a}
.dark .tag{border-color:var(--hair-d);color:var(--g2)}
.thumbwrap{position:relative;background:var(--dark-2)}
.thumb{aspect-ratio:16/9;object-fit:cover;width:100%}
.thumbwrap::after{content:"";position:absolute;left:16px;bottom:16px;width:40px;height:40px;
  border-radius:50%;background:rgba(0,0,0,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.thumbwrap::before{content:"";position:absolute;left:31px;bottom:28px;z-index:2;
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.card time{font-size:.78rem;color:var(--g4);font-weight:600}
.dark .card time{color:var(--g3)}
.empty{border:1px solid var(--hair-d);border-radius:var(--r-sm);padding:34px;
  text-align:center;color:var(--g3)}
.on-light .empty{border-color:var(--hair);color:var(--g4)}

.saysplit{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,60px);
  align-items:center}
@media(max-width:820px){.saysplit{grid-template-columns:1fr;gap:30px}}
.photoslot{aspect-ratio:4/5;border-radius:var(--r);background:var(--wash);
  border:1px solid var(--hair);display:grid;place-items:center;color:#b4b4b4;
  overflow:hidden}
@media(max-width:820px){
  .photoslot{max-width:230px;margin:0 auto}
  .saysplit{gap:22px}
}
.photoslot svg{width:64px;height:64px;opacity:.5}
.photoslot img{width:100%;height:100%;object-fit:cover}
.bigquote{margin:26px 0 0;padding:0 0 0 26px;border-left:3px solid var(--red)}
.bigquote p{font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.6;color:#2f2f2f;
  margin:0 0 1em}
.bigquote cite{display:block;font-style:normal;font-family:Montserrat,sans-serif;
  font-weight:700;font-size:.84rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--g4)}

/* each feature is its own full-width band, alternating light and dark so the
   six of them do not read as one long list */
.feature-band{padding:clamp(46px,6.5vw,86px) 0;background:var(--paper)}
.feature-band.dark{background:var(--dark);color:var(--g1)}
.feature-band.dark h3{color:#fff}
.feature-band.dark .feature p{color:var(--g2)}
.feature-band + .feature-band{border-top:0}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);
  align-items:center}
.feature-band:nth-of-type(even) .feature-shot{order:-1}
@media(max-width:820px){
  /* on a phone the six bands become one swipeable rail: all the features stay,
     the page stops being a mile of vertical scroll */
  .features{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:6px 20px 26px;scroll-padding-left:20px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .features::-webkit-scrollbar{display:none}
  .feature-band{flex:0 0 84%;scroll-snap-align:start;padding:26px 22px 28px;
    background:var(--dark)!important;color:var(--g1);border-radius:var(--r);
    box-shadow:0 24px 60px -34px rgba(0,0,0,.55);
    display:flex;flex-direction:column}
  /* cards in the rail are all the tallest card's height, so pushing the
     screenshot to the bottom lines them all up instead of each one starting
     wherever its paragraph happens to end */
  .feature-band > .wrap{flex:1;display:flex;flex-direction:column}
  .feature-band .feature{flex:1;display:flex;flex-direction:column}
  .feature-band .feature-shot{margin-top:auto}
  .feature-band h3{color:#fff}
  .feature-band .feature p{color:var(--g2);max-width:none}
  .feature-band > .wrap{padding:0;max-width:none}
  .feature{grid-template-columns:1fr;gap:20px}
  .feature-band:nth-of-type(even) .feature-shot{order:0}
  .feature-shot img{max-width:206px;
    box-shadow:0 20px 44px -22px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
  .fnum{font-size:2rem;margin-bottom:12px}
}
.fnum{font-family:Montserrat,sans-serif;font-weight:800;
  font-size:clamp(2.2rem,5vw,3.1rem);letter-spacing:-.04em;line-height:1;
  color:var(--red);display:flex;align-items:center;gap:14px;margin-bottom:16px}
.fnum::after{content:"";flex:1;height:2px;background:currentColor;opacity:.28}
.feature h3{font-size:clamp(1.35rem,2.3vw,1.85rem);margin:0 0 .55em}
.feature p{font-size:1.02rem;line-height:1.7;color:#3d3d3d;margin:0;max-width:46ch}
.feature-shot{display:flex;justify-content:center}
.feature-shot .shotframe{position:relative;display:block;width:100%;max-width:252px;
  border-radius:22px;overflow:hidden;box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.feature-shot img{display:block;width:100%;height:auto}
/* Every screenshot was cropped short to fit the phone rail, so they all end
   part-way through a row. Fading the last stretch into the band's own colour
   makes the cut read as "there is more below" rather than as a broken image. */
.feature-shot .shotframe::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:15%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper))}
.feature-band.dark .feature-shot .shotframe{
  box-shadow:0 0 0 1px rgba(255,255,255,.22),
             0 0 0 7px rgba(255,255,255,.035),
             0 40px 80px -30px rgba(0,0,0,.95),
             0 0 70px -14px rgba(255,255,255,.07)}
.feature-band.dark .feature-shot .shotframe::after{
  background:linear-gradient(to bottom,rgba(13,13,13,0),var(--dark))}

/* the opener for the six bands: tight to the section above it, and on a wide
   screen it carries the first band's ground so the two read as one block.
   Its bottom padding must stay non-zero - at zero the h2 margin collapses
   straight through the section and the page background shows as a stripe. */
.features-intro{padding-top:0}
@media(min-width:821px){
  .features-intro{background:var(--dark);color:var(--g1);
    padding:clamp(46px,5.6vw,78px) 0 clamp(12px,1.6vw,20px)}
  .features-intro h2{color:#fff;margin-bottom:0}
  .features-intro + .features .feature-band:first-child{padding-top:clamp(16px,2vw,26px)}
  /* the copy column is much shorter than the phone beside it, so centring it
     pushed "01" a long way below the heading it belongs to */
  .features-intro + .features .feature-band:first-child .feature{align-items:start}
}

/* the live feeds are a single rail at every width: on a phone you swipe it,
   on a desktop it drifts left on its own (js/live.js). Vertical padding is
   there so the cards' hover lift and shadow are not clipped by overflow. */
.grid.jobs,.grid.vids{display:flex;gap:14px;overflow-x:auto;
  margin-top:38px;padding:10px 0 20px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.grid.jobs::-webkit-scrollbar,.grid.vids::-webkit-scrollbar{display:none}
.grid.jobs > *{flex:0 0 330px}
.grid.vids > *{flex:0 0 320px}
.grid.jobs .empty,.grid.vids .empty{flex:0 0 100%}
/* a drifting rail must not fight scroll-snap, so snapping is the phone's only */
@media(max-width:820px){
  .grid.jobs,.grid.vids{scroll-snap-type:x mandatory;margin:28px -28px 0;
    padding:2px 28px 22px;scroll-padding-left:28px}
  .grid.jobs > *,.grid.vids > *{flex:0 0 78%;scroll-snap-align:start}
}
.rail-drift{cursor:grab}
.rail-drift.is-dragging{cursor:grabbing;user-select:none}
.rail-drift.is-dragging *{pointer-events:none}

/* ---------- compact hero on mobile: same shape as the homepage ---------- */
@media(max-width:900px){
  .hero.compact{text-align:center}
  .hero.compact .split{grid-template-columns:1fr;gap:0}
  .hero.compact .split > div:first-child{display:contents}
  .hero.compact .eyebrow{order:1;margin-bottom:14px}
  .hero.compact h1{order:2;margin:0 auto .35em;max-width:15ch;
    font-size:clamp(2rem,8vw,2.6rem)}
  .hero.compact .lead{order:3;margin:0 auto;font-size:1.02rem}
  .hero.compact .shotwrap{order:4;margin:30px 0 26px;padding:0}
  .hero.compact .freeline{order:5;align-self:center;margin:22px 0 24px;text-align:left}
  .heroperson{order:4;min-height:0;margin:24px 0 0}
  .heroperson img{height:clamp(230px,58vw,290px)}
  .hero.compact .badges{order:5;margin:0 auto;justify-content:center;
    gap:8px;padding:10px 12px}
  .hero.compact .badges img{height:30px}
  .hero.compact .split .shotwrap img{width:152px;height:152px;max-width:none;
    object-fit:contain;padding:6px;background:#000;border-radius:23%;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 14px 34px rgba(0,0,0,.6);filter:none}
  .hero.compact .split .shotwrap::before{width:172px;opacity:.7}
}
@media(max-width:900px){
  /* every badge row, not just the hero's, keeps all three on one line.
     Widths are allowed to shrink so a narrower container cannot force a wrap. */
  .badges{gap:7px;padding:9px 10px;flex-wrap:nowrap;width:100%;
    justify-content:center;box-sizing:border-box}
  .badges a{flex:0 1 auto;min-width:0;display:flex}
  .badges img{height:auto;width:100%;max-height:30px;object-fit:contain}
  .closing-card{padding:26px 22px 28px}
}
@media(max-width:380px){
  .badges img{max-height:26px}
  .badges{gap:5px;padding:8px 9px}
}

/* legal pages */
.legal h2{font-size:clamp(1.2rem,2vw,1.5rem);margin:2.4em 0 .7em;letter-spacing:-.02em}
.legal h2:first-of-type{margin-top:0}
.legal .wrap{max-width:860px}
.legal p{font-size:1rem;line-height:1.75;color:#3d3d3d}
.legal .tablewrap{overflow-x:auto;margin:2em 0;border:1px solid var(--hair);
  border-radius:var(--r-sm)}
.legal table{border-collapse:collapse;width:100%;min-width:600px;font-size:.92rem}
.legal th{background:var(--wash);font-family:Montserrat,sans-serif;font-weight:700;
  text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.legal th,.legal td{padding:12px 16px;border-bottom:1px solid var(--hair);
  vertical-align:top;line-height:1.5}
.legal tr:last-child td{border-bottom:0}

.facts{display:grid;grid-template-columns:minmax(190px,auto) 1fr;
  gap:0;margin:1.4em 0 0;border-top:1px solid var(--hair)}
.facts dt{font-family:Montserrat,sans-serif;font-weight:700;font-size:.84rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--g4);
  padding:14px 20px 14px 0;border-bottom:1px solid var(--hair)}
.facts dd{margin:0;padding:14px 0;border-bottom:1px solid var(--hair);
  font-size:1rem;color:#2a2a2a}
.facts a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(232,8,8,.3)}
.facts a:hover{border-color:var(--red)}
@media(max-width:620px){
  .facts{grid-template-columns:1fr;border-top:0}
  .facts dt{padding:16px 0 2px;border-bottom:0}
  .facts dd{padding:0 0 16px}
}

/* footer */
footer{background:var(--black);color:var(--g3);padding:72px 0 48px;font-size:.93rem}
footer .logo img{height:30px}
footer a{color:#fff;text-decoration:none}
.fnav a{border-bottom:1px solid #333}
.fnav a:hover{border-color:#fff}
.fgrid{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between}
.fnav{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}

@media(max-width:620px){
  .fgrid{flex-direction:column;gap:26px;align-items:center;text-align:center}
  .fgrid > div:first-child{width:100%}
  .fgrid > div:first-child .logo{display:flex;justify-content:center}
  .fgrid > div:first-child p{max-width:none;margin-left:auto;margin-right:auto}
  .fnav{flex-direction:column;width:100%;gap:0}
  .fnav a{width:100%;padding:15px 2px;border:0;border-bottom:1px solid #232323;
    font-weight:600;display:flex;align-items:center;justify-content:space-between}
  .fnav a:first-child{border-top:1px solid #232323}
  .fnav a::after{content:"›";color:#6a6a6a;font-size:1.25rem;line-height:1}
  .fnav a:hover{border-color:#232323;color:var(--g1)}
}


/* ---------- partner area: login, registration ---------- */
.authgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start}
@media(max-width:860px){.authgrid{grid-template-columns:1fr}}
.authcard{background:var(--paper);color:#141414;border:1px solid var(--hair);
  border-radius:var(--r);padding:clamp(28px,3.6vw,46px);display:flex;flex-direction:column}
.authcard--wide{max-width:none}
.authcard h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:0 0 20px}
.authcard h3{font-size:1.1rem;margin:0 0 8px}
.authnote{font-size:.9rem;color:#5f5f5f;line-height:1.55;margin:0 0 22px}
/* Registration asks for a consent tick and explains the password rule. Both are
   new with the rebuilt form; everything else on that page already had a class. */
.checkfield{display:flex;align-items:flex-start;gap:10px;margin:0 0 22px;
  font-size:.9rem;color:#5f5f5f;line-height:1.5;cursor:pointer}
.checkfield input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--red)}
.checkfield a{color:var(--red);font-weight:600}
.fieldhint{display:block;margin:6px 0 0;font-size:.82rem;color:#767676}
/* Sign in with Google sits under the submit button on both auth pages. The rule
   is a plain white button with a hairline border, per Google's branding terms —
   not the site's red, which would read as our own primary action. */
.authsep{display:flex;align-items:center;gap:12px;margin:22px 0;
  font-size:.82rem;color:#8a8a8a;text-transform:uppercase;letter-spacing:.08em}
.authsep::before,.authsep::after{content:"";flex:1;height:1px;background:#e3e3e3}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:4px;
  padding:12px 18px;font-weight:600;text-decoration:none}
.btn-google:hover{background:#f7f8f8;border-color:#d2d5d9}
.btn-google svg{flex:0 0 auto}
.authnote a{color:var(--red);font-weight:600}
.authside{background:var(--dark);color:var(--g1);border-radius:var(--r);
  padding:clamp(28px,3.6vw,46px)}
.authside h3{color:#fff}
.authside p{color:var(--g2);font-size:.96rem;line-height:1.6;margin:0 0 22px}
.on-light .authside .btn-line{border-color:rgba(255,255,255,.42);color:#fff}
.on-light .authside .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.authsplit{height:1px;background:var(--hair-d);margin:34px 0 30px}

.field{display:block;margin:0 0 18px}
.field > span{display:block;font-family:Montserrat,Helvetica,Arial,sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:-.01em;margin-bottom:7px;color:#2a2a2a}
.field input{width:100%;font:inherit;font-size:1rem;color:#141414;background:#fff;
  border:1.5px solid #d8d8d8;border-radius:14px;padding:13px 15px;
  transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:0;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(232,8,8,.14)}
.field input:user-invalid{border-color:#d98a8a}
.field small{display:block;font-size:.78rem;color:#6e6e6e;margin-top:6px}
.authside .field > span{color:#fff}
.fieldrow{display:grid;grid-template-columns:150px 1fr;gap:14px}
@media(max-width:520px){.fieldrow{grid-template-columns:1fr}}

.check{display:flex;gap:11px;align-items:flex-start;margin:0 0 14px;
  font-size:.92rem;line-height:1.5;color:#3a3a3a}
.check input{width:19px;height:19px;flex:0 0 19px;margin-top:1px;accent-color:var(--red)}
.check a{color:var(--red);font-weight:600}

.formerr,.formok{font-size:.9rem;line-height:1.5;border-radius:14px;
  padding:12px 15px;margin:0 0 18px}
.formerr{background:#fdeaea;border:1px solid #f0b8b8;color:#8f1414}
.formok{background:#e9f7ee;border:1px solid #b4dfc3;color:#14622f}
.btn.is-busy{opacity:.6;pointer-events:none}
fieldset{border:0;padding:0;margin:0;min-width:0}

/* three steps, one page - the dots say where you are and what is left */
.regsteps{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 26px}
.regdot{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  border:1px solid var(--hair);border-radius:999px;padding:9px 14px;
  font-size:.86rem;color:#8a8a8a;background:var(--paper)}
.regdot b{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;
  border-radius:50%;background:#ececec;color:#6e6e6e;font-size:.8rem;
  font-family:Montserrat,Helvetica,Arial,sans-serif}
.regdot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.regdot.is-on{border-color:var(--red);color:#141414;font-weight:600}
.regdot.is-on b{background:var(--red);color:#fff}
.regdot.is-done b{background:#141414;color:#fff}
@media(max-width:620px){
  .regsteps{gap:6px}
  .regdot{padding:8px 10px;font-size:.75rem}
  .regdot span{display:none}
  .regdot.is-on span{display:block}
}
.regnav{display:flex;gap:12px;margin-top:8px}
.regnav .btn{flex:1}
@media(min-width:620px){.regnav .btn{flex:0 0 auto;min-width:150px}}


/* ---------- partner dashboard ---------- */
body.app{background:var(--wash)}
.appbar{background:var(--paper);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:30}
.appbar .bar{gap:18px}
.who-mini{margin-left:auto;text-align:right;line-height:1.25;min-width:0}
.who-mini b{display:block;font-family:Montserrat,Helvetica,Arial,sans-serif;font-size:.92rem;
  color:#141414;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-mini span{font-size:.78rem;color:#6e6e6e}
@media(max-width:560px){.who-mini{display:none}}
.appmain{padding:clamp(26px,4vw,48px) 0 clamp(50px,7vw,90px)}
.apphead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:26px}
.apphead h1{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0}
.apploading{color:#6e6e6e}
.btn:disabled{opacity:.45;pointer-events:none}

.planbar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;background:var(--dark);color:var(--g1);border-radius:var(--r-sm);
  padding:18px 22px;margin-bottom:22px}
.planname{display:block;font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:800;
  color:#fff;font-size:1.02rem}
.planmeta{font-size:.86rem;color:var(--g3)}
.planbar .btn-line{border-color:rgba(255,255,255,.4);color:#fff;padding:10px 18px}
.planbar .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.joblist{display:grid;gap:16px}
.jobcard{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-sm);
  overflow:hidden}
.jobtop{display:flex;align-items:flex-start;gap:16px;padding:22px 24px 18px}
.jobtop h3{margin:0 0 6px;font-size:1.12rem;color:#141414}
.jobmeta{margin:0;font-size:.86rem;color:#6e6e6e}
.jobdel{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--hair);background:transparent;color:#8a8a8a;font-size:1.1rem;
  line-height:1;cursor:pointer;transition:color .15s,border-color .15s}
.jobdel:hover{color:var(--red);border-color:var(--red)}
.apptoggle{display:flex;align-items:center;gap:8px;width:100%;border:0;cursor:pointer;
  background:var(--wash);border-top:1px solid var(--hair);padding:13px 24px;
  font:inherit;font-size:.92rem;color:#141414;text-align:left}
.apptoggle b{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:800}
.apptoggle i{margin-left:auto;font-style:normal;color:#8a8a8a;transition:transform .18s}
.apptoggle.is-open i{transform:rotate(180deg)}
.applicants{padding:6px 24px 20px;display:grid;gap:10px}

.appcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--hair);border-radius:14px;padding:14px 18px;background:var(--paper)}
.appwho b{display:block;font-family:Montserrat,Helvetica,Arial,sans-serif;color:#141414}
.appwho span{font-size:.85rem;color:#6e6e6e}
.appcontact{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.appcontact a{font-size:.88rem;color:var(--red);font-weight:600;text-decoration:none}
.appcontact a:hover{text-decoration:underline}
@media(max-width:560px){.appcontact{margin-left:0;width:100%}}

.lockcard{border:1px dashed #cfcfcf;border-radius:14px;padding:22px;text-align:center;
  background:var(--wash)}
.lockcard b{display:block;font-family:Montserrat,Helvetica,Arial,sans-serif;font-size:1.02rem;
  color:#141414;margin-bottom:6px}
.lockcard p{margin:0 0 16px;font-size:.9rem;color:#5f5f5f}
.lockcard--quiet{border-style:solid;border-color:var(--hair)}
.lockcard--quiet p{margin-bottom:0}
.jobform{margin-top:22px}
.fieldrow--even{grid-template-columns:1fr 1fr}


/* ---------- auth pages: one screen, no scrolling for the form ---------- */
.authpage{min-height:100dvh;display:flex;flex-direction:column;
  background:var(--dark);color:var(--g1)}
.authmain{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(14px,2.4vw,30px) 0}
/* .wrap carries margin:0 auto, which centres a block - but as a flex item an
   auto cross-axis margin cancels stretch, so the wrap sized itself to its
   content instead of the viewport. That is why the cards looked shrunk on a
   phone, and why they visibly narrowed when the forgotten-password card
   replaced the wider register panel. */
.authmain > .wrap{width:100%}
.authtitle{font-size:clamp(1.7rem,3.4vw,2.5rem);color:#fff;margin:6px 0 clamp(18px,2.4vw,28px)}
.authmain .eyebrow{margin-bottom:0}
/* Both panels are light on a dark page. A near-black panel beside a pure white
   card read as a hole rather than as its sibling; the soft grey keeps the
   hierarchy - white is the thing to do, grey is the alternative - without one
   half of the screen going dark. */
.authpage .authside{background:var(--wash);border:1px solid var(--hair);
  color:#3a3a3a;align-self:start}
.authpage .authside h3{color:#141414}
.authpage .authside p{color:#5f5f5f}
.authpage .authside .btn-line{border-color:#c9c9c9;color:#141414}
.authpage .authside .btn-line:hover{border-color:#141414;background:rgba(0,0,0,.05)}
.authpage .regdot{background:var(--dark-2);border-color:var(--hair-d);color:var(--g3)}
.authpage .regdot b{background:#2c2c2c;color:var(--g2)}
.authpage .regdot.is-on{border-color:var(--red);color:#fff}
.authpage .regdot.is-on b{background:var(--red);color:#fff}
.authpage .regdot.is-done b{background:#fff;color:#141414}
/* The footer was hidden below 860px width regardless of height - wrong, a
   phone in portrait is narrow AND tall, so it was disappearing with room to
   spare. Width only controls layout here; the height-based rules below are
   the ones that actually decide whether the footer fits. */
@media(max-width:860px){
  .authmain{justify-content:flex-start}
}

.linkish{border:0;background:none;padding:0;font:inherit;color:var(--red);font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.authpage .authside{align-self:start}

/* A short window - a laptop at 720, or a phone with the browser chrome showing
   - gets the padding taken out so the form itself still fits without a
   scrollbar. On a phone that no longer means dropping the footer: the form is
   the thing that has to be above the fold, and it already is, because it
   comes before the footer in the page - scrolling past it to reach the
   footer is fine. The one-screen fit is a desktop expectation now. */
@media(max-height:850px){
  .authtitle{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:2px 0 14px}
  .authmain{padding:10px 0}
  .authpage .authcard,.authpage .authside{padding:22px 24px}
  .authpage .authcard h2{font-size:1.2rem;margin-bottom:15px}
  .authpage .authnote{margin-bottom:14px;font-size:.85rem}
  .authpage .field{margin-bottom:13px}
  .authpage .field input{padding:11px 14px}
  .authpage .regsteps{margin-bottom:16px}
}
@media(max-height:700px){
  .authpage .authcard h2,.authpage .authside h3{font-size:1.08rem}
  .authpage .field small{display:none}
  .authpage .authnote{margin-bottom:10px}
}

/* a small phone with the browser chrome showing: the register panel keeps its
   heading and its button, and drops the sentence between them */
@media(max-width:860px) and (max-height:790px){
  .authpage .authside{padding:16px 20px}
  .authpage .authside p{display:none}
  .authpage .authside h3{margin-bottom:12px;font-size:1rem}
  .authgrid{gap:14px}
}
.authnote--foot{margin:14px 0 0;font-size:.86rem}
.authnote--after{margin:22px 0 0}
.authcard .btn-line{border-color:#c9c9c9;color:#141414}
.authcard .btn-line:hover{border-color:#141414;background:rgba(0,0,0,.05)}
/* asking for a new password and being offered registration at the same time
   is two answers to one question - the register panel steps aside */
.authgrid.is-forgot .authside{display:none}

/* A legal page that is not the binding text says so before the text starts.
   Loud enough to be read, not so loud it looks like an error. */
.legalnote{margin:0 0 34px;padding:20px 24px;border-radius:var(--r-sm);
  background:#fff6ec;border:1px solid #f6c98a}
.legalnote b{display:block;font-family:Montserrat,Helvetica,Arial,sans-serif;
  font-weight:800;font-size:1rem;color:#7c3a06;margin-bottom:6px}
.legalnote p{margin:0 0 12px;font-size:.95rem;line-height:1.55;color:#7c3a06}
.legalnote a{display:inline-flex;align-items:center;font-weight:700;
  font-size:.92rem;color:#7c3a06;text-underline-offset:3px}
.legalnote a:hover{color:var(--black)}