/* awuu.app-kotisivu. Mitat ja rytmi Figma-luonnoksesta (RWMxoTTeGJpsiQE6ifla5t):
   desktop 1440, osioiden pystyväli 128, sivumarginaali 56, sisältö max 1328.
   Tokenit (--sand, --cream, --orange, --forest, --ink, fontit) tulevat site.css:stä. */

:root {
  --wrap: 1328px;
  --sec-y: clamp(64px, 9vw, 128px);
  --r-lg: 28px;
  --r-md: 16px;
  --phone-w: 380px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.2, 1.4, .4, 1);
}

body.home { background: var(--cream); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec-y); }

/* Etiketit: vaalealla taustalla metsänvihreä (8,5:1), tummalla oranssi. */
.home .tag { font-size: 12px; line-height: 18px; letter-spacing: .16em; }
.tag--forest { color: var(--forest); }
.tag--orange { color: var(--orange); }
.tag--muted  { color: var(--ink-45); }

.home h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.13;
  letter-spacing: -.02em;
  margin: 8px 0 0;
  text-wrap: balance;
}
.home h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 6px 0 0;
}
.home .lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink); max-width: 720px; margin-top: 16px; }
.home p { color: var(--ink); }

/* ─── napit ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 32px; border-radius: 999px;
  font-family: var(--body); font-weight: 600; font-size: 16px;
  text-decoration: none; transition: transform .18s var(--ease-out), background .18s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--orange); color: var(--cream); }
.btn--primary:hover { background: #E55D01; }
.btn--ghost { color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: rgba(36, 30, 26, .06); }

/* ─── ylätunniste heron päällä ─────────────────────────────── */

.topbar--hero {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  max-width: none; padding: 0 20px; height: 61px;
  align-items: center; background: var(--cream);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--orange); font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.topbar--hero nav a { font-family: var(--body); font-size: 16px; letter-spacing: 0; color: var(--forest); }
.topbar--hero nav a:hover { color: var(--ink); }

/* ─── hero ─────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 780px; background: var(--sand);
}
.hero-photo, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 60% 50%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(230,226,217,1) 0%, rgba(230,226,217,.88) 40%, rgba(230,226,217,0) 75%);
}
.hero-copy {
  position: relative; z-index: 2;
  max-width: 880px; padding: 296px 0 0 56px;
}
.hero-copy .tag { margin-bottom: 24px; }
.home h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -.03em;
  color: var(--forest); text-wrap: balance;
}
.hero-sub { margin-top: 24px; font-size: 20px; line-height: 1.6; max-width: 620px; color: var(--ink); }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.hero-copy .tag--muted { margin-top: 24px; }

/* Puhelinkehys on CSS:ää, ei kuvaa (Figma: PhoneMock). */
.phone {
  width: var(--phone-w); aspect-ratio: 380 / 798;
  background: var(--ink); border-radius: 44px; padding: 12px;
  box-shadow: 0 30px 60px -20px rgba(36, 30, 26, .45);
}
.phone .screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: var(--sand); }
.phone .screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.hero-phone {
  position: absolute; z-index: 2; right: 100px; top: 200px;
  --phone-w: 300px;
  transform: rotate(-6deg);
  transform-origin: top left;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.phone--float { animation: float 6s ease-in-out infinite; }

/* ─── Miksi Awuu ───────────────────────────────────────────── */

/* Hiekkakaista: katkaisee kerman heti heron jälkeen. Tekstivärit säilyvät —
   muste 11,7:1, muste-70 % ~6:1 ja metsänvihreä etiketti 6,9:1 hiekalla. */
.sec--why { background: var(--sand); }
.sec--why h2, .sec--why .why-col h3 { color: var(--forest); }
.sec--why .why-col { border-right-color: rgba(36, 30, 26, .18); }

/* Palstat jakavat rivit (subgrid): etiketit, otsikot ja leipätekstit ovat
   samalla korkeudella riippumatta siitä, rivittyykö otsikko yhdelle vai
   kahdelle riville. */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr;
  column-gap: 48px; margin-top: 56px;
}
.why-col {
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start;
  padding-right: 48px; border-right: 1px solid var(--ink-12);
}
.why-col:last-child { border-right: 0; padding-right: 0; }
.why-col h3 { margin-top: 6px; align-self: start; }
.why-col p:not(.tag) { margin-top: 12px; color: var(--ink-70); font-size: 16px; line-height: 1.62; }
@supports not (grid-template-rows: subgrid) {
  .why-col h3 { min-height: 60px; }
}

