/* ORDER. EARN. REPEAT. — the app section (partials/app-section.njk).
   Shared by the home page and the location pages; depends only on site.css. */

/* ---------- section + layout ---------- */
.cr-app {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 60px 0;
}
.cr-app-bg {
  position: absolute;
  inset: 0;
  background: url("/img/home/app-brush-bg.webp") center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.cr-app-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
}
.cr-app-phone { display: flex; justify-content: center; align-items: center; }

/* ---------- text column ---------- */
.cr-app-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(-3deg);
  transform-origin: center center;
}
.cr-app-h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(4.5rem, 9vw, 7.8rem);
  line-height: 0.88;
  word-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}
.cr-app-line { display: block; line-height: 0.95; white-space: nowrap; }
.cr-app-black { color: var(--black); }
.cr-app-yellow { color: var(--gold-on-light); }

.cr-app-features { display: flex; gap: 32px; align-items: center; margin: 0 0 36px; }
.cr-app-feat-divider { width: 1px; height: 60px; background: rgba(0, 0, 0, .2); flex-shrink: 0; }
.cr-app-feature { display: flex; align-items: center; gap: 12px; }
.cr-app-feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  flex-shrink: 0;
}
.cr-app-feat-icon svg { width: 22px; height: 22px; fill: none; }
.cr-app-feat-label {
  font-family: var(--condensed);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--black);
}

