:root{
  --ink:#101114;
  --card:#17181C;
  --white:#FFFFFF;
  --accent:#FF6A3D;
  --paper:#FFFFFF;
  --mist:#F2F3F5;
  --line:#E4E6EA;
  --line-dark:rgba(255,255,255,.13);
  --muted:#5C6169;
  --dim-dark:rgba(255,255,255,.62);
  --r-card:40px;
  --r-cell:20px;
  --maxw:1280px;
  --font:"Golos Text","Onest",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Onest","Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --t-xs:13px;
  --t-sm:15px;
  --t-md:16px;
  --t-lg:18px;
  --t-xl:21px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-md);line-height:1.62;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-0.035em;line-height:1.04;text-wrap:balance}
h1{letter-spacing:-0.045em}
p{text-wrap:pretty}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}

/* shell */
/* the frame around the hero matches the first section, so the seam does not show */
.shell{padding:12px 12px 0;background:var(--mist)}
.card-top{background:var(--card);color:var(--white);border-radius:var(--r-card);padding:16px 52px 18px;position:relative;overflow:hidden}

/* sticky glass bar: hidden until you scroll, then light + blurred */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .25s ease}
.topbar.is-stuck{transform:none;opacity:1;pointer-events:auto}
.topbar__in{
  height:64px;padding:0 40px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  border-bottom:1px solid rgba(16,17,20,.08);
}
.topbar__in .hd{height:100%;max-width:var(--maxw);margin:0 auto;padding-bottom:0}
.topbar .brand{color:var(--ink)}
.topbar .hd__nav a{color:var(--muted)}
.topbar .hd__nav a:hover{color:var(--ink)}
.topbar .hd__nav .pill-btn{background:rgba(16,17,20,.04);border-color:rgba(16,17,20,.18);color:var(--ink)}
.topbar .hd__nav .pill-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.topbar .burger{border-color:var(--line)}
.topbar .burger i{background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}

/* header */
.hd{display:flex;align-items:center;gap:40px;padding-bottom:16px}
.brand{display:flex;align-items:center;font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-0.07em}
.brand span{color:var(--accent)}
/* wordmark: white on the dark header, near-black on light surfaces */
.brand__img{display:block;height:30px;width:auto}
.brand__img--dark{display:none}
.topbar .brand__img--light,.brand--dark .brand__img--light{display:none}
.topbar .brand__img--dark,.brand--dark .brand__img--dark{display:block}
.hd__nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:var(--t-sm);padding-right:16px}
.hd__nav a{display:flex;align-items:center;gap:10px;padding:6px 0;color:rgba(255,255,255,.86);transition:color .18s}
.hd__nav a:hover{color:var(--white)}

