:root {
  --ink:#f7f5ee;
  --night:#0d1715;
  --night-2:#111f1b;
  --panel:#17221f;
  --muted:#c4d0ca;
  --orange:#ff6b35;
  --orange-hover:#ff7b4a;
  --good:#82e4bd;
  --yellow:#ffd84d;
  --line:rgba(255,255,255,.16);
  --max:1160px;
  --ai-bg:#0d2230;
  --ai-bg-2:#0a1a25;
  --ai-accent:#8fd0f2;
  --team-bg:#0f2a1f;
  --team-bg-2:#0b1f17;
  --team-accent:#9bdcbc;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--night); }
body {
  margin:0;
  min-width:320px;
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 18%,#243830 0,transparent 34%),
    radial-gradient(circle at 88% 72%,#1b3028 0,transparent 42%),
    linear-gradient(150deg,#101b18,#08100e 72%);
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
}
button,a { font:inherit; }
a { color:inherit; }
button:focus-visible,a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.m2-container {
  width:min(var(--max),100%);
  margin:0 auto;
  padding:0 clamp(14px,4vw,32px);
}

/* Hero */
.m2-hero { position:relative; }
.m2-hero-stage {
  position:relative;
  isolation:isolate;
  display:grid;
  /* Close to the photo's own 2000x1077 ratio, so the whole group stays visible. */
  min-height:max(680px,min(calc(100vw / 1.86),94svh));
  overflow:hidden;
  background:#16251f;
}
.m2-hero-photo {
  position:absolute;
  z-index:-3;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% 55%;
}
.m2-hero-shade {
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,13,11,.78) 0%,rgba(5,13,11,.5) 30%,rgba(5,13,11,.06) 58%,rgba(5,13,11,.12) 100%),
    linear-gradient(0deg,#0d1715 0%,transparent 22%,rgba(0,0,0,.06) 100%);
}
.m2-topbar {
  position:absolute;
  z-index:5;
  top:clamp(16px,3vw,34px);
  left:clamp(18px,4vw,54px);
  right:clamp(18px,4vw,54px);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
/* The badge image (brand-mark.svg) already contains the box and its tilt. */
.m2-brand-mini {
  display:block;
  width:54px;
  height:54px;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));
}
.m2-brand-mini .brand-mark-image { display:block;width:100%;height:100%; }
/* The FI/EN switch stays in the top corner while the page scrolls; it keeps
   the topbar's exact position, so nothing moves at the top of the page. */
.m2-language {
  position:fixed;
  z-index:20;
  top:clamp(16px,3vw,34px);
  right:clamp(18px,4vw,54px);
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(8,17,14,.72);
  backdrop-filter:blur(12px);
}
.m2-language button {
  min-width:48px;
  min-height:38px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#d7e1dc;
  font-weight:850;
  cursor:pointer;
}
.m2-language button[aria-pressed="true"] {
  background:#fff;
  color:#0d1715;
}
/* Desktop: the card sits on the empty trees on the left third of the photo. */
.m2-hero-copy {
  align-self:center;
  width:clamp(380px,28vw,540px);
  /* Moves away from the edge on wide screens, never onto the group. */
  margin:104px auto 56px clamp(24px,calc(13vw - 140px),220px);
  padding:clamp(22px,2.6vw,32px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:26px;
  background:rgba(7,18,15,.7);
  box-shadow:0 30px 90px rgba(0,0,0,.32);
  backdrop-filter:blur(10px);
}
/* ZANDEMIA AI is one brand: one line, the strongest text in the hero. */
.m2-brand {
  display:flex;
  align-items:center;
  gap:.22em;
  margin:0 0 .32em;
  font-size:clamp(42px,3.3vw,64px);
  line-height:1;
  white-space:nowrap;
}
.m2-wordmark {
  display:inline-block;
  padding:.1em .17em .08em;
  background:#153027;
  color:#f4f1e8;
  font-weight:950;
  letter-spacing:-.04em;
}
.m2-ai-badge {
  display:inline-block;
  padding:.12em .2em .1em;
  background:#10271f;
  color:#fff;
  font-size:.8em;
  font-weight:950;
  letter-spacing:-.02em;
  transform:rotate(7deg);
}
.m2-hero-title {
  max-width:620px;
  margin:0;
  color:#fff;
  font-size:clamp(24px,2.2vw,32px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.025em;
}
.m2-lead {
  max-width:600px;
  margin:18px 0 0;
  color:#fff;
  font-size:clamp(19px,1.8vw,23px);
  font-weight:760;
  line-height:1.42;
}
.m2-sublead {
  max-width:600px;
  margin:10px 0 0;
  color:#d8e2dd;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.5;
}
/* The AI statement is its own band directly under the hero image. */
.m2-ai-band {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0;
  padding:14px clamp(16px,4vw,32px);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(14,24,22,.96);
  color:#c3cfca;
  font-size:clamp(16px,1.3vw,18px);
  font-weight:700;
  line-height:1.35;
  text-align:center;
}
.m2-ai-band-mark {
  flex:none;
  padding:3px 8px 2px;
  border:1.5px solid currentColor;
  border-radius:7px;
  font-size:16px;
  font-weight:950;
  letter-spacing:.02em;
}
/* Demo phone: a link with a tilted layer that sways with the scroll speed
   (--m2-sway, set by marketing2.js on large screens) and settles back. */
.m2-phone-link {
  display:block;
  border-radius:36px;
  text-decoration:none;
  transition:transform .25s ease,filter .25s ease;
}
.m2-phone-link-hero {
  position:absolute;
  z-index:1;
  right:clamp(16px,2.2vw,56px);
  bottom:clamp(28px,4.5vh,72px);
  width:clamp(210px,15vw,310px);
}
.m2-phone-sway {
  position:relative;
  display:block;
  transform:rotate(calc(-3deg + var(--m2-sway, 0deg)));
  transform-origin:50% 92%;
  transition:transform .9s cubic-bezier(.34,1.56,.64,1);
}
.m2-phone {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 35px 55px rgba(0,0,0,.48));
}
.m2-phone-hint {
  position:absolute;
  top:20%;
  left:50%;
  padding:7px 13px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transform:translateX(-50%);
  animation:m2-hint-pulse 2.6s ease-in-out infinite;
}
.m2-phone-link:hover,
.m2-phone-link:focus-visible { transform:translateY(-8px); filter:drop-shadow(0 0 26px rgba(255,107,53,.45)); }
.m2-phone-link:active { transform:translateY(-3px) scale(.99); }
/* One gentle swing on smaller screens when the phone comes fully into view. */
.m2-phone-sway.is-swinging { animation:m2-phone-swing 1.1s ease-in-out; }
@keyframes m2-phone-swing {
  0%,100% { transform:rotate(-3deg); }
  30% { transform:rotate(3deg); }
  60% { transform:rotate(-6deg); }
  82% { transform:rotate(-2deg); }
}
@keyframes m2-hint-pulse {
  0%,100% { box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 0 0 rgba(255,107,53,.5); }
  50% { box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 0 10px rgba(255,107,53,0); }
}
.m2-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  margin-top:22px;
  padding:16px 26px;
  border-radius:15px;
  background:var(--orange);
  color:#fff;
  font-size:18px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(255,107,53,.26);
}
.m2-primary:hover { background:var(--orange-hover); }

/* Pillars and feedback (neutral) */
main { padding:clamp(34px,6vw,72px) 0 0; }
.m2-pillar-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.m2-pillar-card {
  position:relative;
  min-height:220px;
  display:grid;
  align-content:start;
  gap:8px;
  overflow:hidden;
  padding:24px 28px 28px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
  text-decoration:none;
  transition:transform .22s ease,border-color .22s ease;
}
.m2-pillar-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 84% 18%,rgba(255,255,255,.13),transparent 34%);
  pointer-events:none;
}
.m2-pillar-card:hover {
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.34);
}
.m2-pillar-card-ai { border-color:rgba(143,208,242,.38); background:linear-gradient(145deg,rgba(74,160,209,.3),rgba(13,34,48,.88)); }
.m2-pillar-card-event { border-color:rgba(155,220,188,.38); background:linear-gradient(145deg,rgba(130,228,189,.24),rgba(15,42,31,.88)); }
.m2-number-badge {
  width:52px;
  height:52px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--orange);
  color:#fff;
  font-size:26px;
  font-weight:950;
  line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.m2-pillar-number { position:relative; margin-bottom:10px; }
