/* ==========================================================================
   MARK One – static homepage
   Mobile-first. From 1100px up the layout is a pixel-faithful, fluidly scaled
   copy of the 1920px design: 1 design px = 1 "u" = (page width / 1920).
   ========================================================================== */
@layer reset, base, components, desktop, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
  ul { list-style: none; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  picture { display: contents; }
  img, svg { display: block; }
  img { max-width: 100%; height: auto; }
}

@layer base {

  :root {
    --u: calc(100vw / 1920);          /* main.js replaces it with the exact width without scrollbar */
    --bg: #dfdfdf; --ink: #000; --ink-2: #252525;
    --gap: 12px; --pad: clamp(16px, 5vw, 32px); --r: 16px;
    color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 72px;
  }
  body {
    font-family: "Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px; line-height: 1.3; color: var(--ink); background: #fff;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  }
  body.nav-open { overflow: hidden; }
  :focus-visible { outline: 2px solid #1a73ff; outline-offset: 3px; border-radius: 6px; }

  /* the design uses "Medium"; TeX Gyre Heros only ships Regular + Bold, so Medium = Regular + a hair of stroke */
  .m { font-weight: 500; -webkit-text-stroke: .012em currentColor; }
  .b { font-weight: 700; }
  br.d { display: none; }
  .sr { position: absolute; left: 8px; top: -60px; z-index: 200; background: #fff; padding: 8px 12px; border-radius: 8px; }
  .sr:focus { top: 8px; }

  .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .grad { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
  .grad--clean { background-image: linear-gradient(90deg,#adc7db 0%,#ddf6fa 11%,#e6e8ee 16%,#eddae2 22%,#efc6cf 27%,#f6bdc3 43%,#f3d6d8 71%,#e3e1e1 93%,#dcdcdc 100%); }
  .grad--motion { background-image: linear-gradient(90deg,#f4fbc9 5%,#fdfdc1 10%,#fefebb 15%,#f2fdac 20%,#e2fd94 25%,#cbfc79 30%,#b5fd60 35%,#a1fe4b 40%,#92fe3d 45%,#8efe3c 50%,#a5fc5f 65%,#b6fa7f 70%,#c6f79e 75%,#d4f3bb 80%,#e3efda 90%,#dfe8da 100%); }
  .grad--trust { background-image: linear-gradient(90deg,#d5f0e8 6%,#ddf2e1 12%,#e4f3da 18%,#ebf5d4 23%,#f0f6cd 29%,#eef5ca 41%,#e6f0cb 47%,#d9e4cb 53%,#cee1d6 59%,#a2c6ec 76%,#80aaf2 82%,#90bdf6 88%,#91bff8 100%); }
  .grad--warranty { background-image: linear-gradient(90deg,#f8edf4 0%,#f8eff4 26%,#f8f8f1 37%,#faf8f2 47%,#f3f3f4 58%,#e8ecf4 68%,#e5e8f4 73%,#edeaef 84%,#f2eaec 89%,#faece6 100%); }
}

@layer components {
  /* ---------- header ---------- */
  .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; justify-content: space-between; align-items: flex-start;
    padding: 12px var(--pad); pointer-events: none; }
  .site-header > * { pointer-events: auto; }
  .glass { background: rgba(233,233,233,.68); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 26px rgba(0,0,0,.07); }
  .menu-btn { height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 15px; letter-spacing: .01em; color: #3f3f3f; }
  .logo { color: #323232; transition: color .2s; }
  .logo svg { width: 58px; height: auto; }
  body.nav-open .logo { color: #efefef; }
  .nav { position: fixed; inset: 0; z-index: -1; display: none; flex-direction: column; justify-content: center; align-items: center;
    background: rgba(12,12,12,.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .nav.is-open { display: flex; }
  .nav ul { display: grid; gap: 6px; text-align: center; }
  .nav a { display: block; padding: 8px 20px; font-size: clamp(30px, 9vw, 44px); letter-spacing: -.02em; color: #f1f1f1; }
  .nav a:hover { color: #8efe3c; }

  /* ---------- generic ---------- */
  .panel { position: relative; overflow: hidden; clip-path: inset(0 round var(--r)); isolation: isolate; }
  :where(.panel img:not(.bgimg)) { width: 100%; height: 100%; object-fit: cover; }
  .label { font-size: clamp(15px, 4vw, 19px); }
  .h2 { font-size: clamp(27px, 7.4vw, 46px); line-height: 1.16; letter-spacing: -.012em; text-wrap: balance; }

  /* ---------- hero ---------- */
  .hero { position: relative; background: var(--bg); min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) 28px; }
  .hero__img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .hero__img img { position: absolute; max-width: none; width: 240vw; height: auto; left: -70vw; top: calc(8svh - 20vw);
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 68%, transparent 100%); }
  .hero__row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .hero__title { font-size: clamp(32px, 9.4vw, 45px); line-height: 1.1; letter-spacing: -.0065em; }
  .hero__sub { font-size: clamp(18px, 5vw, 27px); line-height: 1.2; color: var(--ink-2); letter-spacing: -.02em; margin-top: 4px; }
  .btn-order { display: grid; place-items: center; height: 46px; padding: 0 26px; flex: none; border-radius: 999px; background: #e6e6e6;
    font-size: 15px; letter-spacing: .02em; color: #000; box-shadow: 0 6px 22px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.6); }

  /* ---------- teaser ---------- */
  .teaser { background: #fff; padding: var(--gap) var(--gap) 0; }
  .teaser .panel { background: var(--bg); padding: clamp(56px, 16vw, 110px) 22px clamp(64px, 18vw, 120px); text-align: center; }
  .teaser__h { font-size: clamp(27px, 7.6vw, 45px); line-height: 1.22; letter-spacing: -.035em; text-wrap: balance; }
  .teaser__p { font-size: clamp(16px, 4.4vw, 22px); line-height: 1.2; color: var(--ink-2); letter-spacing: -.02em; margin: clamp(22px, 6vw, 40px) auto 0; max-width: 26em; text-wrap: balance; }

  /* ---------- cards ---------- */
  .cards { background: #fff; padding: var(--gap); display: grid; gap: var(--gap); }
  .card { background: #000; aspect-ratio: 4 / 5; }
  .card--trust-top { aspect-ratio: 2 / 1; }
  .card--trust-bottom { aspect-ratio: 5 / 4; }
  .card--clean img { object-position: 60% 40%; } .card--motion img { object-position: 46% 30%; }
  .card--trust-top img { object-position: 72% 40%; } .card--trust-bottom img { object-position: 40% 40%; }
  .trust { display: grid; gap: var(--gap); }
  .card__title { position: absolute; left: 16px; bottom: 12px; z-index: 2; font-size: clamp(34px, 10.4vw, 58px); line-height: 1.05; letter-spacing: -.02em; font-weight: 400; padding-bottom: .1em; }
  .card--motion .card__title { word-spacing: .1em; }

  /* ---------- what is ---------- */
  .whatis { position: relative; background: #fff; padding: clamp(84px, 24vw, 170px) 0 0; text-align: center; isolation: isolate; }
  .whatis__bg { position: absolute; inset: 0 0 auto 0; height: clamp(300px, 92vw, 560px); z-index: -1; }
  .whatis__label { font-size: clamp(17px, 4.6vw, 24px); }
  .whatis .h2 { margin: 18px auto 0; max-width: 17em; padding: 0 var(--pad); }
  .whatis .panel { margin: clamp(48px, 12vw, 120px) var(--gap) var(--gap); background: #000; aspect-ratio: 16 / 11; --r: 18px; }
  .whatis .panel img { object-position: 50% 62%; }

  /* ---------- capabilities ---------- */
  .cap { position: relative; background: var(--bg); padding: clamp(40px, 12vw, 90px) 0 0; overflow: hidden; }
  .cap__intro { padding: 0 var(--pad); text-align: center; font-size: clamp(19px, 5.2vw, 30px); line-height: 1.22; letter-spacing: -.012em; color: var(--ink-2); text-wrap: balance; }
  .cap__visual { position: relative; isolation: isolate; margin-top: 10px; }
  .cap__bg { position: absolute; inset: 0; z-index: -1; }
  .cap__bg .bgimg { object-position: 50% 100%; }
  .cap__fog { display: none; }
  .cap__robot { width: 128%; max-width: none; margin-left: -14%; }
  .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--gap) var(--gap); margin-top: -8vw; }
  .spec { position: relative; overflow: hidden; border-radius: 16px; min-height: clamp(120px, 34vw, 190px); display: grid; align-content: center; justify-items: center;
    text-align: center; color: var(--ink-2); padding: 14px 8px; isolation: isolate; background: rgba(255,255,255,.4); }
  .spec .bgimg { z-index: -1; }
  .spec b { font-size: clamp(38px, 12vw, 64px); line-height: 1; letter-spacing: -.02em; }
  .spec span { font-size: clamp(15px, 4.2vw, 22px); line-height: 1.15; }
  .spec i { font-style: normal; font-size: clamp(14px, 3.8vw, 20px); }

  /* ---------- more than a robot / mosaic ---------- */
  .more { background: var(--bg); padding: clamp(48px, 14vw, 100px) var(--gap) var(--gap); text-align: center; }
  .more__label { font-size: clamp(15px, 4vw, 19px); color: var(--ink-2); }
  .more__p { font-size: clamp(17px, 4.8vw, 27px); line-height: 1.2; letter-spacing: -.02em; color: var(--ink-2); margin: 20px auto 0; max-width: 24em; text-wrap: balance; }
  .mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: clamp(36px, 10vw, 72px); }
  .mosaic .panel { --r: 14px; }
  .mosaic .w2 { grid-column: 1 / -1; }
  .m-front { aspect-ratio: 3 / 4; } .m-work { aspect-ratio: 16 / 11; } .m-base { aspect-ratio: 5 / 3; } .m-arm { aspect-ratio: 1 / 1; } .m-hand { aspect-ratio: 1 / 1; }
  .cut { position: absolute; inset: 0; object-fit: contain !important; }
  .m-front .cut { object-position: 50% 100%; transform: scale(1.35); transform-origin: 50% 82%; }
  .m-arm img { object-position: 60% 50%; } .m-hand img { object-position: 30% 40%; }

  /* ---------- dark cards ---------- */
  .dark { background: var(--bg); padding: 0 var(--gap) var(--gap); }
  .dark .panel { background: #000; color: #dfdfdf; text-align: center; --r: 18px; }
  .dark .h2 { color: #9b9b9b; margin-top: 12px; }
  .dark__note { color: #b5b5b5; font-size: clamp(16px, 4.4vw, 27px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }

  .apps .panel { padding: clamp(56px, 15vw, 110px) 18px clamp(48px, 12vw, 100px); }
  .apps { --shift: 40vw; }
  .apps .robot, .apps .glow { position: absolute; z-index: -1; max-width: none; width: 190%; height: auto; left: -45%; top: var(--shift); object-fit: fill; }
  .apps .robot { -webkit-mask-image: linear-gradient(to bottom, #000 49.8%, rgba(0,0,0,.35) 58%, transparent 67.6%); mask-image: linear-gradient(to bottom, #000 49.8%, rgba(0,0,0,.35) 58%, transparent 67.6%); }  /* torso and arms fade out, as in the design */
  .apps .glow { display: none; }
  .tiles-img { display: none; }
  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: calc(44vw + var(--shift)) 0 clamp(32px, 9vw, 64px); }
  .tiles li { display: grid; place-items: center; min-height: clamp(74px, 22vw, 130px); padding: 10px; border-radius: 8px; color: #ececec;
    font-size: clamp(16px, 4.4vw, 26px); line-height: 1.15; letter-spacing: -.015em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    background: radial-gradient(120% 90% at 50% 0%, rgba(120,90,200,.34), rgba(0,0,0,0) 62%), linear-gradient(180deg, #05060a, #0b0912); }

  .ind .panel { padding: clamp(56px, 15vw, 110px) 18px clamp(56px, 14vw, 110px); }
  .ind .bgimg { z-index: -1; object-position: 50% 60%; }
  .ind__list { display: grid; gap: 4px; margin: clamp(90px, 34vw, 240px) 0 clamp(70px, 26vw, 180px); font-size: clamp(22px, 6.6vw, 34px); letter-spacing: -.02em; color: #fff; }

  /* ---------- warranty ---------- */
  .war { background: var(--bg); padding: 0 var(--gap) var(--gap); }
  .war .panel { background: #ccccd4; text-align: center; padding: clamp(48px, 12vw, 90px) 16px 0; --r: 14px; min-height: 158vw; max-height: 1300px; }
  .war__p { font-size: clamp(17px, 4.6vw, 27px); line-height: 1.2; letter-spacing: -.02em; color: #000; }
  .war__big { font-size: clamp(56px, 19vw, 95px); line-height: 1.04; letter-spacing: -.012em; margin-top: 18px; }
  .war__big span { display: block; }
  .war__img { position: absolute; inset: auto 0 0 0; z-index: -1; width: 100%; height: 104vw; max-height: 900px; object-fit: cover; object-position: 38% 50%; }

  /* ---------- footer ---------- */
  .foot { background: var(--bg); padding: 0 var(--gap) var(--gap); }
  .foot .panel { background: #000; color: #cdcdcd; padding: clamp(40px, 10vw, 70px) 24px 24px; --r: 14px; min-height: 96vw; display: flex; flex-direction: column; justify-content: space-between; }
  .foot .bgimg { z-index: -1; object-position: 100% 100%; }
  .foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 20px; font-size: 16px; line-height: 1.4; }
  .foot h3 { font-size: 16px; font-weight: 400; color: #7e7e7e; margin-bottom: 8px; }
  .foot a:hover { color: #fff; }
  .foot .u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .foot .made a { color: #00ff00; }
  .foot__copy { font-size: 13px; margin-top: 44px; }
}

/* ==========================================================================
   Desktop: exact copy of the design, scaled with --u
   ========================================================================== */
@layer desktop {
  @media (min-width: 1100px) {
    :root { scroll-padding-top: calc(var(--u) * 80); }
    br.d { display: inline; }
    .sec { position: relative; display: block; height: calc(var(--u) * var(--h)); min-height: 0; padding: 0; margin: 0; overflow: hidden; overflow: clip; isolation: isolate; }
    .sec--gray { background: var(--bg); }

    /* absolutely placed text: baseline (--b), size (--s), leading (--l), tracking (--ls), left (--x) or centre (--cx) in design px */
    .t { position: absolute; inset: auto; margin: 0; padding: 0; max-width: none; width: auto; white-space: nowrap; text-wrap: nowrap; text-align: left; transform: none;
      left: calc(var(--u) * var(--x, 0));
      top: calc(var(--u) * (var(--b) - var(--l) / 2 - .432 * var(--s)));
      font-size: max(10.5px, calc(var(--u) * var(--s))); line-height: calc(var(--u) * var(--l)); letter-spacing: calc(var(--ls, 0) * 1em); }
    .t.c { left: calc(var(--u) * var(--cx)); transform: translateX(-50%); text-align: center; }

    .panel { position: absolute; display: block; margin: 0; padding: 0; min-height: 0; max-height: none; aspect-ratio: auto; overflow: hidden;
      left: calc(var(--u) * var(--px)); top: calc(var(--u) * var(--py)); width: calc(var(--u) * var(--pw)); height: calc(var(--u) * var(--ph));
      clip-path: inset(0 round calc(var(--u) * var(--pr, 16.5))); }
    .ph { position: absolute; inset: auto; max-width: none; object-fit: fill; transform: none;
      left: calc(var(--il) * 1%); top: calc(var(--it) * 1%); width: calc(var(--iw) * 1%); height: auto; }

    /* header */
    .site-header { padding: 0; display: block; }
    .menu-btn { display: none; }
    .nav { position: absolute; inset: auto; z-index: 1; display: flex; align-items: center; flex-direction: row; justify-content: flex-start;
      left: calc(var(--u) * 678); top: calc(var(--u) * 21); width: calc(var(--u) * 553); height: calc(var(--u) * 52); padding: 0 0 0 calc(var(--u) * 25.9);
      border-radius: calc(var(--u) * 26); background: rgba(233,233,233,.72); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 26px rgba(0,0,0,.06); }
    .nav ul { display: flex; gap: calc(var(--u) * 18.2); text-align: left; }
    .nav li:nth-child(4) { margin-left: calc(var(--u) * 3.6); }
    .nav a { padding: 0; font-size: calc(var(--u) * 17); letter-spacing: -.0099em; color: #3f3f3f; font-weight: 500; -webkit-text-stroke: .012em currentColor; transition: opacity .2s; }
    .nav a:hover { color: #3f3f3f; opacity: .6; }
    .logo { position: absolute; left: calc(var(--u) * 1756); top: calc(var(--u) * 24); }
    .logo svg { width: calc(var(--u) * 83); }

    /* hero */
    .hero { padding: 0; }
    .hero__img img { -webkit-mask-image: none; mask-image: none; left: calc(var(--u) * -428); top: calc(var(--u) * -377); width: calc(var(--u) * 3090); }
    .hero__row, .hero__copy { display: contents; }
    .btn-order { position: absolute; left: auto; right: calc(var(--u) * 34.1); top: calc(var(--u) * 992.3); width: calc(var(--u) * 101); height: calc(var(--u) * 53); padding: 0;
      border-radius: calc(var(--u) * 26.5); font-size: max(11px, calc(var(--u) * 15)); line-height: calc(var(--u) * 53); transition: background .2s; }
    .btn-order:hover { background: #f3f3f3; }

    /* teaser / cards */
    .teaser { padding: 0; }
    .cards { display: block; padding: 0; }
    .trust { display: contents; }
    .card__title { padding: 0; }
    .card--motion .card__title { word-spacing: .5em; }

    /* what is */
    .whatis { padding: 0; text-align: initial; }
    .whatis__bg { left: 0; top: 0; width: 100%; height: calc(var(--u) * 672); }
    .whatis .h2 { max-width: none; padding: 0; margin: 0; }

    /* capabilities */
    .cap { padding: 0; }
    .cap__visual { position: static; margin: 0; }
    .cap__bg { left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: calc(var(--u) * 1258); }
    .cap__robot { position: absolute; left: calc(var(--u) * 84); top: calc(var(--u) * 229); width: calc(var(--u) * 1568); max-width: none; margin: 0; }
    .cap__fog { display: block; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 1258); pointer-events: none;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.000) 2.5%, rgba(0,0,0,0.000) 5.0%, rgba(0,0,0,0.000) 7.5%, rgba(0,0,0,0.000) 10.0%, rgba(0,0,0,0.000) 12.5%, rgba(0,0,0,0.000) 15.0%, rgba(0,0,0,0.000) 17.5%, rgba(0,0,0,0.000) 20.0%, rgba(0,0,0,0.000) 22.5%, rgba(0,0,0,0.000) 25.0%, rgba(0,0,0,0.000) 27.5%, rgba(0,0,0,0.000) 30.0%, rgba(0,0,0,0.000) 32.5%, rgba(0,0,0,0.000) 35.0%, rgba(0,0,0,0.000) 37.5%, rgba(0,0,0,0.000) 40.0%, rgba(0,0,0,0.000) 42.5%, rgba(0,0,0,0.000) 45.0%, rgba(0,0,0,0.000) 47.5%, rgba(0,0,0,0.007) 50.0%, rgba(0,0,0,0.048) 52.5%, rgba(0,0,0,0.106) 55.0%, rgba(0,0,0,0.188) 57.5%, rgba(0,0,0,0.279) 60.0%, rgba(0,0,0,0.368) 62.5%, rgba(0,0,0,0.458) 65.0%, rgba(0,0,0,0.552) 67.5%, rgba(0,0,0,0.641) 70.0%, rgba(0,0,0,0.713) 72.5%, rgba(0,0,0,0.784) 75.0%, rgba(0,0,0,0.863) 77.5%, rgba(0,0,0,0.915) 80.0%, rgba(0,0,0,0.956) 82.5%, rgba(0,0,0,0.987) 85.0%, rgba(0,0,0,1.000) 87.5%, rgba(0,0,0,1.000) 90.0%, rgba(0,0,0,1.000) 92.5%, rgba(0,0,0,0.999) 95.0%, rgba(0,0,0,0.995) 97.5%, rgba(0,0,0,0.995) 100.0%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.000) 2.5%, rgba(0,0,0,0.000) 5.0%, rgba(0,0,0,0.000) 7.5%, rgba(0,0,0,0.000) 10.0%, rgba(0,0,0,0.000) 12.5%, rgba(0,0,0,0.000) 15.0%, rgba(0,0,0,0.000) 17.5%, rgba(0,0,0,0.000) 20.0%, rgba(0,0,0,0.000) 22.5%, rgba(0,0,0,0.000) 25.0%, rgba(0,0,0,0.000) 27.5%, rgba(0,0,0,0.000) 30.0%, rgba(0,0,0,0.000) 32.5%, rgba(0,0,0,0.000) 35.0%, rgba(0,0,0,0.000) 37.5%, rgba(0,0,0,0.000) 40.0%, rgba(0,0,0,0.000) 42.5%, rgba(0,0,0,0.000) 45.0%, rgba(0,0,0,0.000) 47.5%, rgba(0,0,0,0.007) 50.0%, rgba(0,0,0,0.048) 52.5%, rgba(0,0,0,0.106) 55.0%, rgba(0,0,0,0.188) 57.5%, rgba(0,0,0,0.279) 60.0%, rgba(0,0,0,0.368) 62.5%, rgba(0,0,0,0.458) 65.0%, rgba(0,0,0,0.552) 67.5%, rgba(0,0,0,0.641) 70.0%, rgba(0,0,0,0.713) 72.5%, rgba(0,0,0,0.784) 75.0%, rgba(0,0,0,0.863) 77.5%, rgba(0,0,0,0.915) 80.0%, rgba(0,0,0,0.956) 82.5%, rgba(0,0,0,0.987) 85.0%, rgba(0,0,0,1.000) 87.5%, rgba(0,0,0,1.000) 90.0%, rgba(0,0,0,1.000) 92.5%, rgba(0,0,0,0.999) 95.0%, rgba(0,0,0,0.995) 97.5%, rgba(0,0,0,0.995) 100.0%); }
    .specs { display: contents; }
    .spec { position: absolute; display: block; min-height: 0; padding: 0; background: none; overflow: hidden;
      left: calc(var(--u) * var(--px)); top: calc(var(--u) * var(--py)); width: calc(var(--u) * var(--pw)); height: calc(var(--u) * var(--ph)); border-radius: calc(var(--u) * var(--pr)); }
    .spec--dual, .spec--five { overflow: visible; }
    .spec b, .spec i, .spec span { font-style: normal; }

    /* more */
    .more { padding: 0; text-align: initial; }
    .mosaic { display: block; margin: 0; }

    /* dark cards */
    .dark { padding: 0; }
    .tiles { display: contents; margin: 0; }
    .tiles li { display: block; min-height: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
    .tiles-img { display: block; mix-blend-mode: screen; }
    .apps .robot, .apps .glow { z-index: auto; opacity: 1; }
    .apps .glow { display: block; -webkit-clip-path: url(#tiles-clip); clip-path: url(#tiles-clip); }
    .ind__list { display: contents; margin: 0; }
    .ind .bgimg { z-index: 0; }

    /* warranty */
    .war { padding: 0; }
    .war__img { z-index: 0; max-height: none; }
    .war__big span { display: block; }

    /* footer */
    .foot { padding: 0; }
    .foot__cols, .foot .col, .foot ul { display: contents; }
    .foot h3 { margin: 0; }
    .foot__copy { margin: 0; }
    .foot .bgimg { z-index: 0; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .card, .mosaic .panel, .whatis .panel, .apps .panel, .ind .panel, .war .panel, .foot .panel {
        animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
      @keyframes rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
    }
    .btn-order, .menu-btn { transition: background .2s, transform .2s; }
    .btn-order:active, .menu-btn:active { transform: scale(.97); }
  }
}

/* phones in landscape (e.g. 844x390): frame the hero like the desktop design instead of the portrait crop */
@layer components {
  @media (max-width: 1099.98px) and (orientation: landscape) and (max-height: 520px) {
    .hero { min-height: 100vh; min-height: 100svh; }
    .hero__img img { width: 161vw; left: -22.3vw; top: -19.6vw; -webkit-mask-image: none; mask-image: none; }
  }
}

/* notched phones in landscape: the page extends under the notch (viewport-fit=cover), so keep content and header out of the safe areas */
@layer components {
  @media (orientation: landscape) and (max-height: 520px) {
    html { background: var(--bg); }
    body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .site-header { padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
  }
}

/* very small phones (320-379px): the footer columns need the full width for the e-mail addresses */
@layer components {
  @media (max-width: 379.98px) { .foot__cols { grid-template-columns: 1fr; } }
}