/* FITRICH Spatial Form v55
   Immersive, borderless brand system shared by the public website and app prototype.
   Official product photography remains replaceable; no fictional packaging is introduced. */

:root {
  --sf-obsidian: #050608;
  --sf-ink: #0c0e12;
  --sf-frost: #f4f5f7;
  --sf-white: #ffffff;
  --sf-cobalt: #245bff;
  --sf-cobalt-deep: #1139b8;
  --sf-ice: #dce6ff;
  --sf-chrome: #aeb5c2;
  --sf-muted: #666e79;
  --sf-x: 0;
  --sf-y: 0;
  --sf-scroll: 0;
  --sf-ease: cubic-bezier(.22,.8,.24,1);
}

html { scroll-behavior: smooth; }
.website-page,
.fitrich-app-page { background: var(--sf-frost); color: var(--sf-ink); }
.website-page *,
.fitrich-app-page * { box-sizing: border-box; }
.website-page img,
.fitrich-app-page img { display: block; }

/* Shared spatial materials */
.website-page .temp-product-placeholder,
.fitrich-app-page .temp-product-placeholder {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.website-page .temp-product-placeholder::before,
.fitrich-app-page .temp-product-placeholder::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(35vw, 25rem);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.95), rgba(157,181,255,.52) 26%, rgba(36,91,255,.18) 52%, transparent 71%);
  filter: blur(3px);
  transform: translate3d(calc(var(--sf-x) * 9px), calc(var(--sf-y) * 9px), 0);
  transition: transform .8s var(--sf-ease);
}
.website-page .temp-product-placeholder::after,
.fitrich-app-page .temp-product-placeholder::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(40vw, 29rem);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border: 1px solid rgba(36,91,255,.24);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(calc(var(--sf-scroll) * .04deg));
  animation: sfOrbit 14s linear infinite;
}
.website-page .temp-product-placeholder-frame,
.fitrich-app-page .temp-product-placeholder-frame {
  border: 0 !important;
  background: linear-gradient(145deg, #20252d, #080a0d 60%, #121723) !important;
  box-shadow: -22px 38px 62px rgba(7,10,15,.28), inset 1px 1px 0 rgba(255,255,255,.16), inset -8px -12px 22px rgba(0,0,0,.42) !important;
  transform: perspective(900px) rotateY(calc(var(--sf-x) * 7deg)) rotateX(calc(var(--sf-y) * -5deg)) translateZ(0);
  transition: transform .9s var(--sf-ease), box-shadow .9s var(--sf-ease);
}
.website-page .temp-product-placeholder-frame::after,
.fitrich-app-page .temp-product-placeholder-frame::after {
  content: "FITRICH";
  position: absolute;
  inset: 10% auto auto 50%;
  translate: -50% 0;
  color: rgba(255,255,255,.74);
  font: 600 clamp(.45rem, .8vw, .72rem)/1 "Space Grotesk", sans-serif;
  letter-spacing: .28em;
}
.website-page .temp-product-placeholder > b,
.fitrich-app-page .temp-product-placeholder > b { letter-spacing: .22em; }

@keyframes sfOrbit { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes sfFloat {
  0%,100% { transform: translate3d(0,0,0) rotate(-.7deg); }
  50% { transform: translate3d(0,-16px,0) rotate(.7deg); }
}
@keyframes sfDrift {
  0%,100% { translate: 0 0; scale: 1; }
  50% { translate: 2.5vw -1.2vw; scale: 1.06; }
}

/* Website — cinematic frame */
.website-page #atmosphere { opacity: .04; }
.website-page .site-header,
.website-page .site-header.scrolled {
  background: rgba(5,6,8,.84);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(1.25);
}
.website-page .site-header nav { border: 0; background: transparent; }
.website-page .hero {
  min-height: 100svh;
  overflow: clip;
  background: var(--sf-obsidian) !important;
  color: #fff !important;
  perspective: 1200px;
}
.website-page .hero-media {
  inset: 0;
  background-position: center 28%;
  filter: saturate(.78) contrast(1.08);
  scale: 1.035;
  transform: translate3d(calc(var(--sf-x) * -10px), calc(var(--sf-y) * -8px + var(--sf-scroll) * .035px), 0);
  transition: transform 1.2s var(--sf-ease);
}
.website-page .hero-media::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 70% 32%, rgba(36,91,255,.28), transparent 25%), radial-gradient(circle at 18% 74%, rgba(120,146,255,.13), transparent 22%);
  mix-blend-mode: screen;
  animation: sfDrift 13s ease-in-out infinite;
}
.website-page .hero-media::after {
  background: linear-gradient(90deg, rgba(2,3,5,.88) 0%, rgba(2,3,5,.52) 36%, rgba(2,3,5,.07) 66%, rgba(2,3,5,.46) 100%), linear-gradient(0deg, rgba(2,3,5,.92), transparent 35%) !important;
}
.website-page .hero-shade {
  background: linear-gradient(0deg, var(--sf-obsidian), transparent 32%) !important;
}
.website-page .hero-copy {
  width: min(58rem, 78vw);
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  box-shadow: none;
  transform: translate3d(calc(var(--sf-x) * 5px), calc(var(--sf-y) * 4px), 30px);
  transition: transform .9s var(--sf-ease);
}
.website-page .hero .eyebrow { color: rgba(255,255,255,.68); }
.website-page .hero .eyebrow .aqua { color: #9db5ff !important; }
.website-page .hero h1 {
  max-width: 8ch;
  color: #fff;
  font-size: clamp(4.5rem, 10.5vw, 10.5rem);
  line-height: .79;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.website-page .hero h1 em { color: #fff !important; text-shadow: 0 14px 48px rgba(0,0,0,.4); }
.website-page .hero-copy > p { max-width: 37rem; color: rgba(255,255,255,.74) !important; font-size: clamp(1rem,1.35vw,1.25rem); }
.website-page .hero .button.primary { background: #fff !important; border-color: #fff !important; color: var(--sf-ink) !important; box-shadow: none; }
.website-page .hero .button.primary:hover { background: var(--sf-cobalt) !important; border-color: var(--sf-cobalt) !important; color: #fff !important; }
.website-page .hero .button.ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.website-page .hero-side { border: 0; background: transparent; color: #fff; box-shadow: none; }
.website-page .hero-side blockquote { color: rgba(255,255,255,.86); }
.website-page .fr-axis i { background: var(--sf-cobalt); }
.website-page .hero-metrics {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.website-page .hero-metrics div { border-color: rgba(255,255,255,.2); background: transparent; }
.website-page .hero-metrics strong { color: #fff !important; }
.website-page .hero-metrics span { color: rgba(255,255,255,.58); }

/* Every section breathes; no card-board grid */
.website-page .section { padding-inline: clamp(1.25rem,5.5vw,6.5rem); }
.website-page .section-head { max-width: 100%; }
.website-page .section-head h2 { font-size: clamp(3.2rem,7vw,8.2rem); line-height: .88; letter-spacing: -.065em; }
.website-page .section-head > p { max-width: 38rem; font-size: clamp(1rem,1.4vw,1.25rem); }
.website-page .modes {
  min-height: 95svh;
  padding-top: clamp(7rem,12vw,11rem);
  background: var(--sf-frost) !important;
  overflow: clip;
}
.website-page .mode-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
  border-top: 1px solid rgba(12,14,18,.14);
}
.website-page .mode-card,
.website-page .mode-card:nth-child(n) {
  min-height: clamp(25rem,43vw,42rem);
  border: 0;
  border-right: 1px solid rgba(12,14,18,.14);
  border-radius: 0;
  background: transparent;
  color: var(--sf-ink);
  box-shadow: none;
  overflow: hidden;
  transition: color .55s var(--sf-ease), transform .55s var(--sf-ease);
}
.website-page .mode-card::before {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .65s var(--sf-ease), transform .9s var(--sf-ease);
  background: radial-gradient(circle at 60% 30%, rgba(36,91,255,.46), transparent 28%), linear-gradient(155deg,#141821,#030406 70%) !important;
}
.website-page .mode-card:hover { color: #fff; transform: translateY(-8px); }
.website-page .mode-card:hover::before { opacity: 1; transform: scale(1); }
.website-page .mode-card h3 { font-size: clamp(2.5rem,4.2vw,5rem); }
.website-page .mode-orbit { border-color: rgba(36,91,255,.34); animation: sfOrbit 18s linear infinite; }

/* Product objects float in an uninterrupted gallery */
.website-page .product-drop {
  position: relative;
  padding-block: clamp(7rem,11vw,12rem);
  background: linear-gradient(180deg,#fff 0%,#edf0f7 70%,#fff 100%) !important;
  overflow: clip;
}
.website-page .product-drop::before {
  content: "";
  position: absolute;
  width: 44vw;
  aspect-ratio: 1;
  right: -13vw;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(36,91,255,.22),transparent 67%);
  filter: blur(20px);
}
.website-page .product-flow { border: 0; background: transparent; }
.website-page .product-controls button { border: 0; border-bottom: 1px solid var(--sf-ink); background: transparent; }
.website-page .product-rail {
  width: calc(100% + clamp(1.25rem,5.5vw,6.5rem));
  margin-right: calc(clamp(1.25rem,5.5vw,6.5rem) * -1);
  gap: clamp(2rem,5vw,6rem);
  padding: 3rem clamp(1.25rem,5.5vw,6.5rem) 4rem 0;
  scroll-snap-type: x mandatory;
}
.website-page .product-card,
.website-page .product-card:nth-child(n) {
  flex: 0 0 min(61vw, 62rem);
  min-height: min(78svh, 52rem);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--sf-ink);
  box-shadow: none !important;
  overflow: visible;
  scroll-snap-align: start;
  perspective: 1100px;
}
.website-page .product-card::before {
  content: "";
  position: absolute;
  inset: 7% 26% 7% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,91,255,.16), rgba(166,184,236,.08) 43%, transparent 70%);
}
.website-page .product-card:hover { transform: none; }
.website-page .product-art {
  min-height: 68svh;
  border: 0;
  background: transparent !important;
  overflow: visible;
  animation: sfFloat 7s ease-in-out infinite;
}
.website-page .product-meta {
  align-self: end;
  padding: 0 0 8vh;
  border: 0;
  background: transparent;
}
.website-page .product-meta h3 { font-size: clamp(2.5rem,4.5vw,5.6rem); line-height: .88; letter-spacing: -.055em; }
.website-page .product-meta p { max-width: 25rem; color: var(--sf-muted); font-size: 1rem; }
.website-page .product-meta strong { font-size: clamp(1.1rem,1.7vw,1.5rem); }
.website-page .concept-note { border: 0; color: var(--sf-muted); }

/* Hair / Face / Body are visual worlds, not cards */
.website-page .store-guide { padding-inline: 0; padding-bottom: 0; background: #fff !important; }
.website-page .store-guide > .section-head { padding-inline: clamp(1.25rem,5.5vw,6.5rem); }
.website-page .store-category-grid { display: block; }
.website-page .store-category,
.website-page .store-category:nth-child(n) {
  position: relative;
  min-height: min(82svh, 58rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem,6vw,6rem);
  border: 0;
  border-radius: 0;
  background-position: center;
  background-size: cover;
  color: #fff;
  box-shadow: none;
  overflow: clip;
  isolation: isolate;
}
.website-page .store-category::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,rgba(2,3,5,.84),rgba(2,3,5,.12) 68%),linear-gradient(0deg,rgba(2,3,5,.8),transparent 57%);
}
.website-page .store-category::after {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: -2;
  background: inherit;
  background-position: center;
  background-size: cover;
  transition: transform 1.4s var(--sf-ease), filter .8s var(--sf-ease);
}
.website-page .store-category.hair { background-image: url("assets/lifestyle-haircare-v1.jpg"); }
.website-page .store-category.face { background-image: url("assets/lifestyle-facecare-v1.jpg"); }
.website-page .store-category.body { background-image: url("assets/lifestyle-bodycare-v1.jpg"); }
.website-page .store-category:hover::after { transform: scale(1.045); filter: saturate(1.08); }
.website-page .store-category > span { position: absolute; top: 3rem; left: clamp(2rem,6vw,6rem); color: rgba(255,255,255,.72); }
.website-page .store-category > div { max-width: 48rem; }
.website-page .store-category b { color: #9db5ff; }
.website-page .store-category h3 { color: #fff; font-size: clamp(3.3rem,7.2vw,8.5rem); line-height: .86; letter-spacing: -.07em; }
.website-page .store-category p,
.website-page .store-category small { color: rgba(255,255,255,.72); }
.website-page .store-category > i { position: absolute; right: clamp(2rem,6vw,6rem); bottom: clamp(2rem,6vw,6rem); color: #fff; font-size: clamp(2rem,4vw,4rem); }
.website-page .routine-commerce {
  min-height: 62svh;
  margin: 0;
  padding: clamp(4rem,8vw,8rem);
  border: 0;
  border-radius: 0;
  background: var(--sf-cobalt);
  color: #fff;
  box-shadow: none;
}
.website-page .routine-commerce h3 { color: #fff; font-size: clamp(3rem,6vw,7rem); line-height: .88; }
.website-page .routine-commerce p { color: rgba(255,255,255,.75); }
.website-page .routine-commerce-objects i { border-color: rgba(255,255,255,.34); color: #fff; background: transparent; }
.website-page .routine-commerce > a { color: #fff; border-bottom-color: #fff; }

.website-page .store-assurance { border: 0; background: var(--sf-obsidian); }
.website-page .assurance-group > div { border-color: rgba(255,255,255,.12); }
.website-page .content-lab { padding-inline: 0; background: var(--sf-obsidian) !important; }
.website-page .content-lab > .section-head { padding-inline: clamp(1.25rem,5.5vw,6.5rem); }
.website-page .reel-rail { gap: 0; padding: 0; }
.website-page .reel-card,
.website-page .reel-card:nth-child(n) {
  min-width: min(33vw,32rem);
  min-height: 72svh;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.website-page .reel-visual { border: 0; }

/* Routine is an interface floating in open space */
.website-page .routine {
  min-height: 100svh;
  align-items: center;
  background: linear-gradient(145deg,#f8f9fb,#e8ebf2) !important;
  overflow: clip;
}
.website-page .routine::before {
  content: "";
  position: absolute;
  width: 48vw;
  aspect-ratio: 1;
  right: -16vw;
  top: 10%;
  border: 1px solid rgba(36,91,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 6vw rgba(36,91,255,.04),0 0 0 12vw rgba(36,91,255,.025);
  animation: sfOrbit 22s linear infinite;
}
.website-page .routine-step { border-color: rgba(12,14,18,.14); }
.website-page .segmented button { border: 0; background: transparent; }
.website-page .segmented button.active { background: var(--sf-ink); color: #fff; }
.website-page .routine-output { perspective: 1200px; }
.website-page .routine-screen {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2.5rem;
  background: radial-gradient(circle at 70% 18%,rgba(36,91,255,.32),transparent 30%),linear-gradient(145deg,#1a1f29,#020305 72%);
  box-shadow: -30px 50px 100px rgba(5,7,11,.28),inset 1px 1px 0 rgba(255,255,255,.13);
  transform: perspective(1200px) rotateY(calc(var(--sf-x) * 5deg)) rotateX(calc(var(--sf-y) * -4deg));
  transition: transform .9s var(--sf-ease);
}
.website-page .code { background: var(--sf-cobalt) !important; color: #fff; }
.website-page .world { padding-inline: 0; }
.website-page .world > .section-head { padding-inline: clamp(1.25rem,5.5vw,6.5rem); }
.website-page .world-grid { gap: 0; }
.website-page .world-card,
.website-page .world-card:nth-child(n) { min-height: 70svh; border: 0; border-radius: 0; box-shadow: none; }
.website-page .world-card::after { background: linear-gradient(0deg,rgba(2,3,5,.8),transparent 62%); }
.website-page .app-preview { min-height: 100svh; background: var(--sf-obsidian) !important; overflow: clip; }
.website-page .phone { animation: sfFloat 8s ease-in-out infinite; box-shadow: 0 48px 110px rgba(0,0,0,.5); }
.website-page .phone.back { animation-delay: -3.5s; }
.website-page .closing { min-height: 82svh; background: #fff !important; }
.website-page .closing h2 { font-size: clamp(4rem,9vw,10rem); line-height: .82; letter-spacing: -.075em; }

/* App — same world, mobile-native hierarchy */
.fitrich-app-page .app-main { background: var(--sf-frost); }
.fitrich-app-page .app-view:not(#view-live) { background: var(--sf-frost); }
.fitrich-app-page .card { border: 0; border-radius: 0; box-shadow: none; }
.fitrich-app-page .app-header { box-shadow: none; }
.fitrich-app-page .app-stories { padding-bottom: .6rem; }
.fitrich-app-page .home-product-showcase {
  margin-inline: 0;
  padding-inline: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.fitrich-app-page .home-product-head { padding-inline: clamp(1rem,5vw,3rem); }
.fitrich-app-page .home-product-head h2 { font-size: clamp(2.8rem,8vw,5.5rem); line-height: .88; letter-spacing: -.06em; }
.fitrich-app-page .home-product-track { overflow: hidden; padding-block: 1rem 2.5rem; }
.fitrich-app-page .home-product-marquee { gap: clamp(1rem,4vw,2.5rem); }
.fitrich-app-page .home-product-set { gap: clamp(1rem,4vw,2.5rem); }
.fitrich-app-page .home-product-card,
.fitrich-app-page .home-product-card:nth-child(n) {
  width: min(82vw, 29rem);
  min-width: min(82vw, 29rem);
  min-height: 67svh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sf-ink);
  box-shadow: none;
  overflow: visible;
}
.fitrich-app-page .home-product-number { padding-inline: 1rem; color: var(--sf-cobalt); }
.fitrich-app-page .home-product-art {
  min-height: 48svh;
  border: 0;
  background: transparent !important;
  overflow: visible;
  animation: sfFloat 7s ease-in-out infinite;
}
.fitrich-app-page .home-product-copy { padding: 1.25rem 1rem 0; border: 0; background: transparent; }
.fitrich-app-page .home-product-copy strong { font-size: clamp(2rem,7vw,3.2rem); line-height: .94; letter-spacing: -.045em; }
.fitrich-app-page .campaign-card {
  min-height: 70svh;
  margin-inline: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.fitrich-app-page .campaign-copy h2 { font-size: clamp(3.2rem,10vw,6rem); line-height: .85; }
.fitrich-app-page .sovereign-mini {
  margin-inline: clamp(1rem,5vw,3rem);
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: -18px 34px 70px rgba(5,7,11,.2),inset 1px 1px 0 rgba(255,255,255,.12);
  transform: perspective(1000px) rotateY(calc(var(--sf-x) * 3deg));
}
.fitrich-app-page .quick-card { margin-inline: clamp(1rem,5vw,3rem); padding-inline: 0; background: transparent; }
.fitrich-app-page .quick-grid { display: block; }
.fitrich-app-page .quick-grid button {
  width: 100%;
  min-height: 5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0;
  border-bottom: 1px solid rgba(12,14,18,.14);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.fitrich-app-page .quick-grid i { flex: 0 0 2.8rem; border-radius: 50%; }
.fitrich-app-page .quick-grid b { margin-left: auto; }

.fitrich-app-page .shop-intro { min-height: 48svh; align-items: flex-end; border: 0; background: var(--sf-obsidian); color: #fff; }
.fitrich-app-page .shop-intro h1 { font-size: clamp(3.7rem,13vw,7rem); line-height: .82; }
.fitrich-app-page .shop-tools { border: 0; background: transparent; }
.fitrich-app-page .app-filters button { border: 0; border-bottom: 1px solid rgba(12,14,18,.22); border-radius: 0; background: transparent; }
.fitrich-app-page .app-filters button.active { background: transparent; color: var(--sf-cobalt); border-color: var(--sf-cobalt); }
.fitrich-app-page .app-product-grid { display: block; padding: 0; }
.fitrich-app-page .app-product,
.fitrich-app-page .app-product:nth-child(n),
.fitrich-app-page .app-product.ready {
  min-height: 86svh;
  display: grid;
  grid-template-rows: minmax(55svh,1fr) auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg,#fff,#eef1f7);
  color: var(--sf-ink);
  box-shadow: none;
  overflow: clip;
}
.fitrich-app-page .app-product:nth-child(even) { background: linear-gradient(180deg,#edf0f7,#fff); }
.fitrich-app-page .app-product-art { border: 0; background: transparent !important; overflow: visible; }
.fitrich-app-page .app-product-copy { padding: 1.8rem clamp(1rem,6vw,3rem) 2.5rem; border: 0; background: transparent; }
.fitrich-app-page .app-product-copy h3 { font-size: clamp(2.5rem,9vw,4.8rem); line-height: .88; letter-spacing: -.055em; }
.fitrich-app-page .app-product-view { border-top-color: rgba(12,14,18,.14); }

.fitrich-app-page .routine-layout { padding-inline: clamp(1rem,5vw,3rem); background: linear-gradient(145deg,#f8f9fb,#e8ebf2) !important; }
.fitrich-app-page .routine-builder { padding-inline: 0; background: transparent; }
.fitrich-app-page .builder-row { padding-block: 1.6rem; }
.fitrich-app-page .routine-result {
  min-height: 70svh;
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: -20px 38px 78px rgba(5,7,11,.25),inset 1px 1px 0 rgba(255,255,255,.12);
}
.fitrich-app-page .member-layout { gap: clamp(1rem,4vw,2rem); padding-inline: clamp(1rem,5vw,3rem); }
.fitrich-app-page .member-hero { min-height: 72svh; border-radius: 2rem; box-shadow: -20px 38px 78px rgba(5,7,11,.25); }
.fitrich-app-page .member-panel .card,
.fitrich-app-page .member-panel .card:nth-child(n) {
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid rgba(12,14,18,.14);
  background: transparent;
}
.fitrich-app-page .benefit-grid { gap: 0; }
.fitrich-app-page .benefit-grid article,
.fitrich-app-page .benefit-grid article:nth-child(n) { border: 0; border-bottom: 1px solid rgba(12,14,18,.14); background: transparent; }
.fitrich-app-page .profile-layout { padding-inline: clamp(1rem,5vw,3rem); }
.fitrich-app-page .profile-card { min-height: 62svh; border-radius: 0; background: linear-gradient(145deg,var(--sf-cobalt),var(--sf-cobalt-deep)); color: #fff; }
.fitrich-app-page .profile-card > span,
.fitrich-app-page .profile-avatar { color: #fff; }
.fitrich-app-page .settings-card { padding-inline: 0; background: transparent; }
.fitrich-app-page .setting-row { min-height: 5rem; border: 0; border-bottom: 1px solid rgba(12,14,18,.14); }
.fitrich-app-page .bottom-nav { border: 0; box-shadow: 0 -18px 45px rgba(0,0,0,.18); }

/* Keep LIVE pure and full-screen */
.fitrich-app-page #view-live,
.fitrich-app-page #view-live * { --sf-x: 0; --sf-y: 0; }
.fitrich-app-page #view-live { background: #000; }

/* Earlier mobile layout rules use !important; Spatial Form intentionally wins here. */
.fitrich-app-page #view-shop .shop-tools {
  border: 0 !important;
  border-bottom: 1px solid rgba(12,14,18,.1) !important;
  background: rgba(244,245,247,.9) !important;
}
.fitrich-app-page #view-shop .app-filters button {
  min-height: 2.8rem;
  padding-inline: .8rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(12,14,18,.2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sf-muted) !important;
}
.fitrich-app-page #view-shop .app-filters button.active {
  border-bottom-color: var(--sf-cobalt) !important;
  background: transparent !important;
  color: var(--sf-cobalt) !important;
}
.fitrich-app-page #view-shop .app-product,
.fitrich-app-page #view-shop .app-product:nth-child(n) {
  min-height: 86svh !important;
  border: 0 !important;
  background: linear-gradient(180deg,#fff,#eef1f7) !important;
  box-shadow: none !important;
}
.fitrich-app-page #view-shop .app-product:nth-child(even) {
  background: linear-gradient(180deg,#edf0f7,#fff) !important;
}
.fitrich-app-page #view-shop .app-product-art {
  min-height: 55svh !important;
  border: 0 !important;
  background: transparent !important;
}
.fitrich-app-page #view-shop .app-product-copy {
  border: 0 !important;
  background: transparent !important;
}

/* Information pages use the same open editorial rhythm. */
.info-page .info-header { box-shadow: none; }
.info-page .info-hero {
  min-height: 78svh;
  align-items: flex-end;
  padding: clamp(3rem,7vw,8rem);
  border: 0;
  background: radial-gradient(circle at 78% 20%,rgba(36,91,255,.34),transparent 27%),linear-gradient(145deg,#161a22,var(--sf-obsidian) 72%);
  color: #fff;
  overflow: clip;
}
.info-page .info-hero h1 { max-width: 10ch; color: #fff; font-size: clamp(4rem,9vw,9.5rem); line-height: .82; letter-spacing: -.07em; }
.info-page .info-hero h1 em { color: #fff; }
.info-page .info-hero p { max-width: 38rem; color: rgba(255,255,255,.68); }
.info-page .info-hero-aside { border: 0; border-left: 1px solid rgba(255,255,255,.24); background: transparent; color: #fff; box-shadow: none; }
.info-page .info-main { padding-inline: clamp(1.25rem,6vw,7rem); }
.info-page .info-section {
  padding-block: clamp(4rem,8vw,8rem);
  border: 0;
  border-top: 1px solid rgba(12,14,18,.16);
  background: transparent;
  box-shadow: none;
}
.info-page .info-section h2 { font-size: clamp(3rem,6vw,6.8rem); line-height: .86; letter-spacing: -.06em; }
.info-page .info-cards { gap: 0; }
.info-page .info-card,
.info-page .info-contact {
  border: 0;
  border-bottom: 1px solid rgba(12,14,18,.16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 980px) {
  .website-page .mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .website-page .product-card { flex-basis: min(82vw,48rem); grid-template-columns: 1fr; }
  .website-page .product-art { min-height: 55svh; }
  .website-page .product-meta { padding: 0 1rem 3rem; }
  .website-page .reel-card { min-width: 58vw; }
}

@media (max-width: 680px) {
  .website-page .hero-copy { width: calc(100% - 2rem); }
  .website-page .hero h1 { font-size: clamp(4rem,20vw,7rem); }
  .website-page .hero-side { display: none; }
  .website-page .hero-metrics { background: linear-gradient(0deg,rgba(2,3,5,.88),transparent); }
  .website-page .mode-grid { display: block; }
  .website-page .mode-card { min-height: 54svh; border-right: 0; border-bottom: 1px solid rgba(12,14,18,.14); }
  .website-page .mode-card::before { opacity: .9; }
  .website-page .mode-card { color: #fff; }
  .website-page .product-card { flex-basis: 88vw; min-height: 75svh; }
  .website-page .product-art { min-height: 48svh; }
  .website-page .store-category { min-height: 72svh; }
  .website-page .store-category h3 { font-size: clamp(3.2rem,14vw,5.5rem); }
  .website-page .routine-commerce { min-height: 72svh; }
  .website-page .reel-card { min-width: 88vw; }
  .website-page .routine::before { width: 95vw; right: -46vw; }
  .fitrich-app-page .home-product-card { width: 84vw; min-width: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .website-page .temp-product-placeholder::after,
  .fitrich-app-page .temp-product-placeholder::after,
  .website-page .product-art,
  .fitrich-app-page .home-product-art,
  .website-page .phone,
  .website-page .mode-orbit { animation: none !important; }
}