/* ─── Näin se toimii: vuorottelevat kaistat ─────────────────── */

.sec--steps { --gut: clamp(20px, 5vw, 120px); }
.lanes { position: relative; margin-top: 96px; display: grid; gap: 96px; }
/* Puhelimen ja tekstin väliin jää aina vähintään 200 px, jotta kelluvat palat
   (ulottuvat max 150 px puhelimen reunan yli) eivät osu tekstiin. */
.lane {
  position: relative; display: grid; grid-template-columns: var(--phone-w) minmax(0, 520px);
  justify-content: space-between; column-gap: 200px; align-items: center; min-height: 798px;
}
.lane--2 { grid-template-columns: minmax(0, 520px) var(--phone-w); }
.lane-phone { position: relative; }
.lane-text { position: relative; z-index: 1; }
.lane-text h3 {
  font-weight: 800; font-size: 36px; line-height: 42px; letter-spacing: -.02em;
  margin-top: 20px;
}
.lane-body { margin-top: 20px; font-size: 20px; line-height: 1.6; }

.facts { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.facts li { position: relative; padding-left: 28px; font-size: 16px; line-height: 26px; }
.facts li::before { content: "—"; position: absolute; left: 0; }

.numeral {
  position: absolute; top: 60px; z-index: 0;
  font-family: var(--display); font-weight: 800; font-size: 240px; line-height: 200px; letter-spacing: -.04em;
  color: var(--sand); user-select: none; pointer-events: none;
}
.lane--1 .numeral, .lane--3 .numeral { left: calc(100% - 560px); }
.lane--2 .numeral { left: 0; }

/* Kelluvat UI-palat puhelimen reunan yli (Figma: Pala · …). */
.chip {
  position: absolute; z-index: 2; border-radius: 20px;
  box-shadow: 0 18px 40px rgba(36, 30, 26, .22);
}
.chip--size { width: 340px; height: auto; left: calc(var(--phone-w) - 200px); top: 540px; }
.chip--pill { width: 340px; height: auto; left: -140px; top: 560px; }
.chip--bubble { left: calc(var(--phone-w) - 180px); top: 300px; width: 330px; }

/* Viestikupla (natiivi, muokattava). */
.bubble {
  display: flex; align-items: flex-end; gap: 6px;
  background: #fff; color: var(--ink);
  padding: 12px 16px; border-radius: 20px 20px 20px 6px;
  font-size: 16px; line-height: 22px;
  box-shadow: 0 18px 40px rgba(36, 30, 26, .22);
}
.bubble time { font-size: 11px; color: rgba(36, 30, 26, .5); white-space: nowrap; }
.bubble--mine { background: var(--orange); color: var(--cream); border-radius: 20px 20px 6px 20px; }
.bubble--sm { font-size: 14px; line-height: 20px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; box-shadow: 0 8px 20px rgba(36, 30, 26, .14); }

/* Reitti askelten välillä: sama katkoviiva kuin karttakortissa. */
/* Reitti venyy vaakasuunnassa puhelinten keskipisteiden väliin (rivin leveys
   miinus puhelin), jotta päätepisteet osuvat puhelimiin kaikilla leveyksillä. */
.lanes-route {
  position: absolute; left: calc(var(--phone-w) / 2); top: 798px;
  width: calc(100% - var(--phone-w)); height: 990px;
  overflow: visible; pointer-events: none; z-index: 0;
}
.route-path { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 10; }

/* Sisääntulo: puhelin omalta puoleltaan, teksti vastakkaiselta, pala viiveellä. */
.lane .lane-phone, .lane .lane-text { opacity: 0; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.lane--1 .lane-phone, .lane--3 .lane-phone { transform: translateX(-40px); }
.lane--1 .lane-text,  .lane--3 .lane-text  { transform: translateX(40px); }
.lane--2 .lane-phone { transform: translateX(40px); }
.lane--2 .lane-text  { transform: translateX(-40px); }
.lane .chip { opacity: 0; transform: scale(.9) translateY(12px); transition: opacity .5s var(--pop) .45s, transform .5s var(--pop) .45s; }
.lane.in-view .lane-phone, .lane.in-view .lane-text { opacity: 1; transform: none; }
.lane.in-view .chip { opacity: 1; transform: none; }
/* Kumpikin reittipätkä piirtyy erikseen: pätkä 2 kun kaista 2 tulee näkyviin,
   pätkä 3 kun kaista 3 (home.js lisää .draw-luokan). Piirto tehdään yhtenäisenä
   viivana ja katkoviiva kytketään päälle vasta piirron päätyttyä. */
.lanes-route .route-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-out; }
.lanes-route .route-path.draw { stroke-dashoffset: 0; animation: route-dash 0s linear 1.6s forwards; }
@keyframes route-dash { to { stroke-dasharray: .012 .01; } }

/* ─── Kortit (Tapaamisen jälkeen, Turvallisuus) ─────────────── */

.cards { display: grid; gap: 24px; margin-top: 64px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--sand); border-radius: var(--r-lg); padding: 40px 36px; display: grid; gap: 16px; align-content: start; }
.card h3 { margin: 0; }
.card p:not(.tag) { margin: 0; color: var(--ink-70); font-size: 16px; line-height: 1.62; }
.card .tag { margin: 0; }
.card-detail { margin-top: 8px; }
.card-detail--img { border-radius: var(--r-md); overflow: hidden; background: var(--cream); }
.card-detail--img img { display: block; width: 100%; height: auto; }