.hd__grid-ico{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hd__grid-ico i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}
/* header CTA: outlined pill on glass, fills in on hover, arrow slides out */
.pill-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 20px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.06);
  font-family:var(--display);font-size:var(--t-sm);font-weight:600;color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.pill-btn::after{
  content:"";width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M6 18 18 6M9 6h9v9'/></svg>") center/13px no-repeat,linear-gradient(#000,#000);
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M6 18 18 6M9 6h9v9'/></svg>") center/13px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background .22s ease;
}
.pill-btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.pill-btn:hover::after{transform:translate(2px,-2px)}
/* beats `.hd__nav a:hover`, which would otherwise keep the label white on white */
.hd__nav .pill-btn{color:#fff}
.hd__nav .pill-btn:hover{color:var(--ink)}
.phead__nav .pill-btn--dark:hover{color:#fff}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:none;cursor:pointer}
.burger i{display:block;width:18px;height:1.5px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}

/* hero grid — kontur.ru grouping: title top-left, two-column block, tall right column */
.hero__title{padding:0 0 18px}
.hero__title h1{font-size:clamp(28px,3.3vw,46px);max-width:22ch;line-height:1.06}
.grid{display:grid;grid-template-columns:1fr 1fr .82fr;grid-template-rows:auto minmax(152px,auto) minmax(152px,auto);position:relative;transform:translateZ(0);margin-top:6px}
.gitem{position:relative}
.gitem--title{grid-column:1 / 3;grid-row:1;display:flex;align-items:flex-end}
.g-scout  {grid-column:3;grid-row:1 / 3}
.g-road   {grid-column:1;grid-row:2}
.g-scoring{grid-column:2;grid-row:2}
.g-face   {grid-column:1;grid-row:3}
.g-calls  {grid-column:2;grid-row:3}
.g-content{grid-column:3;grid-row:3}
/* dividers live on the static wrappers, so they never move when a card scales */
.gitem::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#333}
.gitem::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#333}
.gitem--title::before,.gitem--title::after,.g-road::before,.g-face::before,.g-scout::after{content:none}

.cell{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  height:calc(100% - 16px);margin:8px;padding:16px 18px;border-radius:14px;color:#fff;font-weight:700;
  transform:translateZ(0);transition:transform .3s ease-out,background .5s ease-in-out;cursor:pointer;
}
.cell:hover,.cell:focus-visible{transform:translateZ(0) scale(1.008);background:var(--c,var(--accent));transition:transform .3s ease-out}
.cell:focus-visible .tag,.cell:focus-visible .cell__chev{opacity:1}
.cell:focus-visible .cell__doodle{opacity:1}
.cell:focus-visible .cell__doodle > *{stroke-dashoffset:0}
.cell:focus-visible{outline:2px solid var(--c,var(--accent));outline-offset:2px}

.cell__name{font-family:var(--display);font-size:clamp(19px,1.55vw,23px);font-weight:700;line-height:1.21;letter-spacing:-0.035em;max-width:210px;color:#fff;position:relative;z-index:1}
.cell__tags{margin-top:auto;padding-top:8px;padding-right:30px;display:flex;flex-wrap:wrap;gap:4px;position:relative;z-index:1}
.tag{
  height:24px;line-height:24px;padding:0 8px;border-radius:7px;background:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.24);color:#fff;font-size:var(--t-xs);font-weight:500;white-space:nowrap;
  opacity:0;transition:opacity .15s ease-in-out;
}
.cell:hover .tag{opacity:1}
.cell__chev{position:absolute;right:16px;bottom:14px;width:24px;height:24px;opacity:0;transition:opacity .15s ease-in-out;z-index:1}
.cell__chev svg{width:24px;height:24px;stroke:#fff;stroke-width:2;fill:none}
.cell:hover .cell__chev{opacity:.5}

/* line art: draws itself in, white inside the card and card-coloured outside */
.cell:hover{z-index:3}
.gitem:has(.cell:hover){z-index:3}
.cell__doodle{position:absolute;right:-58px;top:-54px;width:232px;height:232px;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;overflow:visible}
.cell:hover .cell__doodle{opacity:1}
.cell__doodle path,.cell__doodle rect,.cell__doodle circle,.cell__doodle ellipse{
  fill:none;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.4,.05,.2,1);
}
.cell:hover .cell__doodle > *{stroke-dashoffset:0}
.cell__doodle > *:nth-child(2){transition-delay:.14s}
.cell__doodle > *:nth-child(3){transition-delay:.26s}
.cell__doodle--out{display:block}
.cell__doodle--out > *{stroke:var(--c,var(--accent))}
.cell__doodle--in > *{stroke:#fff}
.cell__clip{position:absolute;inset:0;overflow:hidden;border-radius:14px;pointer-events:none;z-index:0}

/* rail */
.rail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:14px}
.rail a{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:10px;font-size:var(--t-sm);font-weight:500;transition:background .18s}
.rail a:hover{background:rgba(255,255,255,.08)}
.ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--c,var(--accent));flex:none}
.ico svg{width:15px;height:15px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rail__url{font-size:var(--t-xs);color:rgba(255,255,255,.45)}
.rail__soon{font-size:var(--t-xs);color:rgba(255,255,255,.45);border:1px dashed rgba(255,255,255,.22);border-radius:9px;padding:6px 11px}

/* sections */
.sec{padding:104px 0}
.sec--mist{background:var(--mist)}
.sec__h{font-size:clamp(30px,3.8vw,46px);margin-bottom:14px}
.sec__lead{font-size:var(--t-lg);color:var(--muted);max-width:64ch;margin-bottom:40px}

/* flagship */
.flag{display:grid;grid-template-columns:1.02fr .98fr;gap:20px;align-items:start}
.flag__main{background:var(--card);color:var(--white);border-radius:var(--r-card);padding:48px}
.flag__badge{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--dim-dark)}
.flag__badge b{color:var(--accent);font-weight:500}
.flag__main h2{margin-top:20px;font-size:clamp(30px,3.4vw,44px)}
.flag__main p{margin-top:18px;font-size:18px;color:var(--dim-dark);max-width:44ch}
.flag__link{margin-top:30px;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:600;transition:filter .18s}
.flag__link:hover{filter:brightness(1.07)}
.flag__link svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.flag__feats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feat{border:1px solid var(--line);border-radius:22px;padding:24px;transition:border-color .2s}
.feat:hover{border-color:var(--ink)}
.feat svg{width:26px;height:26px;stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin-top:16px;font-size:18px;font-weight:600;letter-spacing:-0.02em}
.feat p{margin-top:8px;font-size:15px;color:var(--muted)}