.cr-app-stores { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cr-app-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--black);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cr-app-store:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.cr-app-store svg { width: 30px; height: 30px; flex-shrink: 0; }
.cr-app-store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.cr-app-store-small { font-family: Helvetica, sans-serif; font-size: 0.62rem; letter-spacing: 0.02em; margin-bottom: 2px; }
.cr-app-store-big { font-family: Helvetica, sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- entrance (main.js adds .is-revealing) ---------- */
[data-cr-section-anim].cr-app .cr-app-h2,
[data-cr-section-anim].cr-app .cr-app-features,
[data-cr-section-anim].cr-app .cr-app-feature,
[data-cr-section-anim].cr-app .cr-app-stores {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease-out, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-cr-section-anim].cr-app .cr-app-feat-divider { opacity: 0; transition: opacity 0.6s ease-out; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-h2 { opacity: 1; transform: none; transition-delay: 420ms; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-features { opacity: 1; transform: none; transition-delay: 640ms; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-feature:nth-child(1) { opacity: 1; transform: none; transition-delay: 720ms; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-feature:nth-child(3) { opacity: 1; transform: none; transition-delay: 820ms; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-feature:nth-child(5) { opacity: 1; transform: none; transition-delay: 920ms; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-feat-divider:nth-child(2) { opacity: 1; transition-delay: 770ms; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-feat-divider:nth-child(4) { opacity: 1; transition-delay: 870ms; }
[data-cr-section-anim].cr-app.is-revealing .cr-app-stores { opacity: 1; transform: none; transition-delay: 1020ms; }

/* ---------- iPhone frame (.ps-phone) ---------- */
@keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes phoneRise {
  0% { transform: translateY(320px) rotateX(58deg) rotateZ(-10deg) scale(.9); }
  100% { transform: translateY(-10px) rotateX(2deg) rotateY(-14deg) rotateZ(2deg) scale(1.02); }
}
@keyframes shadowIn {
  0% { opacity: 0; transform: translate(-50%, 320px) scale(1.1); }
  100% { opacity: .6; transform: translate(-50%, 270px) scale(.62, .8); }
}
@keyframes apKen { from { transform: scale(1); } to { transform: scale(1.08) translate(-2%, 1%); } }
@keyframes apPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes apChip2 {
  0% { opacity: 0; transform: translateY(10px) scale(.8); visibility: visible; }
  15% { opacity: 1; transform: translateY(-6px) scale(1); }
  75% { opacity: 1; transform: translateY(-34px); }
  100% { opacity: 0; transform: translateY(-52px); visibility: hidden; }
}

.ps-phone {
  --scale: 1;
  position: relative;
  width: calc(340px * var(--scale));
  height: calc(730px * var(--scale));
  font-family: -apple-system, BlinkMacSystemFont, 'DM Sans', 'Segoe UI', sans-serif;
}
.ps-phone > .phone-float {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  transform-origin: 0 0;
  scale: var(--scale);
}
.phone-float { position: relative; perspective: 1300px; opacity: 0; transition: opacity .7s ease; }
.ps-phone.ready .phone-float { opacity: 1; }
.ps-phone.landed .phone-float { animation: phoneFloat 6s ease-in-out .2s infinite; }
.phone {
  position: relative;
  z-index: 2;
  width: 340px;
  margin: 0 auto;
  border-radius: 62px;
  padding: 7px;
  background: linear-gradient(150deg, #2b2b2f 0%, #1c1c1f 35%, #141416 65%, #202023 100%);
  box-shadow: 0 40px 80px rgba(10, 10, 14, .38), inset 0 0 0 1.5px #3a3a3f, inset 0 0 0 3px #0b0b0d, inset 0 2px 4px rgba(255, 255, 255, .12), inset 0 -2px 4px rgba(0, 0, 0, .5);
  will-change: transform;
  transform: translateY(320px) rotateX(58deg) rotateZ(-10deg) scale(.9);
  transform-style: preserve-3d;
}
.ps-phone.ready .phone { animation: phoneRise 2s cubic-bezier(.22, 1, .36, 1) .1s forwards; }
.phone::before, .phone::after, .phone-back { position: absolute; inset: 0; border-radius: 62px; pointer-events: none; }
.phone::before { content: ""; background: linear-gradient(145deg, #232326, #161618); transform: translateZ(-15px); }
.phone::after { content: ""; background: linear-gradient(145deg, #1d1d20, #121214); transform: translateZ(-30px); }
.phone-back { background: linear-gradient(145deg, #1b1b1e, #111113); transform: translateZ(-44px); box-shadow: 0 30px 60px rgba(10, 10, 14, .4), inset 0 0 0 1.5px #2c2c30; }
.phone-btn { position: absolute; width: 4px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14), inset 0 -1px 1px rgba(0, 0, 0, .6); }
.btn-power { right: -4px; top: 200px; height: 92px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #2e2e32, #151517); }
.btn-cam { right: -3px; top: 372px; height: 58px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #1a1a1d, #0c0c0e); box-shadow: inset 0 0 0 1px #3c3c42, inset 0 1px 2px rgba(255, 255, 255, .12); }
.btn-mute { left: -4px; top: 150px; height: 32px; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #2e2e32, #151517); }
.btn-vol-up { left: -4px; top: 212px; height: 58px; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #2e2e32, #151517); }
.btn-vol-dn { left: -4px; top: 282px; height: 58px; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #2e2e32, #151517); }
.phone-bottom {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 0;
  height: 44px;
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, #26262a, #141416);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-bottom::before { content: ""; width: 62px; height: 9px; border-radius: 6px; background: #17171b; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .2); }
.phone-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#050506 2px, transparent 2.4px);
  background-size: 11px 44px;
  background-position: center;
  -webkit-mask: linear-gradient(90deg, #000 0 32%, transparent 32% 68%, #000 68%);
  mask: linear-gradient(90deg, #000 0 32%, transparent 32% 68%, #000 68%);
}
.phone-glare {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: 55px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .08) 28%, rgba(255, 255, 255, 0) 46%);
  opacity: .32;
}
.phone-shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 18, 31, .4), rgba(20, 18, 31, 0));
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, 270px) scale(.6, .8);
}
.ps-phone.ready .phone-shadow { animation: shadowIn 2s cubic-bezier(.22, 1, .36, 1) .1s forwards; }
.phone-screen {
  background: #f7f4ee;
  border-radius: 55px;
  overflow: hidden;
  height: 700px;
  position: relative;
  text-align: left;
  transform: translateZ(1px);
  transform-style: flat;
  color: #1f2a44;
}
.phone-screen > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .45s cubic-bezier(.23, 1, .32, 1);
  transition-delay: calc(var(--i, 0) * .07s);
}
.ps-phone.landed .phone-screen > * { opacity: 1; transform: none; }
.phone-screen > .ap-island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 82px;
  height: 26px;
  margin-left: -41px;
  border-radius: 18px;
  background: #050507;
  z-index: 9;
  opacity: 1;
  transform: none;
  transition: width .45s cubic-bezier(.34, 1.3, .64, 1), margin-left .45s cubic-bezier(.34, 1.3, .64, 1);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .04);
}
.ap-island i {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3d5c 0 18%, #0d1422 40%, #06080d 70%);
  box-shadow: inset 0 0 0 1.5px #111521, 0 0 0 1px #0a0a0d;
}
.ap-island i::after { content: ""; position: absolute; left: 3px; top: 2.5px; width: 2.5px; height: 2.5px; border-radius: 50%; background: rgba(150, 190, 255, .55); }
.phone-screen > .ap-island.live { width: 112px; margin-left: -56px; }
.ap-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 32px 6px 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #1f2a44;
}
.ap-status .sig { display: flex; gap: 5px; align-items: center; }
.ap-status .sig svg { display: block; height: 11px; }

/* ---------- Cocky Rooster app skin (.cr-ap) ---------- */
.cr-app-phone .cr-ap {
  --scale: 1.15;
  --ap-slab: 'Rockwell', 'Roboto Slab', 'Arvo', 'Courier New', serif;
  --ap-yellow: #FBC003;
  --ap-ink: #141923;
  height: calc(748px * var(--scale));
}
.cr-ap .phone { padding: 10px; border-radius: 64px; }
.cr-ap .phone::before { transform: translateZ(-20px); }
.cr-ap .phone::after { transform: translateZ(-40px); }
.cr-ap .phone-back { transform: translateZ(-58px); }
.cr-ap .phone-bottom { height: 58px; }
.cr-ap .phone-screen { background: #fff; color: #000; display: flex; flex-direction: column; border-radius: 54px; }
.cr-ap .phone-screen > * { transition-delay: calc(var(--i, 0) * .09s); }
.cr-ap .ap-status { color: #000; flex: none; padding: 17px 34px 14px 38px; }
.cr-ap .ap-bar {
  flex: none;
  height: 54px;
  background: var(--ap-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 16px;
}
.cr-ap .ap-logo { width: 38px; height: 38px; border-radius: 50%; background: #141923 url("/img/brand/logomark-rev.png") center / 72% no-repeat; box-shadow: 0 0 0 1.5px #fff; }
.cr-ap .ap-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 14px;
  border-radius: 16px;
  background: var(--ap-yellow);
  color: #111;
  font: 500 12.5px/1 var(--ap-slab);
}
.cr-ap .ap-login i { width: 20px; height: 20px; display: block; }
.cr-ap .ap-login svg { display: block; width: 100%; height: 100%; }
.cr-ap .ap-hero {
  flex: none;
  padding: 10px 11px 12px;
  background: linear-gradient(118deg, transparent 42%, rgba(255, 255, 255, .07) 43%, transparent 44%), linear-gradient(152deg, transparent 68%, rgba(255, 255, 255, .05) 69%, transparent 70.5%), radial-gradient(110% 70% at 10% 100%, #2a2b2f, #141518 65%);
}
.cr-ap .ap-hero-card { height: 208px; border-radius: 17px; overflow: hidden; position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); background: #222; }
.cr-ap .ap-hero-card::before { content: ""; position: absolute; inset: 0; background: url("/img/home/app-hero-card.webp") center 60% / cover no-repeat; animation: apKen 14s ease-in-out infinite alternate; }
.cr-ap .ap-hero-card b {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  text-align: center;
  color: #fff;
  font: 800 21px/1 var(--body);
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .6);
}
.cr-ap .ap-tiles {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 11px;
  padding: 10px 12px 12px;
  background: #1a1b1e;
  align-content: start;
}
.cr-ap .ap-tile {
  background: var(--ap-yellow);
  border-radius: 11px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  color: #111;
  transition: transform .18s ease, filter .18s ease;
}
.cr-ap .ap-tile.press { transform: scale(.94); filter: brightness(.88); }
.cr-ap .ap-tile i { width: 40px; height: 40px; display: block; }
.cr-ap .ap-tile svg { display: block; width: 100%; height: 100%; }
.cr-ap .ap-tile span { font: 400 13px/1.2 var(--ap-slab); text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.cr-ap .ap-chip {
  position: absolute;
  left: 14px;
  bottom: 60px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: 700 11px/1 var(--body);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  visibility: hidden;
}
.cr-ap .ap-chip.go { animation: apChip2 2.2s cubic-bezier(.2, .8, .2, 1) forwards; visibility: visible; }
.cr-ap .ap-tabs {
  flex: none;
  height: 54px;
  background: #fdfdfd;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 7px 6px 0;
  border-top: 1px solid #ececec;
}
.cr-ap .ap-tab {
  position: relative;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  transition: color .3s;
  color: #6b6b6b;
}
.cr-ap .ap-tab.on { color: #0a66c2; }
.cr-ap .ap-tab.on::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: #0a66c2; }
.cr-ap .ap-tab i { width: 22px; height: 22px; display: block; position: relative; }
.cr-ap .ap-tab svg { display: block; width: 100%; height: 100%; }
.cr-ap .ap-tab span { font: 400 7.5px/1 var(--ap-slab); text-transform: uppercase; letter-spacing: .03em; }
.cr-ap .ap-tab.badge i::after {
  content: "1";
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff3b30;
  color: #fff;
  font: 700 9px/15px var(--body);
  text-align: center;
  animation: apPop .35s cubic-bezier(.34, 1.56, .64, 1);
}
.cr-ap .ap-url {
  flex: none;
  height: 62px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid #e6e6e6;
}
.cr-ap .ap-url::after { content: ""; width: 118px; height: 5px; border-radius: 3px; background: #111; }
.cr-ap .ap-url span { font: 600 12px/1 -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; color: #111; letter-spacing: -.01em; }

/* Dynamic Island: Live Activity expands over the status bar, then settles into a compact pill */
.cr-ap .phone-screen > .ap-island { height: 26px; transition: width .5s cubic-bezier(.34, 1.3, .64, 1), margin-left .5s cubic-bezier(.34, 1.3, .64, 1), height .5s cubic-bezier(.34, 1.3, .64, 1); }
.cr-ap .ap-island i { z-index: 2; }
.cr-ap .ap-live {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  opacity: 0;
  transition: opacity .25s;
  white-space: nowrap;
  overflow: hidden;
}
.cr-ap .ap-live em { font-style: normal; font-size: 15px; line-height: 1; }
.cr-ap .ap-live b { font: 700 9.5px/1 var(--body); }
.cr-ap .ap-live small { font: 500 8px/1 var(--body); color: #9bd1ff; margin-left: auto; }
.cr-ap .ap-island:not(.live):not(.compact) .ap-live { opacity: 0; transition-delay: 0s; }
.cr-ap .phone-screen > .ap-island.live { width: 232px; margin-left: -116px; height: 36px; }
.cr-ap .ap-island.live i { opacity: 0; }
.cr-ap .ap-island.live .ap-live { opacity: 1; transition-delay: .3s; }
.cr-ap .ap-status > span { transition: opacity .28s ease, transform .28s ease; }
.cr-ap .ap-island.live ~ .ap-status > span { opacity: 0; transform: scale(.86); }
.cr-ap .phone-screen > .ap-island.compact { width: 124px; margin-left: -62px; height: 26px; }
.cr-ap .ap-island.compact i { opacity: 1; right: auto; left: 50%; margin-left: -5px; }
.cr-ap .ap-island.compact .ap-live { opacity: 1; transition-delay: .12s; left: 9px; right: 9px; justify-content: space-between; }
.cr-ap .ap-island.compact .ap-live em { font-size: 13px; }
.cr-ap .ap-island.compact .ap-live b { display: none; }
.cr-ap .ap-island.compact .ap-live small { margin-left: 0; color: #fff; font-size: 7.5px; }

/* notification banner */
.cr-ap .phone-screen > .ap-note {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 52px;
  z-index: 8;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(245, 245, 247, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-90px);
  transition: transform .55s cubic-bezier(.2, .9, .3, 1.2), opacity .3s;
}
.cr-ap .phone-screen > .ap-note.in { opacity: 1; transform: translateY(0); }
.cr-ap .phone-screen > .ap-note.out { opacity: 0; transform: translateY(-90px); transition: transform .4s ease-in, opacity .3s; }
.cr-ap .ap-note-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #141923 url("/img/brand/logomark-rev.png") center / 70% no-repeat; }
.cr-ap .ap-note-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: #111; }
.cr-ap .ap-note-tx b { font: 700 11px/1.1 var(--body); display: flex; justify-content: space-between; align-items: baseline; }
.cr-ap .ap-note-tx small { font: 500 9px/1 var(--body); color: #8a8a8e; }
.cr-ap .ap-note-tx i { font: 500 10.5px/1.3 var(--body); font-style: normal; color: #333; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .ps-phone .phone-float { opacity: 1; animation: none; }
  .ps-phone .phone { transform: rotateY(-14deg) rotateX(2deg); animation: none; }
  .ps-phone .phone-screen > * { opacity: 1; transform: none; transition: none; }
  .ps-phone .phone-shadow { animation: none; opacity: .6; }
  .cr-ap .ap-hero-card::before { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cr-app { padding: 40px 0; }
  .cr-app-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 24px; }
  .cr-app-text { order: 1; }
  .cr-app-h2 { font-size: clamp(3.9rem, 15vw, 6rem); }
  .cr-app-line { white-space: normal; }
  .cr-app-features { justify-content: flex-start; gap: 18px; }
  .cr-app-stores { justify-content: flex-start; }
  .cr-app-phone { order: 2; width: 100%; overflow: visible; }
  .cr-app-phone .cr-ap { --scale: .92; }
}
@media (max-width: 560px) {
  .cr-app-features { justify-content: space-around; gap: 6px; width: 100%; }
  .cr-app-feature { flex-direction: column; text-align: center; gap: 10px; flex: 1 1 0; min-width: 0; padding: 0 4px; }
  .cr-app-feat-divider { height: 64px; background: rgba(0, 0, 0, .25); align-self: center; }
  .cr-app-feat-label { font-size: 0.7rem; letter-spacing: 0.08em; line-height: 1.1; }
  .cr-app-feat-icon { width: 40px; height: 40px; }
  .cr-app-stores { gap: 10px; }
  .cr-app-store { padding: 8px 14px; justify-content: center; }
  .cr-app-store svg { width: 24px; height: 24px; }
  .cr-app-store-small { font-size: 0.55rem; }
  .cr-app-store-big { font-size: 0.95rem; }
}
@media (max-width: 400px) {
  .cr-app-phone .cr-ap { --scale: .84; }
}