/* ─── Kartta ja etäisyys ───────────────────────────────────── */

.sec--map { background: var(--forest); color: var(--cream); }
.sec--map h2, .sec--map .lead, .sec--map .facts li, .sec--map p { color: var(--cream); }
.map-grid { display: grid; grid-template-columns: 520px minmax(0, 728px); justify-content: space-between; align-items: center; gap: 48px; }
.map-text .facts { margin-top: 28px; }

.mapcard {
  position: relative; width: 100%; max-width: 728px; aspect-ratio: 728 / 540;
  background: var(--cream); border-radius: var(--r-lg); overflow: hidden;
  container-type: inline-size; color: var(--ink);
}
.mapcard-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-ring { fill: rgba(12, 84, 70, .07); stroke: rgba(12, 84, 70, .55); stroke-width: 1.5; stroke-dasharray: 6 6; transform-origin: 230px 280px; }
.mc-line { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mc-dot { fill: var(--orange); stroke: var(--cream); stroke-width: 3; transform-origin: 468px 280px; }

/* Kaikki kortin HTML-elementit asemoidaan Figma-koordinaateilla (728×540)
   ja skaalataan kontin leveydellä: 1 Figma-px = 100cqw/728. */
.mapcard > [style*="--x"] { position: absolute; left: calc(var(--x) * 100cqw / 728); top: calc(var(--y) * 100cqw / 728); transform: translate(-50%, -50%); }
.mc-avatar { width: calc(56 * 100cqw / 728); height: calc(56 * 100cqw / 728); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 calc(3 * 100cqw / 728) var(--cream); }
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-pill, .mc-bubble { white-space: nowrap; }
.mc-pill {
  background: var(--cream); color: var(--ink); border-radius: 999px;
  padding: calc(5 * 100cqw / 728) calc(10 * 100cqw / 728);
  font-weight: 500; font-size: calc(14 * 100cqw / 728); line-height: 1.55;
  box-shadow: 0 4px 12px rgba(36, 30, 26, .12);
}
.mc-bubble { padding: calc(6 * 100cqw / 728) calc(10 * 100cqw / 728); font-size: calc(13 * 100cqw / 728); line-height: 1.25; border-radius: calc(14 * 100cqw / 728); box-shadow: 0 6px 16px rgba(36, 30, 26, .14); }
.mc-bubble.bubble { display: block; }
.mc-event {
  position: absolute; left: calc(512 * 100cqw / 728); top: calc(217 * 100cqw / 728);
  width: calc(196 * 100cqw / 728); background: var(--orange); color: var(--cream);
  border-radius: calc(18 * 100cqw / 728); padding: calc(14 * 100cqw / 728) calc(16 * 100cqw / 728);
  display: grid; gap: calc(8 * 100cqw / 728);
  box-shadow: 0 10px 24px rgba(255, 104, 1, .28);
}
.mc-event .tag { color: var(--cream); font-size: calc(12 * 100cqw / 728); line-height: 1.5; }
.mc-event-title { font-weight: 600; font-size: calc(15 * 100cqw / 728); line-height: calc(20 * 100cqw / 728); color: var(--cream); }
.mc-event-row { display: flex; align-items: center; gap: calc(10 * 100cqw / 728); font-size: calc(12 * 100cqw / 728); font-weight: 500; }
.mc-stack { display: flex; }
.mc-stack img { width: calc(24 * 100cqw / 728); height: calc(24 * 100cqw / 728); border-radius: 50%; box-shadow: 0 0 0 2px var(--orange); margin-right: calc(-8 * 100cqw / 728); }
.mc-legend { position: absolute; left: calc(40 * 100cqw / 728); bottom: calc(28 * 100cqw / 728); font-size: calc(12 * 100cqw / 728); }

/* Sekvenssi (~3,5 s), käynnistyy kerran kun kortti tulee näkyviin. */
.mc-avatar, .mc-pill, .mc-bubble, .mc-event, .mc-dot { opacity: 0; }
.mapcard .mc-ring { opacity: 0; transform: scale(.2); }
.mapcard.in-view .mc-a1, .mapcard.in-view .mc-p1 { animation: pop-in .55s var(--pop) 0s forwards; }
.mapcard.in-view .mc-a2, .mapcard.in-view .mc-p2 { animation: pop-in .55s var(--pop) .3s forwards; }
.mapcard.in-view .mc-a3, .mapcard.in-view .mc-p3 { animation: pop-in .55s var(--pop) .6s forwards; }
.mapcard.in-view .mc-ring { animation: ring-in .6s var(--ease-out) .9s forwards; }
.mapcard.in-view .mc-line--1, .mapcard.in-view .mc-line--2, .mapcard.in-view .mc-line--3 { animation: draw 1.4s var(--ease-out) 1.4s forwards; }
.mapcard.in-view .mc-dot { animation: pop-in .4s var(--pop) 2.6s forwards; }
.mapcard.in-view .mc-b1 { animation: pop-in .45s var(--pop) 1.8s forwards; }
.mapcard.in-view .mc-b2 { animation: pop-in .45s var(--pop) 2.2s forwards; }
.mapcard.in-view .mc-b3 { animation: pop-in .45s var(--pop) 2.6s forwards; }
.mapcard.in-view .mc-line--4 { animation: draw .4s var(--ease-out) 2.8s forwards; }
.mapcard.in-view .mc-event { animation: pop-in .55s var(--pop) 3.2s forwards; }
.mapcard .mc-stack img { opacity: 0; }
.mapcard.in-view .mc-stack img { animation: pop-in-plain .4s var(--pop) 3.5s forwards; }
.mapcard.in-view .mc-stack img:nth-child(2) { animation-delay: 3.6s; }
.mapcard.in-view .mc-stack img:nth-child(3) { animation-delay: 3.7s; }
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.mapcard .mc-event, .mapcard .mc-stack img, .mapcard .mc-dot { --tx: 0; }
.mapcard.in-view .mc-event { animation-name: pop-in-plain; }
.mapcard.in-view .mc-stack img { animation-name: pop-in-plain; }
.mapcard.in-view .mc-dot { animation-name: pop-in-plain; }
@keyframes pop-in-plain { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes ring-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ─── CTA ──────────────────────────────────────────────────── */

.sec--cta { background: var(--orange); color: var(--ink); text-align: center; }
.sec--cta h2 { margin: 0 auto; max-width: 700px; }
.sec--cta .lead { margin: 28px auto 0; color: rgba(36, 30, 26, .75); }
.stores { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.store {
  display: grid; text-align: left; gap: 2px;
  min-width: 200px; padding: 12px 22px; border-radius: 14px;
  background: var(--ink); color: var(--cream); text-decoration: none;
}
.store-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.store-name { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.store--soon { opacity: .6; cursor: default; pointer-events: none; }
.stores--soon { margin-top: 28px; }

/* Julkaisukytkin: body[data-launched] valitsee, näkyykö odotuslista vai
   kauppanapit (hero-painike ja CTA-osio). Footerkaista ei riipu tästä. */
body[data-launched="true"] .only-prelaunch { display: none !important; }
body:not([data-launched="true"]) .only-launched { display: none !important; }

/* CTA-osion lomake oranssilla pohjalla */
.sec--cta form.newsletter--cta { max-width: 560px; margin: 32px auto 0; text-align: left; }
.sec--cta .nl-row input[type="email"] { border-color: transparent; }
.sec--cta .nl-row input[type="email"]:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(36, 30, 26, .18); }
.sec--cta .nl-consent { color: rgba(36, 30, 26, .8); }
.sec--cta .nl-msg--ok { color: var(--ink); }
.sec--cta .nl-msg--err { color: #5C1206; }

/* ─── Footer ───────────────────────────────────────────────── */

/* site.css:n footer-sääntö rajaa leveyden 1060 px:iin ja tekee footerista
   flex-laatikon — kotisivulla footer on täysleveä tumma kaista, jonka sisältö
   asemoidaan .wrap-elementissä. */
.home-footer {
  display: block; max-width: none; margin: 0; border-top: 0;
  background: var(--ink); color: var(--cream); padding: 56px 0;
}
.home-footer .wrap {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px 48px;
}
.brand--footer { color: var(--cream); }
.home-footer nav { display: flex; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
.home-footer nav a { font-family: var(--body); font-size: 14px; letter-spacing: 0; color: rgba(252, 250, 238, .8); text-decoration: none; border-bottom: 0; }
.home-footer nav a:hover { color: var(--cream); }
.home-footer .wrap > div { text-align: right; }
.home-footer .langselect-label { color: rgba(252, 250, 238, .55); }
.home-footer .langselect { color: rgba(252, 250, 238, .85); background: transparent; border-color: rgba(252, 250, 238, .3); }
.home-footer .langselect:hover { color: var(--cream); border-color: var(--orange); }
.topbar--hero .langselect { background: rgba(252, 250, 238, .85); }
.home-footer .colophon { color: rgba(252, 250, 238, .5); margin-top: 10px; }

/* ─── Responsiivisuus ──────────────────────────────────────── */

@media (max-width: 1200px) {
  .hero-copy { padding-left: var(--gut); }
  .hero-phone { right: 24px; }
  .lane, .lane--2 { grid-template-columns: var(--phone-w) minmax(0, 1fr); column-gap: 48px; }
  .lane--2 .lane-text { order: 2; }
  .lane--2 .lane-phone { order: 1; }
  .numeral { font-size: 180px; line-height: 150px; }
  .lane--1 .numeral, .lane--3 .numeral, .lane--2 .numeral { left: calc(var(--phone-w) + 8px); }
  .lanes-route, .chip { display: none; }
  .map-grid { grid-template-columns: 1fr; }
  .cards--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-phone { display: none; }
  .why-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; }
  .why-col { grid-template-rows: auto; grid-row: auto; padding-right: 0; border-right: 0; padding-bottom: 32px; border-bottom: 1px solid rgba(36, 30, 26, .18); }
  .why-col:last-child { border-bottom: 0; padding-bottom: 0; }
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
  .lanes { gap: 64px; margin-top: 64px; }
  .lane, .lane--2 { grid-template-columns: 1fr; min-height: 0; gap: 24px; }
  .lane--2 .lane-text { order: 1; }
  .lane--2 .lane-phone { order: 2; }
  .lane .lane-text { order: 1; }
  .lane .lane-phone { order: 2; justify-self: center; --phone-w: 280px; }
  .numeral { display: none; }
  .chip { display: none; }
  .lane .lane-phone, .lane .lane-text { transform: none; }
  .lane-text h3 { font-size: 28px; line-height: 32px; }
  .lane-body { font-size: 16px; }
  .mc-bubble { display: none !important; }
}

@media (max-width: 720px) {
  .hero { min-height: 680px; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(230,226,217,.9) 0%, rgba(230,226,217,0) 12%, rgba(230,226,217,0) 42%, rgba(230,226,217,.96) 50%, rgba(230,226,217,1) 100%);
  }
  .hero-copy { padding: 332px 24px 40px; }
  .hero-copy .tag { margin-bottom: 16px; }
  .home h1 { font-size: 40px; line-height: 44px; }
  .hero-sub { font-size: 16px; margin-top: 16px; }
  .topbar--hero { background: transparent; padding: 22px 24px; height: auto; }
  .topbar--hero nav { display: none; }
  .brand img { width: 36px; height: 36px; }
  .home-footer .wrap { grid-template-columns: 1fr; }
  .home-footer nav { justify-content: flex-start; }
  .home-footer .wrap > div { text-align: left; }
}

/* Tuotekuva-osio mobiilissa: kartta-puhelin heron alla (Figma: Tuotekuva (mobile)). */
.hero-phone--mobile { display: none; }
@media (max-width: 900px) {
  .hero-phone--mobile { display: flex; justify-content: center; height: 400px; overflow: hidden; padding-top: 48px; background: var(--sand); }
  .hero-phone--mobile .phone { --phone-w: 280px; width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .phone--float { animation: none; }
  .lane .lane-phone, .lane .lane-text, .lane .chip { opacity: 1; transform: none; transition: none; }
  .lanes-route .route-path { stroke-dashoffset: 0; stroke-dasharray: .012 .01; transition: none; animation: none; }
  .mc-avatar, .mc-pill, .mc-bubble, .mc-event, .mc-dot, .mapcard .mc-ring, .mapcard .mc-stack img { opacity: 1; animation: none !important; transform: none; }
  .mapcard > [style*="--x"] { transform: translate(-50%, -50%); }
  .mc-line { stroke-dashoffset: 0; animation: none !important; }
}