/* services */
/* what we do: rows on lines, fill and draw on hover */
.rows{margin-top:36px;border-top:2px solid rgba(16,17,20,.14)}
.row{position:relative;border-bottom:2px solid rgba(16,17,20,.14);overflow:hidden;transition:background .35s ease}
.row:hover{background:var(--c)}
.row__sum{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;align-items:center;gap:28px;
  padding:26px 20px;cursor:pointer;list-style:none;transition:color .25s ease;
}
.row__sum::-webkit-details-marker{display:none}
.row__t{font-family:var(--display);font-size:clamp(21px,2vw,28px);font-weight:600;letter-spacing:-0.035em;line-height:1.1}
.row__m{font-size:var(--t-sm);color:var(--muted);white-space:nowrap;transition:color .25s ease}
.row__x{position:relative;width:28px;height:28px}
.row__x::before,.row__x::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.row__x::after{transform:rotate(90deg)}
.row[open] .row__x::after{transform:rotate(180deg)}
.row:hover .row__t,.row:hover .row__m{color:#fff}
.row__d{position:relative;z-index:1;padding:0 20px 28px;max-width:74ch;font-size:var(--t-md);color:var(--muted);transition:color .25s ease}
.row:hover .row__d{color:rgba(255,255,255,.88)}
/* FAQ reuses the rows, but stays quiet: no colour fill, no line art */
.rows--faq .row:hover{background:rgba(16,17,20,.03)}
.rows--faq .row__sum{grid-template-columns:minmax(0,1fr) 28px;padding:22px 20px}
.rows--faq .row__t{font-size:clamp(18px,1.5vw,22px)}
.rows--faq .row:hover .row__t{color:var(--ink)}
.rows--faq .row:hover .row__d{color:var(--muted)}
.row__art{
  position:absolute;left:52%;top:6px;width:98px;height:76px;
  opacity:0;transition:opacity .2s ease-in-out;pointer-events:none;
}
.row__art *{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.4,.05,.2,1)}
.row:hover .row__art{opacity:1}
.row:hover .row__art > *{stroke-dashoffset:0}
.row__art > *:nth-child(2){transition-delay:.12s}
.row__art > *:nth-child(3){transition-delay:.24s}
@media (max-width:860px){
  .row__sum{grid-template-columns:minmax(0,1fr) 28px;gap:16px;padding:22px 12px}
  .row__m{grid-column:1;grid-row:2;white-space:normal}
  .row__d{padding:0 12px 24px}
  .row__art{display:none}
}