.m2-pillar-card strong {
  position:relative;
  max-width:520px;
  padding-right:34px;
  color:#fff;
  font-size:clamp(25px,3vw,38px);
  line-height:1.05;
  overflow-wrap:anywhere;
}
.m2-pillar-card > span:not(.m2-number-badge):not(.m2-card-arrow) {
  position:relative;
  max-width:530px;
  color:#e5eee9;
  font-size:18px;
  line-height:1.4;
}
.m2-pillar-card small {
  position:relative;
  color:#c9d8d1;
  font-size:16px;
  font-weight:750;
}
.m2-card-arrow {
  position:absolute;
  right:24px;
  top:28px;
  color:var(--orange);
  font-size:30px;
  font-weight:950;
}

.m2-feedback,
.m2-contact,
.m2-facts-section {
  margin-top:28px;
  padding:clamp(24px,4vw,38px);
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 55%),rgba(28,36,34,.96);
  box-shadow:0 20px 60px rgba(0,0,0,.23);
}
.m2-feedback { margin-bottom:clamp(40px,6vw,64px); }
.m2-eyebrow {
  margin:0 0 10px;
  color:#9bd7bb;
  font-size:16px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.m2-feedback h2,
.m2-contact h2,
.m2-facts-section h2,
.m2-demo-panel h3 {
  margin:0;
  color:#fff;
  font-size:clamp(26px,3.5vw,38px);
  line-height:1.15;
}
.m2-featured-quotes {
  display:grid;
  gap:9px;
  margin:18px 0 20px;
}
.m2-featured-quotes p {
  margin:0;
  color:#fff;
  font-size:clamp(19px,2.4vw,24px);
  font-weight:760;
  font-style:italic;
  line-height:1.45;
}
.m2-rating {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin:0 0 14px;
  padding:15px 17px;
  border:1px solid rgba(255,216,77,.3);
  border-radius:15px;
  background:rgba(255,216,77,.07);
}
.m2-rating-stars,.m2-five-stars { color:var(--yellow); letter-spacing:.08em; }
.m2-rating strong { font-size:21px; }
.m2-rating small { flex-basis:100%; color:#cfdad5; font-size:16px; }
.m2-short-quotes {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.m2-short-quotes article {
  min-height:106px;
  display:grid;
  align-content:center;
  gap:8px;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.09);
  text-align:center;
}
.m2-five-stars { font-size:17px; }
.m2-short-quotes p { margin:0; color:#eef3f0; font-size:17px; font-style:italic; line-height:1.4; }

/* Themed sections: AI = blue, team event = green, colour runs through the whole section. */
.m2-theme {
  padding:clamp(28px,5vw,56px) 0 clamp(44px,7vw,80px);
  scroll-margin-top:0;
}
.m2-theme-ai {
  --accent:var(--ai-accent);
  border-top:1px solid rgba(143,208,242,.22);
  background:
    radial-gradient(circle at 85% 8%,rgba(74,160,209,.2),transparent 40%),
    linear-gradient(180deg,var(--ai-bg),var(--ai-bg-2));
}
.m2-theme-team {
  --accent:var(--team-accent);
  border-top:1px solid rgba(155,220,188,.22);
  background:
    radial-gradient(circle at 12% 10%,rgba(130,228,189,.16),transparent 40%),
    linear-gradient(180deg,var(--team-bg),var(--team-bg-2));
}
.m2-section-bar {
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 20px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  box-shadow:0 18px 45px rgba(0,0,0,.3);
  backdrop-filter:blur(16px);
}
.m2-theme-ai .m2-section-bar { background:linear-gradient(145deg,rgba(31,93,121,.97),rgba(13,40,56,.96)); }
.m2-theme-team .m2-section-bar { background:linear-gradient(145deg,rgba(36,104,80,.97),rgba(15,52,39,.96)); }
.m2-section-bar h2 {
  min-width:0;
  margin:0;
  color:#fff;
  font-size:clamp(22px,3.4vw,38px);
  font-weight:950;
  line-height:1.1;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
/* Three small themed SVG emblems side by side; decorative only. */
.m2-emblems {
  display:flex;
  justify-content:center;
  gap:clamp(14px,4vw,44px);
  margin:26px auto 0;
}
.m2-emblems img {
  display:block;
  width:clamp(88px,24vw,150px);
  height:auto;
}
.m2-theme-content { padding:0 clamp(4px,2vw,18px); }
.m2-theme-content > p {
  max-width:880px;
  margin:20px auto 0;
  color:#e6eef0;
  font-size:18px;
  line-height:1.7;
}
.m2-theme-content > .m2-section-lead {
  margin-top:32px;
  color:#fff;
  font-size:clamp(22px,2.8vw,30px);
  font-weight:850;
  line-height:1.3;
}
.m2-three-points {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:950px;
  margin:26px auto 0;
}
.m2-three-points article {
  display:grid;
  gap:9px;
  padding:20px;
  border:1px solid rgba(143,208,242,.22);
  border-radius:17px;
  background:rgba(143,208,242,.07);
}
.m2-three-points strong { color:var(--orange); font-size:16px; letter-spacing:.12em; }
.m2-three-points span { color:#e6eef0; line-height:1.5; }
.m2-case-panel,
.m2-demo-panel {
  max-width:980px;
  margin:30px auto 0;
  padding:clamp(22px,3.5vw,36px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  box-shadow:0 16px 45px rgba(0,0,0,.2);
}
.m2-case-panel { background:linear-gradient(145deg,rgba(143,208,242,.12),transparent 55%),rgba(9,28,40,.92); }
.m2-case-heading {
  margin:0;
  color:var(--accent);
  font-size:clamp(32px,4.6vw,52px);
  font-weight:950;
  line-height:1;
  letter-spacing:.02em;
}
.m2-case-title {
  margin:12px 0 0;
  color:#fff;
  font-size:clamp(21px,2.6vw,28px);
  font-weight:850;
  line-height:1.25;
}
.m2-case-panel p:not(.m2-case-title) { margin:16px 0 0; color:#e3ecf0; font-size:18px; line-height:1.65; }
.m2-case-panel .m2-case-lead { color:#fff; font-size:clamp(19px,2.2vw,22px); font-weight:800; }
.m2-em {
  padding:0 .15em;
  border-radius:4px;
  background:rgba(255,107,53,.2);
  color:#fff;
  font-weight:850;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* Event section: three illustrated points and the audience chips, in the same
   880px column as the text (same copy as the demo page's "Mikä on ZANDEMIA?"). */
.m2-features {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  max-width:880px;
  margin:28px auto 6px;
  padding:0;
  list-style:none;
}
.m2-features li { display:grid; justify-items:center; align-content:start; gap:10px; text-align:center; }
.m2-features img { display:block; width:120px; height:120px; }
.m2-features b { display:block; margin-bottom:4px; color:#fff; font-size:19px; line-height:1.25; }
.m2-features span { display:block; color:#e6eef0; font-size:17px; line-height:1.5; }
.m2-theme-content em { color:#9fe3c7; font-style:italic; font-weight:800; }
.m2-audience { max-width:880px; margin:26px auto 0; }
.m2-audience p { margin:0 0 10px; color:#9fe3c7; font-size:16px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.m2-audience ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.m2-audience li { padding:7px 13px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.07); color:#fff; font-size:16px; font-weight:700; }
.m2-audience li.m2-audience-main { border-color:var(--orange); background:var(--orange); }
.m2-world-highlight {
  padding:16px 18px;
  border-left:4px solid var(--orange);
  border-radius:0 13px 13px 0;
  background:rgba(255,107,53,.1);
  color:#fff!important;
  font-size:clamp(21px,2.8vw,29px)!important;
  font-weight:800;
  line-height:1.45!important;
}
.m2-demo-panel {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,4vw,44px);
  align-items:center;
  background:linear-gradient(145deg,rgba(255,107,53,.1),transparent 52%),rgba(10,34,25,.93);
}
.m2-demo-panel p { color:#e0ebe5; line-height:1.65; }
.m2-demo-panel .m2-eyebrow { color:var(--accent); }
.m2-demo-panel .m2-primary { margin-top:18px; }
.m2-phone-link-demo { width:clamp(150px,14vw,210px); margin:4px 8px; }

/* Facts and contact (neutral again) */
.m2-facts-section { margin-top:clamp(40px,6vw,64px); }
.m2-facts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
.m2-facts li {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:13px 14px;
  border-radius:13px;
  background:rgba(255,255,255,.05);
  color:#e8efeb;
  font-size:17px;
  line-height:1.45;
}
.m2-contact {
  max-width:900px;
  margin:42px auto 0;
  border-color:rgba(255,107,53,.42);
  background:linear-gradient(145deg,rgba(255,107,53,.1),transparent 48%),rgba(24,36,32,.96);
}
.m2-contact-lead { color:#fff!important; font-size:21px!important; font-weight:780; }
.m2-contact p { max-width:700px; color:#dfe8e3; line-height:1.65; }
.m2-email { display:block; width:max-content; margin-top:20px; color:var(--good); font-size:19px; font-weight:900; text-decoration:none; }
.m2-email:hover { text-decoration:underline; }
.m2-contact .m2-billing { margin:14px 0 0; color:#b3c2bb; font-size:16px; }

@media (max-width:1100px) {
  /* Stacked hero: photo, AI band, text card, phone. */
  .m2-hero { display:flex; flex-direction:column; isolation:isolate; }
  .m2-hero-stage { display:contents; }
  .m2-hero-photo { order:0; }
  .m2-ai-band { order:1; }
  .m2-hero-copy { order:2; }
  .m2-phone-link-hero { order:3; }
  .m2-hero-photo {
    position:relative;
    display:block;
    height:auto;
    aspect-ratio:4 / 3;
    object-position:78% 58%;
  }
  .m2-hero-shade {
    bottom:auto;
    aspect-ratio:4 / 3;
    background:linear-gradient(0deg,#0d1715 0%,rgba(13,23,21,.2) 30%,transparent 55%,rgba(6,15,12,.3) 100%);
  }
  .m2-hero-copy {
    width:auto;
    margin:20px 16px 0;
    padding:22px;
  }
  .m2-brand { font-size:clamp(30px,calc(14vw - 12px),84px); }
  .m2-phone-link-hero {
    position:relative;
    right:auto;
    bottom:auto;
    width:min(250px,62vw);
    margin:26px auto 0;
  }
}
@media (max-width:900px) {
  .m2-pillar-grid { grid-template-columns:1fr; }
  .m2-pillar-card { min-height:0; }
  .m2-short-quotes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .m2-demo-panel { grid-template-columns:1fr; }
  .m2-phone-link-demo { width:min(200px,52vw); margin:0 auto; }
  .m2-demo-panel .m2-primary { width:100%; white-space:normal; text-align:center; }
}
@media (max-width:620px) {
  .m2-features { grid-template-columns:1fr; gap:16px; margin-top:22px; }
  .m2-features li { grid-template-columns:76px minmax(0,1fr); justify-items:start; align-items:center; gap:14px; text-align:left; }
  .m2-features img { width:76px; height:76px; }
  .m2-hero-photo,.m2-hero-shade { aspect-ratio:5 / 4; }
  .m2-hero-copy { margin:16px 12px 0; padding:19px 17px; border-radius:21px; }
  .m2-lead { font-size:19px; }
  .m2-sublead { font-size:16px; }
  .m2-ai-band { gap:10px; padding:13px 14px; font-size:16px; }
  .m2-primary { width:100%; text-align:center; }
  .m2-pillar-card { padding:20px 18px 22px; }
  .m2-pillar-card strong { font-size:26px; }
  .m2-number-badge { width:42px; height:42px; border-radius:12px; font-size:22px; }
  .m2-short-quotes { grid-template-columns:1fr; }
  .m2-section-bar { gap:12px; padding:11px 13px; border-radius:16px; }
  .m2-section-bar h2 { font-size:clamp(19px,5.4vw,24px); }
  .m2-emblems { margin-top:18px; }
  .m2-three-points,.m2-facts { grid-template-columns:1fr; }
  .m2-case-panel,.m2-demo-panel { padding:20px 17px; border-radius:18px; }
  .m2-feedback,.m2-contact,.m2-facts-section { padding:22px 17px; border-radius:20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .m2-pillar-card,.m2-phone-link,.m2-phone-sway { transition:none; }
  .m2-pillar-card:hover,
  .m2-phone-link:hover,
  .m2-phone-link:focus-visible,
  .m2-phone-link:active { transform:none; }
  .m2-phone-hint { animation:none; }
  .m2-phone-sway.is-swinging { animation:none; }
}

/* SVG rating stars rounded to the nearest half star, like the demos'
   components/rating-stars.tsx (tests/customer-rating.test.mjs). */
.svg-stars { display:inline-flex; gap:3px; letter-spacing:0; vertical-align:middle; }
.svg-stars svg { width:22px; height:22px; overflow:visible; }
.svg-stars .star-empty, .svg-stars .star-full { stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; }
.svg-stars .star-empty { fill:currentColor; fill-opacity:.18; }
.svg-stars .star-full { fill:currentColor; }