/* process: a real sequence, so it is numbered */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border-top:2px solid var(--ink);padding-top:20px}
.step__n{font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.step__t{margin-top:10px;font-family:var(--display);font-size:var(--t-xl);font-weight:600;letter-spacing:-0.03em}
.step__d{margin-top:10px;font-size:var(--t-sm);color:var(--muted);line-height:1.6}
.step__time{margin-top:12px;font-size:var(--t-xs);color:#8E939B;font-variant-numeric:tabular-nums}

/* stack */
.stack{display:flex;flex-wrap:wrap;gap:10px}
.stack span{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:var(--t-sm);color:var(--muted)}

/* cta */
.cta{background:var(--card);color:var(--white);border-radius:var(--r-card);padding:64px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cta h2{font-size:clamp(28px,3.2vw,40px)}
.cta p{margin-top:16px;font-size:var(--t-lg);color:var(--dim-dark);max-width:46ch}
.form{display:grid;gap:14px}
.form label{font-size:var(--t-xs);color:var(--dim-dark);letter-spacing:.01em}
.form input{width:100%;height:56px;padding:0 20px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-family:var(--font);font-size:16px}
.form input::placeholder{color:rgba(255,255,255,.45)}
.form input:focus{outline:none;border-color:var(--accent)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__row > div,.form__one{display:grid;gap:6px}
.form input.is-bad{border-color:#FF9B84}
.submit{height:56px;border:0;border-radius:16px;background:var(--accent);color:var(--ink);font-family:var(--display);font-size:var(--t-md);font-weight:600;cursor:pointer;transition:filter .18s}
.submit:hover{filter:brightness(1.07)}
.form__note{font-size:var(--t-xs);color:rgba(255,255,255,.45)}
.form__ok{display:none;font-size:16px;color:#8BE0A8}
.form.is-sent .form__ok{display:block}
.form__err{display:none;font-size:16px;color:#FF9B84}
.form.is-failed .form__err{display:block}
.submit[disabled]{opacity:.65;cursor:default}

/* footer */
.ft{padding:96px 0 44px;border-top:1px solid var(--line);margin-top:104px}
.ft__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.ft h4{font-family:var(--display);font-size:var(--t-sm);font-weight:600;letter-spacing:-0.01em;margin-bottom:14px}
.ft li{margin-bottom:10px}
.ft li a{font-size:var(--t-sm);color:var(--muted);transition:color .16s}
.ft li a:hover{color:var(--ink)}
.ft__end{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:var(--t-xs);color:#8E939B}
.ft__soc{display:flex;gap:20px}
.ft__soc a:hover{color:var(--ink)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.is-in{opacity:1;transform:none}

@media (max-width:960px){
  .grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto}
  .gitem--title{grid-column:1 / 3;grid-row:1}
  .g-scout{grid-column:1 / 3;grid-row:2}
  .g-road{grid-column:1;grid-row:3}.g-scoring{grid-column:2;grid-row:3}
  .g-face{grid-column:1;grid-row:4}.g-calls{grid-column:2;grid-row:4}
  .g-content{grid-column:1 / 3;grid-row:5}
  .g-scout::after{content:""}
  .g-scout::before,.g-content::before{content:none}
}
@media (max-width:1080px){
  .wrap{padding:0 24px}
  .card-top{padding:22px 24px 26px;border-radius:32px}
  .grid{grid-template-columns:1fr 1fr}
  .grid__title{grid-column:1 / -1;padding-right:0}
  .flag{grid-template-columns:1fr}
  .flag__main{padding:38px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1fr;gap:36px;padding:44px}
  .ft__cols{grid-template-columns:repeat(3,1fr);gap:32px}
}
@media (max-width:720px){
  body{font-size:16px}
  .shell{padding:8px 8px 0}
  .card-top{border-radius:26px;padding:18px 18px 24px}
  .hd{padding-bottom:36px;gap:16px;flex-wrap:wrap}
  .hd__nav{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:16px;padding-right:0;border-top:1px solid var(--line-dark)}
  .hd.is-open .hd__nav{display:flex}
  .hd__nav a{min-height:52px;padding:14px 0;border-bottom:1px solid var(--line-dark)}
  .hd__nav .pill-btn{margin-top:16px;height:52px;border-bottom:0}
  .burger{display:flex;margin-left:auto}
  /* sticky bar grows with the open menu instead of letting it hang over the page */
  .topbar__in{height:auto;padding:0 16px;background:rgba(255,255,255,.92)}
  .topbar__in .hd{height:auto;padding:8px 0 10px;gap:12px}
  .topbar__in .hd.is-open{padding-bottom:16px}
  .topbar__in .hd__nav{margin-top:10px}
  .topbar .hd.is-open .burger::after{background:var(--ink)}
  .topbar .hd__nav a{border-bottom-color:var(--line)}
  .topbar .hd__nav{border-top-color:var(--line)}
  .hd.is-open .burger{position:relative}
  .hd.is-open .burger i{box-shadow:none;transform:rotate(45deg)}
  .hd.is-open .burger::after{content:"";position:absolute;width:18px;height:1.5px;background:#fff;transform:rotate(-45deg)}
  .grid__title h1 br{display:none}
  .grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto}
  .gitem--title,.g-scout,.g-road,.g-scoring,.g-face,.g-calls,.g-content{grid-column:1;grid-row:auto}
  .gitem::before,.gitem::after{content:none}
  /* no hover on touch: cards show their colour and tags right away */
  .cell{border-left:0;margin:6px 0;height:auto;min-height:0;padding:18px;border-radius:16px;background:var(--c,var(--accent))}
  .cell:hover,.cell:focus-visible{transform:none;background:var(--c,var(--accent))}
  .cell__name{max-width:none;font-size:21px}
  .cell__tags{opacity:1;transform:none;padding-top:12px;padding-right:34px}
  .tag{opacity:1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.32)}
  .cell__chev{opacity:.6;right:14px;bottom:12px}
  .cell__doodle{display:none}
  .rail{gap:8px 14px;padding-top:22px}
  .rail a{padding:8px 10px 8px 6px}
  .sec{padding:64px 0}
  .sec__lead{margin-bottom:28px}
  .flag__main{padding:28px 24px;border-radius:26px}
  .flag__feats,.steps{grid-template-columns:1fr}
  .cta{padding:32px 24px;border-radius:26px}
  .form__row{grid-template-columns:1fr}
  .ft{padding-top:64px;margin-top:64px}
  .ft__cols{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation:none!important}
  .rv{opacity:1;transform:none}
}

/* teaser: products live on their own page now */
.teaser{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch}
.teaser__main,.teaser__all{display:flex;flex-direction:column;border-radius:var(--r-card);padding:44px;transition:filter .2s,border-color .2s,transform .2s}
.teaser__main{background:var(--card);color:var(--white)}
.teaser__main:hover{filter:brightness(1.12)}
.teaser__all{background:var(--mist);border:1px solid transparent}
.teaser__all:hover{background:var(--white);border-color:var(--line);transform:translateY(-2px)}
.teaser__t{margin-top:20px;font-size:clamp(24px,2.5vw,34px);font-weight:700;letter-spacing:-0.035em;line-height:1.05}
.teaser__main .teaser__t{margin-top:18px}
.teaser__d{margin-top:16px;font-size:17px;max-width:46ch}
.teaser__main .teaser__d{color:var(--dim-dark)}
.teaser__all .teaser__d{color:var(--muted)}
.teaser__go{margin-top:auto;padding-top:32px;display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500}
.teaser__main .teaser__go{color:var(--accent)}
.teaser__go svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .18s}
.teaser__main:hover .teaser__go svg{transform:translateX(4px)}
.teaser__all:hover .teaser__go svg{transform:translate(3px,-3px)}

/* products page */
.page-hd{padding-bottom:8px}
.page-title{padding:26px 0 44px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end}
.page-title h1{font-size:clamp(40px,6vw,84px)}
.page-lead{font-size:19px;color:var(--dim-dark);max-width:52ch;padding-bottom:8px}
.crumbs{display:flex;gap:10px;align-items:center;font-size:var(--t-xs);color:rgba(255,255,255,.5);letter-spacing:.01em}
.crumbs a:hover{color:#fff}
.status{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.status__i{border:1px solid var(--line);border-radius:24px;padding:28px}
.status__k{font-size:13px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.status__t{margin-top:14px;font-size:21px;font-weight:600;letter-spacing:-0.03em}
.status__d{margin-top:10px;font-size:15.5px;color:var(--muted)}
.status__tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.status__tags span{font-size:13.5px;padding:7px 11px;border-radius:8px;background:var(--mist);color:var(--muted)}
@media (max-width:1080px){
  .page-title{grid-template-columns:1fr;gap:24px;align-items:start}
  .teaser{grid-template-columns:1fr}
  .teaser__main,.teaser__all{padding:34px}
  .status{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .teaser__main,.teaser__all{padding:26px 24px;border-radius:26px}
  .teaser__go{padding-top:24px}
  .page-title{padding:18px 0 30px;grid-template-columns:1fr;gap:22px}
  .status{grid-template-columns:1fr}
}

/* hero grid: everything except the shipped product is still in progress */

/* demand cells: not locked, collecting votes */
.badge{order:-1;align-self:flex-end;margin-bottom:0;position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs);letter-spacing:.01em;color:rgba(255,255,255,.4);border:0;padding:0;transition:color .22s}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--accent))}
.badge--live{color:var(--accent);border-color:rgba(255,106,61,.45)}
.cell.is-on .badge{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.3)}
.want{
  order:-1;align-self:flex-end;display:inline-flex;align-items:center;gap:8px;
  min-height:32px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-dark);background:none;color:rgba(255,255,255,.72);
  font-family:var(--font);font-size:13.5px;font-weight:500;
  transition:background .18s,color .18s,border-color .18s;
}
.want svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .18s}
.want:hover{border-color:rgba(255,255,255,.5);color:#fff}
.cell.is-on .want{border-color:rgba(255,255,255,.4);color:#fff}
.cell.is-on .want:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.cell.is-picked .want{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.cell.is-picked .want svg{transform:rotate(45deg)}
.cell.is-picked.is-on .want{background:var(--ink);color:#fff;border-color:var(--ink)}

/* what was marked travels into the request */
.picks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0}
.picks__t{font-size:14px;color:var(--dim-dark)}
.picks__list{display:flex;flex-wrap:wrap;gap:7px}
.picks__i{font-size:13.5px;padding:6px 11px;border-radius:999px;background:rgba(255,106,61,.16);color:var(--accent)}

@media (max-width:720px){
  .badge{align-self:flex-start;margin-bottom:12px}
  .want{opacity:1;transform:none}
  .cell.is-on .want{border-color:rgba(16,17,20,.3)}
}

/* tiles: icon, shipped product tile, denser hero */
.cell__ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07);margin-top:-26px}
.cell__ico svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.cell__tags--open{opacity:1;transform:none}
.cell__link{margin-top:10px;position:relative;z-index:1;opacity:0;transform:translateY(6px);transition:opacity .22s ease .04s,transform .28s cubic-bezier(.2,.7,.3,1) .04s;display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600;letter-spacing:0}
.cell__link svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .18s}
.cell:hover .cell__link svg{transform:translateX(4px)}
.cell.cell--all{background:var(--white);color:var(--ink);border-color:transparent}
.cell--all:hover{transform:translateY(-2px)}
.card-top{padding-bottom:16px}
.hd{padding-bottom:22px}
.rail{padding-top:14px}
@media (max-width:720px){
  .cell__ico{margin-top:0}
  .cell__name{margin-top:10px}
}

/* shipped-but-not-flagship tiles */
.cell--ship:not(.is-on) .cell__ico{background:color-mix(in srgb,var(--c) 18%,transparent)}
.cell--ship:not(.is-on) .cell__ico svg{stroke:var(--c);opacity:1}
.cell--ship:not(.is-on) .badge--live{color:rgba(255,255,255,.45)}
/* two more shipped products on the products page */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo__i{border:1px solid var(--line);border-radius:var(--r-card);padding:38px;display:flex;flex-direction:column}
.duo__badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.duo__badge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent))}
.duo__t{margin-top:16px;font-size:clamp(26px,2.6vw,34px)}
.duo__d{margin-top:14px;font-size:17px;color:var(--muted)}
.duo__list{margin-top:22px;display:grid;gap:12px}
.duo__list li{position:relative;padding-left:26px;font-size:15.5px}
.duo__list li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:2px;border-radius:2px;background:var(--c,var(--accent))}
.duo__tags{margin-top:auto;padding-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.duo__tags span{font-size:13.5px;padding:7px 12px;border-radius:999px;background:var(--mist);color:var(--muted)}
@media (max-width:1080px){.duo{grid-template-columns:1fr}.duo__i{padding:28px}}
.sec--mist .status__i{background:var(--white);border-color:transparent}
.sec--mist .status__tags span{background:var(--mist)}

/* hover fill must beat the resting tint of shipped tiles */

.cell.cell--ship.is-on .cell__ico svg{stroke:var(--ink)}
/* content sits above the line art */
.cell .badge,.cell .want,.cell__ico,.cell__name,.cell__note,.cell__tags,.cell__link{position:relative;z-index:1}

/* three products, Kontur-style colour cards */
.trio{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcolor{
  position:relative;display:flex;flex-direction:column;min-height:320px;padding:26px;
  border-radius:26px;background:var(--c);color:#fff;overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;
}
.pcolor::after{content:"";position:absolute;right:-60px;top:-60px;width:230px;height:230px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pcolor:hover{transform:translateY(-4px);box-shadow:0 26px 46px -26px color-mix(in srgb,var(--c) 80%,transparent)}
.pcolor:hover::after{transform:translate(-16px,16px) scale(1.08)}
.pcolor__chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:15px;font-weight:500}
.pcolor__ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.9)}
.pcolor__ico svg{width:17px;height:17px;stroke:var(--c);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pcolor__t{position:relative;z-index:1;margin-top:auto;padding-top:26px;font-size:clamp(19px,1.45vw,23px);font-weight:700;letter-spacing:-0.03em;line-height:1.18;max-width:20ch}
.pcolor__go{position:relative;z-index:1;margin-top:18px;display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;opacity:.9}
.pcolor__go svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .18s}
.pcolor:hover .pcolor__go svg{transform:translateX(4px)}
.allrow{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 32px;border-radius:28px;background:var(--mist);font-size:19px;font-weight:600;letter-spacing:-0.02em;transition:background .2s}
.allrow:hover{background:#E9EBEF}
.allrow svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.8;fill:none;transition:transform .2s}
.allrow:hover svg{transform:translate(3px,-3px)}
.duo{grid-template-columns:repeat(2,1fr)}
.duo__go{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;color:var(--c,var(--accent))}
.duo__go svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .18s}
.duo__i:hover .duo__go svg{transform:translateX(4px)}
.duo__i{padding:32px}
.duo__t{font-size:clamp(24px,2.2vw,30px)}
@media (max-width:1240px){
  .trio{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .trio{grid-template-columns:repeat(2,1fr)}
  .pcolor{min-height:240px}
  .duo{grid-template-columns:1fr}
}

/* ---------- product pages ---------- */
.ppage{background:var(--paper)}
.phead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.phead__in{display:flex;align-items:center;gap:40px;height:72px}
.brand--dark{color:var(--ink)}
.phead__nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:16px}
.phead__nav a{display:flex;align-items:center;gap:10px;color:var(--muted);transition:color .18s}
.phead__nav a:hover{color:var(--ink)}
/* same CTA on light headers */
.pill-btn--dark{background:rgba(16,17,20,.04);border-color:rgba(16,17,20,.18);color:var(--ink);height:44px}
.pill-btn--dark:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.burger--dark{border-color:var(--line)}
.burger--dark i{background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}

.phero{padding:28px 0 0}
.phero__plate{position:relative;background:var(--c);color:#fff;border-radius:var(--r-card) var(--r-card) var(--r-card) 0;padding:44px 48px 40px;max-width:1000px}
.phero__plate::after{content:"";position:absolute;left:0;top:100%;width:min(44%,400px);height:64px;background:var(--c);border-radius:0 0 var(--r-card) var(--r-card)}
.phero__plate::before{content:"";position:absolute;left:min(44%,400px);top:100%;width:32px;height:32px;background:radial-gradient(circle at 100% 100%,transparent 0 32px,var(--c) 32px)}
.crumbs--plate{color:rgba(255,255,255,.75)}
.crumbs--plate a:hover{color:#fff}
.phero__plate h1{margin-top:12px;font-size:clamp(34px,4.6vw,64px);line-height:1.02;color:#fff}
.phero__pills{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.phero__pills a{background:#fff;color:var(--ink);border-radius:999px;padding:10px 18px;font-size:var(--t-sm);font-weight:500;letter-spacing:0;transition:transform .18s,box-shadow .18s}
.phero__pills a:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
.phero__lead{margin:48px 0 0 calc(min(44%,400px) + 44px);max-width:620px;padding-left:0}
.phero__lead p{font-size:var(--t-lg);color:var(--ink);line-height:1.6}
.phero__cta{margin-top:24px;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;background:var(--c);color:#fff;font-weight:600;transition:filter .18s}
.phero__cta:hover{filter:brightness(1.08)}
.phero__cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .18s}
.phero__cta:hover svg{transform:translate(2px,-2px)}

.pblock{padding:84px 0 0}
.pblock__h{font-size:clamp(26px,3.1vw,38px);margin-bottom:26px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{border:1px solid var(--line);border-radius:24px;padding:28px;transition:border-color .2s,transform .2s}
.pcard:hover{border-color:var(--c);transform:translateY(-2px)}
.pcard__ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff)}
.pcard__ico svg{width:22px;height:22px;stroke:var(--c);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pcard__t{margin-top:16px;font-family:var(--display);font-size:var(--t-xl);font-weight:600;letter-spacing:-0.03em}
.pcard__d{margin-top:8px;font-size:var(--t-sm);color:var(--muted);line-height:1.6}

.pmock{padding:96px 0 0}
.pmock__in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;background:var(--mist);border-radius:var(--r-card);padding:48px}
.pmock__text h2{font-size:clamp(26px,3vw,38px)}
.pmock__text p{margin-top:14px;font-size:var(--t-md);color:var(--muted);line-height:1.62}
.pmock__list{margin-top:22px;display:grid;gap:11px}
.pmock__list li{position:relative;padding-left:26px;font-size:var(--t-sm)}
.pmock__list li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;border-radius:2px;background:var(--c)}
.pmock__frame svg{width:100%;height:auto}
.pmock__frame svg rect,.pmock__frame svg path,.pmock__frame svg circle{fill:none;stroke:rgba(16,17,20,.22);stroke-width:1.6}
.pmock__frame svg .f rect{fill:#fff;stroke:rgba(16,17,20,.12)}
.pmock__frame svg .a rect,.pmock__frame svg .a circle{fill:var(--c);stroke:none}
.pmock__frame svg .a path{stroke:var(--c);stroke-width:6;stroke-linecap:round}
.pmock__frame svg .track{stroke:rgba(16,17,20,.14);stroke-width:6;stroke-linecap:round}

@media (max-width:1080px){
  .phero__plate{max-width:none;padding:32px 28px}
  .phero__plate::after{display:none}
  .phero__lead{margin:32px 0 0;padding-left:0;max-width:none}
  .pcards{grid-template-columns:repeat(2,1fr)}
  .pmock__in{grid-template-columns:1fr;gap:32px;padding:32px}
  .phead__nav{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);padding-bottom:12px}
  .phead__in{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:0;gap:16px}
  .phead__in.is-open .phead__nav{display:flex}
  .phead__nav a{min-height:52px;padding:14px 0;border-bottom:1px solid var(--line)}
  .phead__nav .pill-btn--dark{margin-top:14px;height:52px;border-bottom:0}
  .burger--dark{display:flex;margin-left:auto}
}
@media (max-width:720px){
  .phero{padding-top:16px}
  .phero__plate{border-radius:26px;padding:26px 22px}
  .pblock{padding-top:56px}
  .pcards{grid-template-columns:1fr}
  .pmock{padding-top:56px}
  .pmock__in{border-radius:26px;padding:26px 22px}
}

@media (max-width:720px){
  .topbar__in{height:auto;padding:0 18px}
  .hd.is-open{height:auto;padding-top:10px;padding-bottom:14px}
}

/* on a filled tile the product icon and status pill go white too */
.cell.cell--ship.is-on .cell__ico{background:rgba(255,255,255,.24)}
.cell.cell--ship.is-on .cell__ico svg{stroke:#fff;opacity:1}
.cell.cell--ship.is-on .badge,.cell.cell--ship.is-on .badge--live{color:rgba(255,255,255,.85)}