/* Rando — final editorial launch composition */
:root {
  --rando-black: #0f0f10;
  --rando-charcoal: #1c1c1e;
  --rando-paper: #f4f1eb;
  --rando-sand: #e7e3da;
  --rando-lime: #d0fa43;
  --rando-mocha: #806a58;
  --hero-scroll: 0;
}

body { background: var(--rando-black); }
main { overflow: clip; }
.site-header { border-color: rgba(255,255,255,.14); background: rgba(15,15,16,.76); color: #fff; }
.site-header .nav-links { color: rgba(255,255,255,.7); }
.site-header .header-cta { background: #f7f4ed; color: var(--rando-black); }
.site-header.scrolled { background: rgba(15,15,16,.9); border-color: rgba(255,255,255,.16); }

.button-light { background: #f8f5ee; color: var(--rando-black); }
.button-light:hover { background: var(--rando-lime); }

/* 01 — a real business, with the product held quietly in reserve */
.real-hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  height: 100svh;
  max-height: 1040px;
  overflow: hidden;
  color: #fff;
  background: var(--rando-black);
}
.real-hero-photo {
  position: absolute;
  inset: -2.5%;
  z-index: -3;
  width: 105%;
  height: 105%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.82) contrast(1.04);
  transform: scale(calc(1.01 + var(--hero-scroll) * .035)) translateY(calc(var(--hero-scroll) * -1.6%));
  transform-origin: center 42%;
  will-change: transform;
}
.real-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.8) 28%, rgba(10,10,10,.32) 58%, rgba(10,10,10,.06) 76%),
    linear-gradient(0deg, rgba(8,8,8,.64) 0%, transparent 38%, rgba(8,8,8,.18) 100%);
}
.real-hero-copy {
  position: absolute;
  z-index: 2;
  left: max(32px, calc((100vw - var(--max)) / 2));
  top: clamp(150px, 19vh, 205px);
  width: min(750px, 60vw);
}
.real-hero .eyebrow { color: rgba(255,255,255,.68); }
.real-hero h1 {
  max-width: 750px;
  color: #fff;
  font-size: clamp(3.45rem, 5.9vw, 6.45rem);
  line-height: .98;
  letter-spacing: -.064em;
}
.real-hero h1 em { color: #d4c4af; }
.real-hero .hero-lede {
  max-width: 510px;
  margin: 30px 0 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 1.25vw, 1.17rem);
  line-height: 1.55;
}
.real-hero .hero-actions { margin-top: 30px; }
.hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 4px;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.42);
  font-size: 14px;
  font-weight: 600;
}
.hero-reveal { opacity: 0; animation: hero-enter .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-reveal:nth-child(2) { animation-delay: .08s; }
.hero-reveal:nth-child(3) { animation-delay: .15s; }
.hero-reveal:nth-child(4) { animation-delay: .22s; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-powered {
  position: absolute;
  z-index: 3;
  right: max(32px, calc((100vw - var(--max)) / 2));
  bottom: 70px;
  width: min(370px, 30vw);
  color: #fff;
  background: rgba(16,16,16,.88);
  border: 1px solid rgba(255,255,255,.18);
  padding: 18px;
}
.powered-top { display: flex; align-items: center; gap: 9px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.12); }
.powered-top .brand-mark { width: 19px; height: 19px; color: var(--rando-lime); }
.powered-top .brand-mark i { width: 6px; height: 6px; }
.powered-top .brand-mark i:nth-child(1) { top: 7px; }
.powered-top b { font-family: Manrope, sans-serif; font-size: 14px; }
.powered-top small { margin-left: auto; color: rgba(255,255,255,.46); font-size: 9px; }
.powered-row { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; }
.powered-row div { display: flex; flex-direction: column; gap: 3px; }
.powered-row small { color: rgba(255,255,255,.42); font-size: 8px; letter-spacing: .14em; }
.powered-row b { font-size: 13px; }
.live-state { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.72); font-size: 10px; }
.live-state i { width: 6px; height: 6px; border-radius: 50%; background: #79c54d; box-shadow: 0 0 0 4px rgba(121,197,77,.12); }
.powered-ai { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 12px 12px 12px 14px; color: var(--rando-black); background: var(--rando-lime); }
.powered-ai > span { font-size: 18px; }
.powered-ai p { margin: 0; font-size: 10px; line-height: 1.4; }
.powered-ai button { width: 32px; height: 32px; border: 0; background: var(--rando-black); color: #fff; cursor: pointer; }
.hero-business-label { position: absolute; left: max(32px, calc((100vw - var(--max)) / 2)); bottom: 32px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.58); font-size: 10px; }
.hero-business-label span { width: 22px; height: 1px; background: rgba(255,255,255,.45); }

/* 02 — fragmented tools spool into one calm system */
.chaos-story { position: relative; height: 190vh; min-height: 1280px; color: #fff; background: var(--rando-black); --p: 0; }
.chaos-sticky { position: sticky; top: 0; height: 100svh; min-height: 700px; overflow: hidden; }
.chaos-heading { position: absolute; z-index: 5; top: clamp(105px, 13vh, 145px); left: 50%; width: min(920px, calc(100% - 48px)); transform: translateX(-50%); text-align: center; opacity: clamp(0, calc(1 - var(--p) * 2.6), 1); }
.chaos-heading .eyebrow { color: #92928b; }
.chaos-heading h2 { font-size: clamp(3rem, 5.4vw, 5.4rem); }
.chaos-heading h2 em { color: #8c8d87; }
.chaos-orbit { position: absolute; left: 50%; top: 51%; width: min(1080px, 89vw); height: min(560px, 58vh); transform: translate(-50%,-42%); }
.external-tool {
  --tx: 0px;
  --ty: 0px;
  --rotation: 0deg;
  --scale: 1;
  --fade: 1;
  --desaturate: 0;
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 172px;
  padding: 11px 14px 11px 11px;
  color: #171715;
  background: #f9f8f4;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
  opacity: var(--fade);
  filter: saturate(calc(1 - var(--desaturate) * .72));
  transform: translate3d(var(--tx),var(--ty),0) rotate(var(--rotation)) scale(var(--scale));
  will-change: transform, opacity;
}
.external-tool b, .external-tool small { display: block; }
.external-tool b { font-size: 11px; }
.external-tool small { margin-top: 2px; color: #716e67; font-size: 9px; }
.tool-logo { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; font-size: 14px; font-weight: 700; }
.instagram-logo { color: white; background: linear-gradient(145deg,#6549ce,#df357e 52%,#f7a843); }
.whatsapp-logo { color: white; background: #28c566; }
.google-logo { color: #4285f4; background: #fff; border: 1px solid #dfddd7; font-size: 18px; }
.phone-logo { color: white; background: #4a8be7; }
.notes-logo { color: #342f23; background: #f4d66c; }
.calendar-logo { color: #1d6f3e; background: #d9efdc; font-size: 10px; }
.message-logo { color: white; background: #272729; font-size: 10px; letter-spacing: -1px; }
.tool-instagram { left: 0; top: 20px; }
.tool-whatsapp { right: 15px; top: 5px; }
.tool-google { left: 14%; bottom: 4px; }
.tool-phone { left: -4%; top: 47%; }
.tool-notes { right: -3%; top: 51%; }
.tool-calendar { right: 15%; bottom: -7px; }
.tool-message { left: 43%; top: 2px; }
.spool-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spool-lines path { fill: none; stroke: rgba(208,250,67,.42); stroke-width: 1.2; stroke-dasharray: 5 8; stroke-dashoffset: calc((1 - var(--p)) * 90); opacity: clamp(0, calc(var(--p) * 2.1 - .15), .8); }
.rando-spool {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  width: 220px;
  height: 220px;
  color: var(--rando-black);
  background: var(--rando-lime);
  border-radius: 50%;
  opacity: clamp(0, calc((var(--p) - .12) * 2), 1);
  transform: translate(-50%,-50%) scale(calc(.62 + var(--p) * .38));
}
.rando-spool::before, .rando-spool::after { content: ""; position: absolute; border: 1px solid rgba(208,250,67,.16); border-radius: 50%; }
.rando-spool::before { inset: -45px; }
.rando-spool::after { inset: -92px; }
.rando-spool .brand-mark { margin-bottom: 14px; }
.rando-spool strong { font-family: Manrope, sans-serif; font-size: 20px; line-height: 1.04; letter-spacing: -.045em; text-align: center; }
.chaos-answer { position: absolute; z-index: 5; left: 50%; bottom: clamp(35px, 5vh, 62px); margin: 0; color: #a7a8a1; font-size: 15px; line-height: 1.45; text-align: center; opacity: clamp(0, calc((var(--p) - .63) * 3.5), 1); transform: translate(-50%, calc((1 - var(--p)) * 16px)); }
.chaos-answer b { color: #fff; font-weight: 500; }

/* 03 — a digital home becomes the booking journey */
.home-story { position: relative; height: 205vh; min-height: 1420px; color: var(--ink); background: var(--rando-paper); --p: 0; }
.home-sticky { position: sticky; top: 0; height: 100svh; min-height: 720px; overflow: hidden; }
.home-copy { position: absolute; z-index: 4; top: clamp(112px, 14vh, 150px); left: max(32px, calc((100vw - var(--max)) / 2)); width: min(500px, 38vw); }
.home-copy h2 { font-size: clamp(3.15rem, 4.8vw, 5.15rem); }
.home-copy h2 em { color: #77736b; }
.home-copy > p:not(.eyebrow) { max-width: 410px; margin: 25px 0 0; color: #5d5a54; font-size: 17px; }
.domain-proof { display: grid; grid-template-columns: 1fr auto; gap: 9px 16px; width: min(410px,100%); margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(23,23,21,.18); }
.domain-proof s { grid-column: 1; color: #918e87; font-size: 12px; }
.domain-proof span { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #aaa69e; }
.domain-proof strong { grid-column: 1; font-family: Manrope, sans-serif; font-size: 21px; letter-spacing: -.04em; }

.atelier-browser {
  position: absolute;
  right: max(26px, calc((100vw - var(--max)) / 2));
  bottom: clamp(74px, 9vh, 100px);
  width: min(850px, 61vw);
  height: min(590px, 66vh);
  min-height: 510px;
  overflow: hidden;
  color: #fff;
  background: #32291f;
  border: 1px solid rgba(23,23,21,.18);
  box-shadow: 0 38px 85px rgba(48,40,28,.14);
  transform: perspective(1500px) rotateY(calc(-3deg + var(--p) * 3deg)) translateX(calc((1 - var(--p)) * 4vw));
  transform-origin: center right;
}
.atelier-browser > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; transform: scale(calc(1.1 - var(--p) * .04)); filter: saturate(.78) contrast(1.03); }
.atelier-photo-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,16,13,.86), rgba(19,16,13,.12) 70%), linear-gradient(0deg, rgba(15,13,11,.45), transparent 45%); }
.browser-chrome { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 15px; color: #595650; background: #f3f1ec; border-bottom: 1px solid rgba(23,23,21,.13); font-size: 9px; opacity: clamp(.25, calc(var(--p) * 2.7), 1); }
.browser-chrome > span:last-child { justify-self: end; }
.chrome-dots { display: flex; gap: 5px; }
.chrome-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d2cfc7; }
.chrome-domain { min-width: 210px; padding: 6px 18px; text-align: center; background: #fff; border: 1px solid #e1ded7; }
.chrome-domain i { color: #8b887f; font-style: normal; }
.atelier-identity { position: absolute; z-index: 3; inset: 44px 0 0; opacity: clamp(0, calc((var(--p) - .08) * 3.2), 1); transform: translateY(calc((1 - var(--p)) * 18px)); }
.atelier-nav { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 30px; height: 68px; padding: 0 28px; border-bottom: 1px solid rgba(255,255,255,.2); }
.atelier-nav b { font-family: Georgia,serif; font-size: 15px; font-weight: 400; letter-spacing: .16em; }
.atelier-nav > span { color: rgba(255,255,255,.64); font-size: 8px; letter-spacing: .13em; }
.atelier-nav button { border: 0; padding: 10px 14px; color: #191816; background: #f4f1eb; font-size: 9px; cursor: pointer; }
.atelier-site-copy { position: absolute; left: 42px; bottom: 68px; }
.atelier-site-copy small { color: #ddc7aa; font-size: 9px; letter-spacing: .2em; }
.atelier-site-copy h3 { margin: 17px 0 0; font-family: Manrope,sans-serif; font-size: clamp(2.4rem, 3.4vw, 3.85rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.atelier-site-copy h3 em { font-family: Georgia,serif; font-weight: 400; color: #d8c1a4; }

.booking-sheet {
  position: absolute;
  z-index: 8;
  top: 44px;
  right: 0;
  width: min(390px, 48%);
  height: calc(100% - 44px);
  padding: 25px 26px 20px;
  color: var(--ink);
  background: #faf9f5;
  border-left: 1px solid rgba(23,23,21,.14);
  opacity: clamp(0, calc((var(--p) - .4) * 4.4), 1);
  transform: translateX(calc((1 - clamp(0, (var(--p) - .4) * 4.4, 1)) * 103%));
  transition: opacity .16s linear;
}
.booking-sheet-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 19px; border-bottom: 1px solid rgba(23,23,21,.13); }
.booking-sheet-head b { font-family: Manrope,sans-serif; font-size: 14px; letter-spacing: -.025em; }
.booking-sheet-head button { width: 27px; height: 27px; border: 1px solid rgba(23,23,21,.16); border-radius: 50%; background: transparent; cursor: pointer; }
.quick-book-state { position: absolute; inset: 86px 26px 52px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s; }
.quick-book-state > small { color: #8a877f; font-size: 8px; letter-spacing: .16em; }
.quick-book-state h4 { margin: 12px 0 22px; font-family: Manrope,sans-serif; font-size: 24px; line-height: 1.08; letter-spacing: -.04em; }
[data-booking-step="0"] .state-service, [data-booking-step="1"] .state-time, [data-booking-step="2"] .state-confirmed { opacity: 1; transform: none; pointer-events: auto; }
.state-service > button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 9px; padding: 14px; border: 1px solid #dedcd5; background: #fff; text-align: left; cursor: pointer; }
.state-service button span { display: flex; flex-direction: column; }
.state-service button b { font-size: 11px; }
.state-service button small { color: #89867e; font-size: 9px; }
.state-service button em { font-style: normal; font-size: 10px; }
.quick-dates { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.quick-dates span { display: grid; place-items: center; min-height: 65px; border: 1px solid #dedcd5; font-size: 14px; }
.quick-dates small { display: block; color: #918e86; font-size: 8px; }
.quick-dates .active { color: #fff; background: var(--rando-black); border-color: var(--rando-black); }
.quick-dates .active small { color: rgba(255,255,255,.6); }
.quick-times { display: flex; gap: 8px; margin-top: 12px; }
.quick-times span { flex: 1; padding: 11px 7px; border: 1px solid #dedcd5; text-align: center; font-size: 10px; }
.quick-times .active { background: var(--rando-lime); border-color: #cce95f; }
.state-confirmed { display: grid; place-items: center; align-content: center; text-align: center; }
.confirm-check { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 50%; color: var(--rando-black); background: var(--rando-lime); font-size: 20px; }
.state-confirmed h4 { margin-bottom: 7px; }
.state-confirmed p { margin: 0; color: #77746d; font-size: 11px; }
.booking-progress { position: absolute; right: 26px; bottom: 22px; left: 26px; display: flex; gap: 5px; }
.booking-progress i { flex: 1; height: 2px; background: #dedcd5; }
[data-booking-step="0"] .booking-progress i:nth-child(1), [data-booking-step="1"] .booking-progress i:nth-child(-n+2), [data-booking-step="2"] .booking-progress i { background: var(--rando-black); }
.home-chapter-caption { position: absolute; z-index: 5; right: max(28px, calc((100vw - var(--max)) / 2)); bottom: 34px; display: flex; gap: 11px; align-items: center; color: #8b887f; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; opacity: clamp(0, calc(1.5 - var(--p) * 1.6), 1); }
.home-chapter-caption i { color: #bbb7ae; font-style: normal; }
.home-chapter-caption b { color: var(--ink); }

/* 04 — one operating system, then its intelligent operating layer */
.system-story { position: relative; height: 220vh; min-height: 1540px; color: #fff; background: var(--rando-black); --p: 0; }
.system-sticky { position: sticky; top: 0; height: 100svh; min-height: 740px; overflow: hidden; }
.system-heading { position: absolute; z-index: 6; top: clamp(94px, 11vh, 122px); left: 50%; width: min(890px, calc(100% - 48px)); transform: translateX(-50%); text-align: center; }
.system-heading .eyebrow { color: var(--rando-lime); }
.system-heading h2 { font-size: clamp(3rem, 4.7vw, 5rem); }
.system-heading h2 em { color: #92948d; }
.system-heading > p:last-child { margin: 19px auto 0; color: #a5a69f; font-size: 15px; }
.system-heading-os { opacity: clamp(0, calc(1.9 - var(--p) * 4.6), 1); transform: translateX(-50%) translateY(calc(var(--p) * -14px)); }
.system-heading-ai { opacity: clamp(0, calc((var(--p) - .34) * 5), 1); transform: translateX(-50%) translateY(calc((1 - var(--p)) * 12px)); }

.unified-os {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(78px, 9vh, 105px);
  width: min(1120px, calc(100% - 48px));
  height: min(520px, 62vh);
  min-height: 470px;
  overflow: hidden;
  color: var(--ink);
  background: #f7f6f1;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 52px 100px rgba(0,0,0,.35);
  transform: translateX(-50%) scale(calc(.965 + var(--p) * .035));
}
.unified-topbar { position: absolute; z-index: 8; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 49px; padding: 0 17px; color: #77746d; background: #f7f6f1; border-bottom: 1px solid #dfded8; font-size: 9px; }
.unified-topbar > div { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.unified-topbar .brand-mark { width: 16px; height: 16px; }
.unified-topbar .brand-mark i { width: 5px; height: 5px; }
.unified-topbar .brand-mark i:nth-child(1) { top: 6px; }
.unified-topbar b { font-family: Manrope,sans-serif; }
.unified-topbar > em { justify-self: end; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #ddddd6; border-radius: 100px; color: #6c6962; font-style: normal; }
.unified-topbar > em i { width: 5px; height: 5px; border-radius: 50%; background: #74b74b; }
.unified-nav { position: absolute; z-index: 7; top: 49px; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 27px; width: 52px; padding-top: 22px; background: #181916; }
.unified-nav b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: var(--rando-lime); }
.unified-nav i { width: 16px; height: 16px; border: 1px solid #5d5e57; border-radius: 4px; }
.operating-view { position: absolute; inset: 49px 0 0 52px; padding: 22px; background: #f7f6f1; opacity: clamp(.16, calc(1.55 - var(--p) * 2.2), 1); transition: opacity .2s linear; }
.booking-entered { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 56px; padding: 9px 13px; background: #fff; border: 1px solid #deddd7; }
.booking-entered > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--rando-lime); font-size: 11px; }
.booking-entered div { display: flex; flex-direction: column; }
.booking-entered small { color: #85827a; font-size: 7px; letter-spacing: .12em; }
.booking-entered b { font-size: 10px; }
.booking-entered em { color: #77746d; font-size: 8px; font-style: normal; }
.day-view { position: absolute; top: 93px; bottom: 22px; left: 22px; width: 58%; background: #fff; border: 1px solid #deddd7; }
.day-view-head { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 15px; border-bottom: 1px solid #e6e4de; }
.day-view-head b { font-size: 11px; }
.day-view-head span { color: #807d75; font-size: 8px; }
.day-track { position: absolute; inset: 44px 0 0 0; display: grid; grid-template-columns: 42px repeat(5,1fr); background-image: linear-gradient(#ebeae4 1px, transparent 1px); background-size: 100% 20%; }
.day-track > span { padding-top: 8px; color: #9c9991; border-right: 1px solid #eeece7; font-size: 7px; text-align: center; }
.day-appointment { position: absolute; top: 45%; display: flex; flex-direction: column; width: 18%; padding: 8px; border-left: 2px solid #979a8a; background: #eeefe9; }
.day-appointment b { font-size: 8px; }
.day-appointment small { color: #74716b; font-size: 7px; }
.appointment-old { left: 19%; top: 29%; }
.appointment-new { left: 43%; top: 47%; width: 25%; border-color: #93ae53; background: #eff4df; animation: appointment-in .7s cubic-bezier(.2,.8,.2,1) both; }
.appointment-new i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #7ab13d; }
.appointment-later { right: 6%; top: 63%; background: #f0ece7; border-color: #a58973; }
@keyframes appointment-in { from { opacity: 0; transform: scale(.93) translateY(8px); } }
.system-reaction-list { position: absolute; top: 93px; right: 22px; bottom: 22px; left: calc(58% + 36px); border-top: 1px solid #deddd7; }
.system-reaction-list p { display: grid; grid-template-columns: 24px 1fr auto; gap: 3px 8px; align-items: center; margin: 0; padding: 18px 4px; border-bottom: 1px solid #deddd7; }
.system-reaction-list span { grid-row: 1 / span 2; color: #a19e96; font-size: 8px; }
.system-reaction-list b { font-size: 10px; }
.system-reaction-list em { grid-column: 2; color: #77746d; font-size: 8px; font-style: normal; }
.system-reaction-list i { grid-row: 1 / span 2; grid-column: 3; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: var(--ink); background: var(--rando-lime); font-size: 8px; font-style: normal; }

.ai-operating-layer {
  position: absolute;
  z-index: 6;
  inset: 49px 0 0 52px;
  padding: 23px 26px 17px;
  color: #f7f6f1;
  background: #171815;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12%);
  transition: opacity .25s, transform .45s cubic-bezier(.2,.8,.2,1);
}
[data-system-phase="1"] .ai-operating-layer, [data-system-phase="2"] .ai-operating-layer { opacity: 1; pointer-events: auto; transform: none; }
.ai-operation-top { display: flex; align-items: center; gap: 10px; height: 24px; color: #8f9188; }
.answer-spark { color: var(--rando-lime); font-size: 17px; }
.ai-operation-top small { font-size: 8px; letter-spacing: .16em; }
.ai-operation-top i { width: 5px; height: 5px; border-radius: 50%; background: var(--rando-lime); box-shadow: 0 0 0 4px rgba(208,250,67,.08); }
.ai-command { max-width: 720px; margin: 19px 0 17px; font-family: Manrope,sans-serif; font-size: clamp(1.4rem, 2.3vw, 2.2rem); line-height: 1.1; letter-spacing: -.045em; }
.ai-work-result { display: grid; grid-template-columns: 1fr .92fr; min-height: 245px; border-top: 1px solid #383934; border-bottom: 1px solid #383934; }
.ai-work-steps { padding: 13px 24px 12px 0; border-right: 1px solid #383934; }
.ai-work-steps p { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; margin: 0; padding: 8px 0; opacity: 0; transform: translateX(-8px); animation: work-in .45s ease-out forwards; }
.ai-work-steps p:nth-child(2) { animation-delay: .12s; }
.ai-work-steps p:nth-child(3) { animation-delay: .24s; }
.ai-work-steps p:nth-child(4) { animation-delay: .36s; }
@keyframes work-in { to { opacity: 1; transform: none; } }
.ai-work-steps p > i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--rando-black); background: var(--rando-lime); font-size: 8px; font-style: normal; }
.ai-work-steps span { display: flex; flex-direction: column; }
.ai-work-steps small { color: #74766e; font-size: 7px; letter-spacing: .12em; }
.ai-work-steps b { font-size: 10px; font-weight: 500; }
.campaign-final { padding: 26px 0 20px 30px; }
.campaign-final > small { color: var(--rando-lime); font-size: 8px; letter-spacing: .14em; }
.campaign-final h3 { margin: 12px 0 8px; font-family: Manrope,sans-serif; font-size: clamp(1.6rem, 2.4vw, 2.45rem); line-height: 1.06; letter-spacing: -.05em; }
.campaign-final p { max-width: 330px; margin: 0; color: #999b93; font-size: 10px; line-height: 1.5; }
.campaign-final button { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 250px; margin-top: 20px; padding: 11px 14px; border: 0; color: var(--rando-black); background: var(--rando-lime); font-size: 10px; font-weight: 600; cursor: pointer; }
.campaign-final button.sent { background: #f4f1eb; }
.automation-continuation { display: flex; justify-content: space-between; gap: 8px; padding-top: 15px; opacity: .52; }
.automation-continuation span { display: flex; align-items: center; gap: 6px; color: #a3a59c; font-size: 8px; }
.automation-continuation i { color: var(--rando-lime); font-style: normal; }
[data-system-phase="2"] .automation-continuation { opacity: 1; }
.system-closing { position: absolute; z-index: 6; bottom: 27px; left: 50%; margin: 0; transform: translateX(-50%); color: #8d8e87; font-size: 13px; opacity: clamp(0, calc((var(--p) - .68) * 3.5), 1); }
.system-closing b { color: #fff; font-weight: 500; }

/* 05 — the system recedes; the business remains */
.human-final { position: relative; isolation: isolate; min-height: 790px; height: 100svh; max-height: 1040px; overflow: hidden; color: #fff; background: var(--rando-black); }
.human-final > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78) contrast(1.03); }
.human-final-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8,8,8,.87) 0%, rgba(8,8,8,.52) 44%, rgba(8,8,8,.09) 76%), linear-gradient(0deg, rgba(8,8,8,.78), transparent 58%); }
.quiet-status { position: absolute; top: clamp(105px, 13vh, 140px); left: max(32px, calc((100vw - var(--max)) / 2)); display: flex; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.68); font-size: 10px; }
.quiet-status span:last-child { color: #fff; }
.final-human-copy { position: absolute; left: max(32px, calc((100vw - var(--max)) / 2)); bottom: clamp(155px, 19vh, 210px); width: min(780px, 68vw); }
.final-human-copy .eyebrow { color: #d2b48d; }
.final-human-copy h2 { max-width: 780px; font-size: clamp(3.2rem, 5.2vw, 5.75rem); }
.final-human-copy h2 em { color: #d4c4af; }
.final-human-copy > p:not(.eyebrow) { max-width: 510px; margin: 23px 0 28px; color: rgba(255,255,255,.68); font-size: 15px; }
.human-footer { position: absolute; right: max(32px, calc((100vw - var(--max)) / 2)); bottom: 25px; left: max(32px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.5); font-size: 9px; }
.brand-light { color: #fff; }
.human-footer p { margin: 0; }
.human-footer > span { justify-self: end; }

@media (max-width: 1100px) {
  .real-hero-copy { width: 66vw; }
  .real-hero h1 { font-size: clamp(3.45rem, 6.3vw, 5.4rem); }
  .hero-powered { width: 320px; }
  .home-copy { width: 41vw; }
  .atelier-browser { width: 59vw; }
  .atelier-nav > span { display: none; }
  .atelier-nav { grid-template-columns: 1fr auto; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; width: calc(100% - 28px); margin-top: 10px; padding-left: 14px; }
  .site-header .nav-links { display: none; }
  .site-header .header-cta { font-size: 12px; padding: 9px 13px; }
  .site-header .brand { font-size: 18px; }
  .site-header .brand-mark { width: 20px; height: 20px; }

  .real-hero { min-height: 770px; height: 100svh; max-height: none; }
  .real-hero-photo { inset: 0; width: 100%; height: 100%; object-position: 58% center; transform: scale(calc(1.04 + var(--hero-scroll) * .025)); }
  .real-hero-shade { background: linear-gradient(180deg, rgba(8,8,8,.3), rgba(8,8,8,.88) 64%, rgba(8,8,8,.94)), linear-gradient(90deg, rgba(8,8,8,.58), transparent 85%); }
  .real-hero-copy { top: auto; right: 20px; bottom: 197px; left: 20px; width: auto; }
  .real-hero .eyebrow { margin-bottom: 13px; font-size: 9px; }
  .real-hero h1 { font-size: clamp(2.55rem, 11.2vw, 3.65rem); line-height: .98; }
  .real-hero .hero-lede { margin-top: 18px; font-size: 13px; }
  .real-hero .hero-actions { margin-top: 20px; }
  .real-hero .button { min-height: 47px; padding: 0 17px; font-size: 12px; }
  .hero-text-link { min-height: 47px; font-size: 11px; }
  .hero-powered { right: 20px; bottom: 25px; left: 20px; width: auto; padding: 12px; }
  .powered-top, .powered-row { display: none; }
  .powered-ai { padding: 10px 10px 10px 12px; }
  .hero-business-label { display: none; }

  .chaos-story { height: 175vh; min-height: 1220px; }
  .chaos-sticky { min-height: 690px; }
  .chaos-heading { top: 102px; width: calc(100% - 36px); }
  .chaos-heading .eyebrow { margin-bottom: 13px; }
  .chaos-heading h2 { font-size: clamp(2.4rem, 11vw, 3.35rem); }
  .chaos-orbit { top: 53%; width: calc(100% - 30px); height: 480px; transform: translate(-50%,-42%); }
  .external-tool { min-width: 140px; padding: 8px; gap: 8px; }
  .external-tool b { font-size: 9px; }
  .external-tool small { font-size: 7px; }
  .tool-logo { width: 29px; height: 29px; border-radius: 7px; font-size: 11px; }
  .tool-instagram { left: -7px; top: 25px; }
  .tool-whatsapp { right: -4px; top: 5px; }
  .tool-google { left: 1%; bottom: 14px; }
  .tool-phone { left: -12px; top: 42%; }
  .tool-notes { right: -9px; top: 47%; }
  .tool-calendar { right: 1%; bottom: -4px; }
  .tool-message { left: 32%; top: 27%; }
  .rando-spool { width: 158px; height: 158px; }
  .rando-spool .brand-mark { width: 20px; height: 20px; margin-bottom: 10px; }
  .rando-spool strong { font-size: 15px; }
  .chaos-answer { bottom: 30px; width: calc(100% - 36px); font-size: 12px; }

  .home-story { height: 190vh; min-height: 1320px; }
  .home-sticky { min-height: 720px; }
  .home-copy { top: 96px; right: 20px; left: 20px; width: auto; }
  .home-copy .eyebrow { margin-bottom: 13px; font-size: 9px; }
  .home-copy h2 { font-size: clamp(2.55rem, 11vw, 3.45rem); }
  .home-copy > p:not(.eyebrow) { margin-top: 15px; font-size: 13px; }
  .domain-proof { grid-template-columns: 1fr auto; gap: 5px 12px; width: 100%; margin-top: 17px; padding-top: 12px; }
  .domain-proof s { font-size: 10px; }
  .domain-proof strong { font-size: 17px; }
  .atelier-browser { right: 16px; bottom: 46px; left: 16px; width: auto; height: 47vh; min-height: 390px; transform: translateY(calc((1 - var(--p)) * 18px)); }
  .atelier-browser > img { object-position: 60% center; }
  .browser-chrome { height: 37px; padding: 0 10px; }
  .chrome-domain { min-width: 155px; padding: 5px 8px; }
  .atelier-identity { inset: 37px 0 0; }
  .atelier-nav { height: 53px; padding: 0 15px; }
  .atelier-nav b { font-size: 11px; }
  .atelier-nav button { padding: 8px 10px; font-size: 8px; }
  .atelier-site-copy { left: 20px; bottom: 31px; }
  .atelier-site-copy h3 { margin-top: 10px; font-size: clamp(2rem, 9vw, 2.7rem); }
  .booking-sheet { top: 37px; width: 86%; height: calc(100% - 37px); padding: 17px; }
  .quick-book-state { inset: 69px 17px 42px; }
  .quick-book-state h4 { margin: 9px 0 14px; font-size: 21px; }
  .state-service > button { padding: 10px; }
  .booking-sheet-head { padding-bottom: 12px; }
  .booking-progress { right: 17px; bottom: 16px; left: 17px; }
  .home-chapter-caption { display: none; }

  .system-story { height: 205vh; min-height: 1440px; }
  .system-sticky { min-height: 730px; }
  .system-heading { top: 92px; width: calc(100% - 36px); }
  .system-heading .eyebrow { margin-bottom: 12px; font-size: 9px; }
  .system-heading h2 { font-size: clamp(2.45rem, 10.5vw, 3.4rem); }
  .system-heading > p:last-child { margin-top: 12px; font-size: 12px; }
  .unified-os { bottom: 66px; width: calc(100% - 24px); height: 54vh; min-height: 430px; }
  .unified-topbar { grid-template-columns: 1fr auto; height: 43px; padding: 0 11px; }
  .unified-topbar > span { display: none; }
  .unified-topbar > em { font-size: 7px; }
  .unified-nav { display: none; }
  .operating-view { inset: 43px 0 0; padding: 13px; }
  .booking-entered { padding: 7px 9px; }
  .day-view { top: 78px; right: 13px; bottom: auto; left: 13px; width: auto; height: 47%; }
  .system-reaction-list { top: auto; right: 13px; bottom: 11px; left: 13px; display: grid; grid-template-columns: repeat(3,1fr); height: 34%; border-top: 1px solid #deddd7; }
  .system-reaction-list p { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 9px; border-right: 1px solid #deddd7; border-bottom: 0; }
  .system-reaction-list p:last-child { border-right: 0; }
  .system-reaction-list span { display: none; }
  .system-reaction-list b { font-size: 8px; }
  .system-reaction-list em { font-size: 7px; }
  .system-reaction-list i { order: -1; width: 18px; height: 18px; margin-bottom: 7px; }
  .ai-operating-layer { inset: 43px 0 0; padding: 15px 16px 10px; transform: translateY(8%); }
  .ai-command { margin: 13px 0 12px; font-size: 20px; }
  .ai-work-result { grid-template-columns: 1fr; min-height: 0; }
  .ai-work-steps { padding: 7px 0; border-right: 0; border-bottom: 1px solid #383934; }
  .ai-work-steps p { padding: 4px 0; }
  .ai-work-steps p > i { width: 19px; height: 19px; }
  .campaign-final { padding: 13px 0 8px; }
  .campaign-final h3 { margin: 7px 0 5px; font-size: 22px; }
  .campaign-final p { font-size: 8px; }
  .campaign-final button { margin-top: 10px; padding: 9px 11px; }
  .automation-continuation { display: grid; grid-template-columns: 1fr 1fr; padding-top: 9px; }
  .automation-continuation span { font-size: 7px; }
  .system-closing { bottom: 28px; width: calc(100% - 36px); font-size: 10px; text-align: center; }

  .human-final { min-height: 790px; height: 100svh; max-height: none; }
  .human-final > img { object-position: 52% center; }
  .human-final-shade { background: linear-gradient(180deg, rgba(8,8,8,.18), rgba(8,8,8,.68) 44%, rgba(8,8,8,.94)); }
  .quiet-status { top: 96px; right: 20px; left: 20px; display: grid; gap: 6px; padding-bottom: 11px; font-size: 9px; }
  .final-human-copy { right: 20px; bottom: 116px; left: 20px; width: auto; }
  .final-human-copy .eyebrow { margin-bottom: 13px; font-size: 9px; }
  .final-human-copy h2 { font-size: clamp(2.55rem, 11vw, 3.55rem); }
  .final-human-copy > p:not(.eyebrow) { margin: 17px 0 20px; font-size: 12px; }
  .final-human-copy .button { min-height: 48px; font-size: 12px; }
  .human-footer { right: 20px; bottom: 20px; left: 20px; grid-template-columns: 1fr auto; }
  .human-footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .real-hero-photo { transform: none; }
  .chaos-story, .home-story, .system-story { height: auto; min-height: 0; }
  .chaos-sticky, .home-sticky, .system-sticky { position: relative; height: 100svh; }
  .external-tool { opacity: 0; }
  .rando-spool, .chaos-answer { opacity: 1; transform: translate(-50%,-50%); }
  .chaos-answer { transform: translateX(-50%); }
  .atelier-browser { transform: none; }
  .booking-sheet { opacity: 1; transform: none; }
  .system-heading-os { opacity: 0; }
  .system-heading-ai { opacity: 1; transform: translateX(-50%); }
  .operating-view { opacity: .16; }
  .ai-operating-layer { opacity: 1; transform: none; pointer-events: auto; }
  .system-closing { opacity: 1; }
}

/* v4 — supplied-asset refinement */
.real-hero {
  min-height: 780px;
  height: 100svh;
  max-height: 980px;
  color: var(--ink);
  background: var(--rando-paper);
}
.hero-layout {
  display: grid;
  grid-template-columns: minmax(470px,.88fr) minmax(590px,1.12fr);
  align-items: center;
  gap: clamp(28px,4vw,72px);
  width: min(calc(100% - 64px), var(--max));
  height: 100%;
  margin: 0 auto;
  padding-top: 92px;
}
.real-hero-copy {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 6;
  width: auto;
  padding-bottom: 28px;
}
.real-hero .eyebrow { color: #65625b; }
.real-hero h1 {
  max-width: 650px;
  color: var(--ink);
  font-size: clamp(3.65rem,5.2vw,5.65rem);
  line-height: .99;
}
.real-hero h1 em { color: #766f65; }
.real-hero .hero-lede {
  max-width: 510px;
  margin-top: 26px;
  color: #4d4a44;
  font-size: clamp(1rem,1.2vw,1.12rem);
}
.real-hero .hero-actions { position: relative; z-index: 7; margin-top: 27px; }
.real-hero .hero-text-link { color: #292825; border-color: rgba(23,23,21,.35); }
.hero-sector-stage { position: relative; height: min(690px,75vh); min-height: 590px; }
.sector-card {
  position: absolute;
  overflow: hidden;
  margin: 0;
  background: #d5c9ba;
  border: 5px solid #fbfaf6;
  box-shadow: 0 28px 70px rgba(49,42,32,.16);
  transform-origin: center;
}
.sector-card::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(0deg,rgba(8,8,8,.62),transparent); pointer-events: none; }
.sector-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sector-card figcaption { position: absolute; z-index: 2; right: 15px; bottom: 13px; left: 15px; display: flex; align-items: end; justify-content: space-between; gap: 12px; color: #fff; }
.sector-card figcaption span { color: rgba(255,255,255,.76); font-size: 12px; }
.sector-card figcaption b { font-family: Manrope,sans-serif; font-size: 14px; font-weight: 600; }
.sector-main { z-index: 2; top: 7%; right: 1%; width: 76%; height: 86%; transform: rotate(.7deg); }
.sector-main img { object-position: 62% center; }
.sector-beauty { z-index: 1; top: 0; left: 0; width: 36%; height: 29%; transform: rotate(-4.2deg); }
.sector-beauty img { object-position: 62% center; }
.sector-clinic { z-index: 1; bottom: 1%; left: 1%; width: 38%; height: 30%; transform: rotate(3.5deg); }
.sector-clinic img { object-position: 48% center; }
.hero-powered {
  z-index: 5;
  right: auto;
  bottom: 5%;
  left: 22%;
  width: min(330px,47%);
  padding: 15px;
  color: #fff;
  background: rgba(15,15,16,.94);
  border-color: rgba(255,255,255,.17);
  box-shadow: 0 20px 48px rgba(0,0,0,.25);
}
.powered-top { padding-bottom: 12px; }
.powered-top small { color: rgba(255,255,255,.68); font-size: 10px; }
.powered-row { padding: 13px 0; }
.powered-row small { color: rgba(255,255,255,.58); font-size: 9px; }
.powered-row b { font-size: 14px; }
.live-state { color: rgba(255,255,255,.82); font-size: 11px; }
.powered-ai p { font-size: 11px; line-height: 1.35; }

.chaos-story { --line-opacity: 0; --line-dash: 90; }
.chaos-heading .eyebrow { color: #b5b6af; }
.chaos-heading h2 em { color: #aaa9a3; }
.external-tool b { font-size: 12px; }
.external-tool small { color: #615f59; font-size: 10px; }
.spool-lines path {
  stroke: rgba(208,250,67,.46);
  stroke-linecap: round;
  stroke-dashoffset: var(--line-dash);
  opacity: var(--line-opacity);
}
.chaos-answer { color: #c0c1ba; }

.home-story {
  height: auto;
  min-height: 0;
  padding: clamp(130px,15vw,190px) 0;
  background: var(--rando-paper);
}
.home-inner {
  display: grid;
  grid-template-columns: minmax(350px,.74fr) minmax(620px,1.35fr);
  align-items: center;
  gap: clamp(42px,6vw,96px);
  width: min(calc(100% - 64px), var(--max));
  margin: 0 auto;
}
.home-copy { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 2; width: auto; }
.home-copy h2 { font-size: clamp(3.3rem,4.7vw,5rem); }
.home-copy h2 em { color: #6f6a62; }
.home-copy > p:not(.eyebrow) {
  max-width: 440px;
  margin-top: 24px;
  color: #4f4c46;
  font-size: 17px;
  line-height: 1.55;
}
.domain-proof {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 13px 20px;
  width: 100%;
  margin-top: 38px;
  padding: 20px 0;
  border-top: 1px solid rgba(23,23,21,.2);
  border-bottom: 1px solid rgba(23,23,21,.2);
}
.domain-proof > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.domain-proof > div:first-child { grid-column: 1; }
.domain-proof > div:last-child { grid-column: 1; }
.domain-proof small { color: #77736c; font-size: 12px; }
.domain-proof s {
  grid-column: auto;
  overflow-wrap: anywhere;
  color: #66625b;
  font-size: clamp(13px,1.15vw,15px);
  text-decoration-color: rgba(23,23,21,.62);
  text-decoration-thickness: 1px;
}
.domain-proof > span { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #817c74; font-size: 22px; }
.domain-proof strong { grid-column: auto; font-family: Manrope,sans-serif; font-size: clamp(21px,2vw,27px); letter-spacing: -.045em; }
.website-environment {
  position: relative;
  overflow: hidden;
  min-height: 565px;
  aspect-ratio: 16 / 10;
  margin: 0;
  background: #3c2b20;
  border: 1px solid rgba(23,23,21,.16);
  box-shadow: 0 38px 90px rgba(49,42,32,.14);
}
.website-environment::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(0deg,rgba(9,8,7,.68),transparent); pointer-events: none; }
.website-environment > img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.02); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.website-environment:hover > img { transform: scale(1.012); }
.website-environment figcaption { position: absolute; z-index: 2; right: 26px; bottom: 23px; left: 26px; display: flex; align-items: end; justify-content: space-between; gap: 24px; color: #fff; }
.website-environment figcaption > span { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font-size: 11px; letter-spacing: .1em; }
.website-environment figcaption > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--rando-lime); }
.website-environment figcaption p { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.45; text-align: right; }
.website-environment figcaption b { color: #fff; font-weight: 500; }

.system-heading > p:last-child { color: #c0c1ba; font-size: 16px; }
.day-view, .day-track { overflow: hidden; }
.unified-topbar { font-size: 11px; }
.booking-entered small { font-size: 9px; }
.booking-entered b { font-size: 11px; }
.booking-entered em { font-size: 9px; }
.day-track > span { font-size: 9px; }
.day-appointment { max-width: 26%; min-width: 0; overflow: hidden; }
.day-appointment b { font-size: 10px; }
.day-appointment small { font-size: 9px; }
.day-appointment b, .day-appointment small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-old { left: 19%; width: 17%; }
.appointment-new { left: 42%; width: 24%; }
.appointment-later { right: 4%; width: 18%; }
.system-reaction-list span { font-size: 9px; }
.system-reaction-list b { font-size: 11px; }
.system-reaction-list em { font-size: 9px; }
.ai-operation-top small, .ai-work-steps small { font-size: 9px; }
.ai-work-steps b { font-size: 11px; }
.campaign-final p { font-size: 12px; }
.automation-continuation span { font-size: 10px; }
.final-human-copy > p:not(.eyebrow) { color: rgba(255,255,255,.78); font-size: 16px; }
.quiet-status { color: rgba(255,255,255,.78); }

@media (max-width: 1120px) {
  .hero-layout { grid-template-columns: minmax(410px,.83fr) minmax(510px,1.17fr); gap: 22px; }
  .real-hero h1 { font-size: clamp(3.35rem,5vw,4.7rem); }
  .hero-sector-stage { min-height: 560px; }
  .hero-powered { left: 16%; width: 52%; }
  .home-inner { grid-template-columns: minmax(310px,.7fr) minmax(560px,1.3fr); gap: 38px; }
}

@media (max-width: 1020px) {
  .real-hero { height: auto; min-height: 1030px; max-height: none; }
  .hero-layout { display: block; width: min(calc(100% - 40px),680px); padding: 130px 0 42px; }
  .real-hero-copy { padding: 0; }
  .real-hero h1 { max-width: 620px; font-size: clamp(3.4rem,8.3vw,5rem); }
  .real-hero .hero-lede { font-size: 16px; }
  .hero-sector-stage { height: 570px; min-height: 0; margin-top: 43px; }
  .sector-main { right: 1%; width: 79%; }
  .sector-beauty { width: 38%; }
  .sector-clinic { width: 40%; }
  .hero-powered { left: 18%; width: 53%; }
  .home-inner { grid-template-columns: 1fr; width: min(calc(100% - 40px),720px); }
  .home-copy { max-width: 610px; }
  .domain-proof { max-width: 520px; }
  .website-environment { min-height: 0; }
}

@media (max-width: 760px) {
  .real-hero { min-height: 935px; height: auto; }
  .hero-layout { width: calc(100% - 32px); padding-top: 112px; }
  .real-hero .eyebrow { color: #615d56; font-size: 10px; }
  .real-hero h1 { font-size: clamp(2.65rem,11.2vw,3.55rem); }
  .real-hero .hero-lede { margin-top: 19px; color: #45423d; font-size: 14px; }
  .real-hero .hero-actions { margin-top: 21px; }
  .real-hero .button { min-height: 48px; }
  .real-hero .hero-text-link { min-height: 48px; }
  .hero-sector-stage { height: 470px; margin-top: 34px; }
  .sector-card { border-width: 3px; }
  .sector-main { top: 9%; right: 2%; width: 82%; height: 76%; }
  .sector-beauty { top: 0; left: 0; width: 40%; height: 27%; transform: rotate(-3deg); }
  .sector-clinic { bottom: 0; left: 1%; width: 43%; height: 27%; transform: rotate(3deg); }
  .sector-card figcaption { right: 9px; bottom: 8px; left: 9px; display: block; }
  .sector-card figcaption span { font-size: 9px; }
  .sector-card figcaption b { display: none; }
  .sector-main figcaption b { display: block; margin-top: 1px; font-size: 11px; }
  .hero-powered { right: 9px; bottom: 12px; left: 17%; width: auto; padding: 11px; }
  .hero-powered .powered-top { display: flex; padding-bottom: 9px; }
  .hero-powered .powered-row { display: none; }
  .powered-top b { font-size: 12px; }
  .powered-top small { font-size: 9px; }
  .powered-ai { margin-top: 9px; padding: 9px; }
  .powered-ai p { font-size: 9px; }
  .powered-ai > span { font-size: 14px; }

  .chaos-heading .eyebrow { font-size: 10px; }
  .external-tool b { font-size: 10px; }
  .external-tool small { font-size: 8px; }

  .home-story { padding: 112px 0 92px; }
  .home-inner { width: calc(100% - 32px); gap: 38px; }
  .home-copy .eyebrow { color: #5f5b54; font-size: 10px; }
  .home-copy h2 { font-size: clamp(2.65rem,11vw,3.5rem); }
  .home-copy > p:not(.eyebrow) { margin-top: 18px; font-size: 16px; }
  .domain-proof { gap: 11px 12px; margin-top: 27px; padding: 15px 0; }
  .domain-proof small { font-size: 11px; }
  .domain-proof s { font-size: 12px; }
  .domain-proof strong { font-size: 21px; }
  .domain-proof > span { font-size: 17px; }
  .website-environment { aspect-ratio: 4 / 5; }
  .website-environment > img { object-position: 53% center; }
  .website-environment figcaption { right: 16px; bottom: 14px; left: 16px; display: block; }
  .website-environment figcaption p { display: none; }

  .day-appointment { padding: 6px; }
  .unified-topbar { font-size: 9px; }
  .booking-entered small { font-size: 8px; }
  .booking-entered b { font-size: 9px; }
  .booking-entered em { font-size: 8px; }
  .day-track > span { font-size: 7px; }
  .day-appointment b { font-size: 8px; }
  .day-appointment small { font-size: 7px; }
  .appointment-old { left: 19%; width: 18%; }
  .appointment-new { left: 40%; width: 30%; }
  .appointment-later { right: 3%; width: 19%; }
  .system-reaction-list b { font-size: 8px; }
  .system-reaction-list em { font-size: 7px; }
  .ai-operation-top small, .ai-work-steps small { font-size: 7px; }
  .ai-work-steps b { font-size: 9px; }
  .campaign-final p { font-size: 9px; }
  .automation-continuation span { font-size: 8px; }
  .system-heading > p:last-child { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .sector-card, .website-environment > img { transform: none; }
  .spool-lines path { opacity: 0; }
}

/* v5 — interaction, brand colour and closing product surface */
.site-header .brand,
.human-footer .brand,
.unified-topbar > div { color: var(--rando-lime); }
.site-header .header-cta,
.button-dark,
.button-light,
.campaign-final button { color: var(--rando-black); background: var(--rando-lime); }
.site-header .header-cta:hover,
.button-dark:hover,
.button-light:hover,
.campaign-final button:hover { background: #ebff9e; }
.real-hero h1 em,
.home-copy h2 em,
.domain-proof strong { color: #70881a; }
.chaos-answer b,
.system-heading-ai h2 em,
.system-closing b,
.final-human-copy h2 em { color: var(--rando-lime); }

.sector-card {
  cursor: default;
  transition: transform .58s cubic-bezier(.2,.8,.2,1), filter .4s ease, box-shadow .58s ease;
}
.sector-card:focus-visible { z-index: 7; outline: 2px solid var(--rando-lime); outline-offset: 5px; transform: rotate(0) translateY(-6px) scale(1.035); }
@media (hover:hover) {
  .hero-sector-stage:hover .sector-card:not(:hover) { filter: saturate(.78) brightness(.86); }
  .sector-card:hover { z-index: 7; transform: rotate(0) translateY(-6px) scale(1.035); filter: none; box-shadow: 0 38px 90px rgba(31,27,21,.24); }
}

.tool-message { top: 78%; left: 42%; }
.system-heading-ai h2 { font-size: clamp(2.75rem,4.15vw,4.25rem); }

.final-product-pair {
  position: absolute;
  z-index: 3;
  top: 17%;
  right: max(24px,calc((100vw - var(--max)) / 2));
  width: min(650px,47vw);
  height: min(650px,70vh);
  min-height: 560px;
}
.final-web-panel {
  position: absolute;
  top: 4%;
  left: 0;
  width: 88%;
  height: 60%;
  overflow: hidden;
  color: #171715;
  background: #f7f6f1;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 35px 80px rgba(0,0,0,.34);
  transform: rotate(-2.2deg);
  transform-origin: 70% 80%;
}
.final-panel-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; padding: 0 12px; color: #7d7a73; border-bottom: 1px solid #deddd7; font-size: 8px; }
.final-panel-top > div { display: flex; align-items: center; gap: 6px; color: #171715; }
.final-panel-top .brand-mark { width: 14px; height: 14px; color: var(--rando-lime); }
.final-panel-top .brand-mark i { width: 5px; height: 5px; }
.final-panel-top .brand-mark i:nth-child(1) { top: 5px; }
.final-panel-top b { color: #71881b; font-family: Manrope,sans-serif; font-size: 11px; }
.final-panel-top > i { justify-self: end; width: 21px; height: 21px; border-radius: 50%; background: #dfddd6; }
.final-panel-body { display: grid; grid-template-columns: 42px 1fr; height: calc(100% - 40px); }
.final-panel-body > aside { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 17px; background: #171815; }
.final-panel-body > aside b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; background: var(--rando-lime); font-size: 9px; }
.final-panel-body > aside i { width: 13px; height: 13px; border: 1px solid #5d5e57; border-radius: 3px; }
.final-calendar { min-width: 0; padding: 16px; }
.final-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.final-calendar-head div { display: flex; flex-direction: column; }
.final-calendar-head small { color: #8b887f; font-size: 7px; letter-spacing: .12em; }
.final-calendar-head b { font-family: Manrope,sans-serif; font-size: 17px; letter-spacing: -.04em; }
.final-calendar-head > span { padding: 6px 9px; border: 1px solid #deddd7; color: #77746d; font-size: 8px; }
.final-calendar-grid { display: grid; grid-template-columns: 35px 1fr 1fr; height: calc(100% - 48px); overflow: hidden; border: 1px solid #dfded8; background: #fff; }
.final-time { display: flex; flex-direction: column; justify-content: space-around; padding: 29px 6px 4px; color: #9a978f; font-size: 6px; }
.final-staff { position: relative; padding: 8px; border-left: 1px solid #ebe9e3; background-image: linear-gradient(#eeece7 1px,transparent 1px); background-size: 100% 16.66%; }
.final-staff > b { font-size: 8px; }
.final-staff > small { float: right; color: #96938b; font-size: 6px; }
.fp-appt { position: absolute; right: 7px; left: 7px; display: flex; flex-direction: column; padding: 6px; overflow: hidden; border-left: 2px solid #8f9d69; background: #eef1e7; }
.fp-appt b { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.fp-appt small { color: #737169; font-size: 6px; }
.fp-one { top: 27%; height: 25%; }
.fp-two { top: 65%; height: 23%; border-color: #b18a6a; background: #f1ebe5; }
.fp-three { top: 19%; height: 24%; border-color: #8b7c9b; background: #efecf1; }
.fp-four { top: 53%; height: 29%; border-color: #9fac58; background: #f0f2e5; }

.final-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 236px;
  height: 492px;
  padding: 8px;
  overflow: hidden;
  color: #171715;
  background: #101110;
  border: 1px solid #63635f;
  border-radius: 39px;
  box-shadow: 0 34px 85px rgba(0,0,0,.48);
  transform: rotate(2.1deg);
}
.phone-hardware { position: absolute; z-index: 9; top: 15px; left: 50%; width: 77px; height: 21px; border-radius: 20px; background: #090909; transform: translateX(-50%); }
.phone-hardware i { position: absolute; top: 7px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: #161e29; box-shadow: inset 0 0 2px #506685; }
.phone-screen { position: absolute; inset: 8px; overflow: hidden; padding: 37px 15px 16px; background: #f3f0e9; border-radius: 31px; transition: opacity .38s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.phone-app-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.phone-app-top > div { display: flex; align-items: center; gap: 6px; color: #71881b; }
.phone-app-top .brand-mark { width: 15px; height: 15px; }
.phone-app-top .brand-mark i { width: 5px; height: 5px; }
.phone-app-top .brand-mark i:nth-child(1) { top: 5px; }
.phone-app-top b { font-family: Manrope,sans-serif; font-size: 12px; }
.phone-app-top > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #dfddd5; font-size: 7px; }
.phone-today { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 120px; padding: 16px; border: 0; border-radius: 17px; color: #fff; background: #191a17; text-align: left; cursor: pointer; }
.phone-today small { color: var(--rando-lime); font-size: 7px; letter-spacing: .15em; }
.phone-today b { margin-top: 8px; font-family: Manrope,sans-serif; font-size: 17px; font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.phone-today > span { display: flex; justify-content: space-between; align-items: center; margin-top: auto; color: #b8bab2; font-size: 8px; }
.phone-today > span i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #171715; background: var(--rando-lime); font-style: normal; }
.phone-ai-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 67px; margin-top: 10px; padding: 11px; border: 0; border-radius: 15px 15px 15px 4px; color: #171715; background: var(--rando-lime); text-align: left; }
.phone-ai-card > span { font-size: 17px; }
.phone-ai-card div { display: flex; flex-direction: column; }
.phone-ai-card small { font-size: 6px; letter-spacing: .13em; }
.phone-ai-card b { margin-top: 2px; font-size: 9px; line-height: 1.2; }
.phone-ai-card > i { font-size: 11px; font-style: normal; }
.phone-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.phone-categories button { min-height: 69px; padding: 10px; border: 1px solid #d8d5cc; border-radius: 13px; background: #fbfaf6; text-align: left; }
.phone-categories i { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 8px; border-radius: 6px; color: #657a1b; background: #e7efc9; font-size: 8px; font-style: normal; }
.phone-categories span { display: block; font-size: 8px; font-weight: 600; }
.phone-day-screen { opacity: 0; pointer-events: none; transform: translateX(24%); }
.final-phone.day-open .phone-home-screen { opacity: 0; pointer-events: none; transform: translateX(-20%); }
.final-phone.day-open .phone-day-screen { opacity: 1; pointer-events: auto; transform: none; }
.phone-day-back { display: flex; gap: 7px; align-items: center; padding: 0; border: 0; color: #66635d; background: transparent; font-size: 8px; cursor: pointer; }
.phone-day-head { display: flex; flex-direction: column; margin: 24px 0 17px; }
.phone-day-head small { color: #7a911e; font-size: 7px; letter-spacing: .13em; }
.phone-day-head b { margin-top: 5px; font-family: Manrope,sans-serif; font-size: 28px; letter-spacing: -.06em; }
.phone-day-head span { color: #74716a; font-size: 9px; }
.phone-day-list { display: grid; grid-template-columns: 36px 1fr; border-top: 1px solid #d8d5cd; }
.phone-day-list > i { padding-top: 16px; color: #8c8981; border-bottom: 1px solid #d8d5cd; font-size: 8px; font-style: normal; }
.phone-day-list > p { display: flex; flex-direction: column; min-height: 75px; margin: 0; padding: 14px 9px; border-bottom: 1px solid #d8d5cd; border-left: 2px solid #9ead5d; background: rgba(255,255,255,.48); }
.phone-day-list b { font-size: 10px; }
.phone-day-list small { margin-top: 3px; color: #77746d; font-size: 8px; }

.final-human-copy { z-index: 4; width: min(650px,47vw); }
.final-human-copy h2 { font-size: clamp(3.1rem,4.45vw,4.85rem); }
.human-footer { z-index: 6; }

@media (max-width: 1100px) {
  .final-product-pair { width: 46vw; }
  .final-web-panel { width: 96%; }
  .final-phone { width: 218px; height: 460px; }
  .phone-categories button { min-height: 61px; }
}

@media (max-width: 1020px) {
  .human-final { height: auto; min-height: 1180px; max-height: none; }
  .human-final-shade { background: linear-gradient(180deg,rgba(8,8,8,.6),rgba(8,8,8,.82) 55%,rgba(8,8,8,.94)); }
  .quiet-status { top: 100px; }
  .final-human-copy { top: 185px; bottom: auto; width: min(690px,calc(100% - 48px)); }
  .final-product-pair { top: auto; right: auto; bottom: 68px; left: 50%; width: min(700px,calc(100% - 40px)); height: 570px; min-height: 0; transform: translateX(-50%); }
  .final-web-panel { width: 88%; }
}

@media (max-width: 760px) {
  .tool-message { top: 75%; left: 34%; }
  .system-heading-ai h2 { font-size: clamp(2.3rem,9.6vw,3.05rem); }
  .human-final { min-height: 1240px; }
  .quiet-status { top: 90px; }
  .final-human-copy { top: 178px; right: 20px; bottom: auto; left: 20px; width: auto; }
  .final-human-copy h2 { font-size: clamp(2.55rem,10.5vw,3.4rem); }
  .final-product-pair { bottom: 62px; width: calc(100% - 24px); height: 535px; }
  .final-web-panel { top: 3%; left: 0; width: 96%; height: 315px; transform: rotate(-1.5deg); }
  .final-calendar { padding: 11px; }
  .final-phone { right: 2px; width: 207px; height: 442px; }
  .phone-screen { padding-right: 13px; padding-left: 13px; }
  .phone-today { min-height: 111px; padding: 14px; }
  .phone-today b { font-size: 15px; }
  .phone-ai-card { min-height: 62px; }
  .phone-categories button { min-height: 58px; padding: 8px; }
  .phone-categories i { margin-bottom: 5px; }
  .human-footer { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sector-card { transition: none; }
  .phone-screen { transition: none; }
}

/* v6 — connected channels, slot-accurate calendar, Mac presentation */
.unified-channel-nav { gap: 17px; padding-top: 19px; }
.unified-channel-nav > b { margin-bottom: 4px; }
.unified-channel-nav .channel-icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 29px;
  height: 29px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,.18);
}
.unified-channel-nav .channel-icon svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.unified-channel-nav .channel-whatsapp { background: #25d366; }
.unified-channel-nav .channel-whatsapp svg path:last-child { fill: #fff; stroke: none; }
.unified-channel-nav .channel-instagram { background: #d83d79; }
.unified-channel-nav .channel-google { background: #fff; }
.unified-channel-nav .channel-google > i {
  display: block;
  width: auto;
  height: auto;
  color: transparent;
  background: conic-gradient(from -42deg,#4285f4 0 30%,#34a853 30% 48%,#fbbc05 48% 68%,#ea4335 68% 82%,#4285f4 82% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 0;
  border-radius: 0;
  font-family: Manrope,sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
}

.day-view { width: 66%; overflow: hidden; }
.schedule-board {
  position: absolute;
  inset: 44px 0 0;
  display: grid;
  grid-template-columns: 43px repeat(3,minmax(0,1fr));
  grid-template-rows: 38px minmax(0,1fr);
  overflow: hidden;
  background: #fff;
}
.schedule-corner,
.schedule-person { display: flex; justify-content: center; flex-direction: column; padding: 7px 8px; border-right: 1px solid #e9e7e1; border-bottom: 1px solid #e4e2dc; }
.schedule-corner { color: #aaa79e; font-size: 6px; letter-spacing: .1em; text-align: center; }
.schedule-person b { font-size: 8px; line-height: 1.1; }
.schedule-person small { margin-top: 2px; color: #918e86; font-size: 6px; }
.schedule-hours {
  display: grid;
  grid-row: 2;
  grid-template-rows: repeat(7,minmax(0,1fr));
  color: #a29f97;
  border-right: 1px solid #e9e7e1;
  font-size: 6px;
}
.schedule-hours span { display: flex; justify-content: center; align-items: flex-start; padding-top: 5px; border-bottom: 1px solid #ebe9e4; }
.schedule-column {
  display: grid;
  grid-row: 2;
  grid-template-rows: repeat(7,minmax(0,1fr));
  min-width: 0;
  border-right: 1px solid #ebe9e4;
  background-image: linear-gradient(#ebe9e4 1px,transparent 1px);
  background-size: 100% calc(100% / 7);
}
.schedule-appointment {
  position: relative;
  z-index: 1;
  grid-row: var(--slot) / span var(--span);
  display: flex;
  align-self: stretch;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 2px 3px;
  padding: 5px 6px;
  overflow: hidden;
  border-left: 2px solid #8e9b72;
  color: #34352f;
  background: #edf0e7;
}
.schedule-appointment b,
.schedule-appointment span,
.schedule-appointment small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-appointment b { font-size: 7px; line-height: 1.05; }
.schedule-appointment span { margin-top: 2px; font-size: 6.5px; line-height: 1.05; }
.schedule-appointment small { margin-top: auto; color: #77756e; font-size: 5.5px; }
.schedule-appointment em { position: absolute; top: 4px; right: 4px; padding: 2px 3px; color: #566514; background: rgba(255,255,255,.67); font-size: 4.5px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.schedule-appointment.package b { padding-right: 27px; }
.schedule-appointment.tone-lime { border-color: #8aa51d; background: #e9efcf; }
.schedule-appointment.tone-clay { border-color: #b18468; background: #f1e9e2; }
.schedule-appointment.tone-violet { border-color: #8b7c9b; background: #efecf2; }
.system-reaction-list { left: calc(66% + 36px); }

.final-mac {
  position: absolute;
  top: 3%;
  left: 0;
  width: 88%;
  height: 66%;
  filter: drop-shadow(0 32px 45px rgba(0,0,0,.31));
  transform: rotate(-2.2deg);
  transform-origin: 70% 80%;
}
.final-mac .final-web-panel {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: calc(100% - 42px);
  border: 8px solid #171816;
  border-bottom-width: 5px;
  border-radius: 9px 9px 2px 2px;
  box-shadow: none;
  transform: none;
}
.final-mac-chin {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 37px;
  background: #d8d7d2;
  border-radius: 0 0 9px 9px;
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.final-mac-chin span { width: 12px; height: 12px; border: 1px solid #a4a39f; border-radius: 50%; }
.final-mac-stand { position: absolute; z-index: 0; bottom: -49px; left: 50%; width: 94px; height: 54px; background: #c9c8c3; transform: translateX(-50%) perspective(90px) rotateX(-8deg); clip-path: polygon(26% 0,74% 0,100% 100%,0 100%); }
.final-mac-foot { position: absolute; z-index: 1; bottom: -52px; left: 50%; width: 128px; height: 5px; border-radius: 50%; background: #d9d8d3; box-shadow: 0 4px 7px rgba(0,0,0,.26); transform: translateX(-50%); }
.final-phone { z-index: 5; }

@media (max-width: 1100px) {
  .final-mac { width: 96%; }
}

@media (max-width: 760px) {
  .day-view { right: 13px; left: 13px; width: auto; }
  .schedule-board { grid-template-columns: 35px repeat(3,minmax(0,1fr)); }
  .schedule-person { padding-right: 4px; padding-left: 4px; }
  .schedule-appointment { margin-right: 2px; margin-left: 2px; padding: 4px; }
  .schedule-appointment em { display: none; }
  .schedule-appointment.package b { padding-right: 0; }
  .schedule-appointment span { font-size: 5.5px; }
  .final-mac { top: 2%; width: 96%; height: 335px; transform: rotate(-1.5deg); }
  .final-mac .final-web-panel { height: 286px; }
}

@media (prefers-reduced-motion: reduce) {
  .final-mac { transform: none; }
}

/* v10 — Rando color system and cinematic multi-sector hero */
:root {
  --rando-black: #0f0f10;
  --rando-paper: #f2f0ea;
  --rando-stone: #e6e2d9;
  --rando-sand: #e6e2d9;
  --rando-lime: #d0fa43;
  --rando-mocha: #806a58;
  --paper: #f2f0ea;
  --paper-2: #e6e2d9;
  --accent: #d0fa43;
  --accent-2: #d0fa43;
  --dark: #0f0f10;
  --white: #ffffff;
}

/* Dark technology opening */
.real-hero {
  min-height: 780px;
  height: 100svh;
  max-height: 980px;
  color: var(--rando-paper);
  background: var(--rando-black);
}
.real-hero .hero-layout {
  grid-template-columns: minmax(440px,.72fr) minmax(650px,1.28fr);
  gap: 30px;
  width: min(calc(100% - 48px),1440px);
  padding-top: 86px;
}
.real-hero-copy { padding-bottom: 12px; }
.real-hero .eyebrow { color: #b9b7b0; }
.real-hero h1 {
  max-width: 660px;
  color: var(--rando-paper);
  font-size: clamp(3.7rem,5.35vw,5.9rem);
}
.real-hero h1 em {
  color: var(--rando-paper);
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
  box-shadow: inset 0 -.08em 0 rgba(208,250,67,.92);
}
.real-hero .hero-lede { color: #c8c5bd; }
.real-hero .hero-text-link { color: var(--rando-paper); border-color: rgba(242,240,234,.38); }

.hero-sector-stage {
  height: min(760px,78vh);
  min-height: 620px;
}
.sector-card {
  border-color: var(--rando-paper);
  box-shadow: 0 34px 84px rgba(0,0,0,.38);
  will-change: transform,opacity;
}
.sector-main {
  z-index: 3;
  top: 7%;
  right: -3%;
  width: 88%;
  height: 86%;
  transform: rotate(.5deg);
  animation: hair-hero-in .62s cubic-bezier(.2,.75,.2,1) .04s backwards;
}
.sector-beauty {
  z-index: 1;
  top: 0;
  left: -2%;
  width: 35%;
  height: 29%;
  transform: rotate(-3.5deg);
  animation: beauty-preview-in .72s cubic-bezier(.2,.75,.2,1) .3s backwards;
}
.sector-clinic {
  z-index: 1;
  bottom: 0;
  left: 1%;
  width: 31%;
  height: 25%;
  transform: rotate(2.5deg);
  animation: clinic-preview-in .72s cubic-bezier(.2,.75,.2,1) .4s backwards;
}
.sector-beauty figcaption { top: 11px; bottom: auto; display: block; }
.sector-clinic figcaption { display: block; }
.sector-beauty figcaption b,
.sector-clinic figcaption b { display: block; margin-top: 1px; opacity: .7; }

@keyframes hair-hero-in {
  from { opacity: 0; transform: translateY(14px) rotate(.15deg) scale(.985); }
  to { opacity: 1; transform: rotate(.5deg); }
}
@keyframes beauty-preview-in {
  from { opacity: 0; transform: translate(28px,18px) rotate(-1deg) scale(.95); }
  to { opacity: 1; transform: rotate(-3.5deg); }
}
@keyframes clinic-preview-in {
  from { opacity: 0; transform: translate(24px,-16px) rotate(.8deg) scale(.95); }
  to { opacity: 1; transform: rotate(2.5deg); }
}

/* Porcelain human/ownership surfaces */
.home-story { color: var(--rando-black); background: var(--rando-paper); }
.home-copy .eyebrow { color: #69665f; }
.home-copy h2 { color: var(--rando-black); }
.home-copy h2 em {
  color: var(--rando-black);
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
  box-shadow: inset 0 -.14em 0 var(--rando-lime);
}
.home-copy > p:not(.eyebrow) { color: #4d4a44; }
.domain-proof { border-color: rgba(15,15,16,.2); }
.domain-proof small { color: #706d66; }
.domain-proof s { color: #5e5b55; text-decoration-color: rgba(15,15,16,.58); }
.domain-proof > span { color: #817e76; }
.domain-proof strong {
  width: fit-content;
  padding: 0 0 3px;
  color: var(--rando-black);
  background: transparent;
  border-bottom: 4px solid var(--rando-lime);
}
.website-environment { border-color: rgba(15,15,16,.16); box-shadow: 0 42px 92px rgba(45,40,32,.17); }

/* Shared light product surfaces */
.unified-os,
.unified-topbar,
.operating-view,
.final-web-panel,
.phone-screen { background: var(--rando-paper); }
.campaign-final button.sent { background: var(--rando-paper); }
.final-mac-chin,
.final-mac-stand,
.final-mac-foot { background: var(--rando-stone); }

/* Keep the operating-system headline clear of the product */
.system-heading { top: clamp(58px,7.5vh,78px); }
.system-heading h2 { font-size: clamp(2.65rem,3.6vw,3.6rem); }
.system-heading > p:last-child { margin-top: 12px; }
.system-heading-os .system-brand-statement { color: var(--rando-lime); }
.unified-os {
  height: clamp(430px,56vh,520px);
  min-height: 430px;
  transition: height .5s cubic-bezier(.2,.8,.2,1), transform .2s linear;
}
[data-system-phase="0"] .unified-os { height: clamp(400px,52vh,480px); min-height: 400px; }

@media (max-width: 1180px) {
  .real-hero .hero-layout {
    grid-template-columns: minmax(390px,.78fr) minmax(530px,1.22fr);
    gap: 20px;
    width: calc(100% - 40px);
  }
  .real-hero h1 { font-size: clamp(3.4rem,5vw,4.85rem); }
  .hero-sector-stage { min-height: 590px; }
  .sector-main { right: -2%; width: 90%; }
}

@media (max-width: 1020px) {
  .real-hero { height: auto; min-height: 1080px; max-height: none; }
  .real-hero .hero-layout {
    display: block;
    width: min(calc(100% - 40px),760px);
    padding: 126px 0 44px;
  }
  .real-hero-copy { max-width: 650px; padding: 0; }
  .real-hero h1 { font-size: clamp(3.4rem,8.3vw,5rem); }
  .hero-sector-stage { height: 600px; min-height: 0; margin-top: 42px; }
  .sector-main { top: 9%; right: 0; width: 86%; height: 82%; }
  .sector-beauty { top: 0; left: 0; width: 37%; height: 28%; }
  .sector-clinic { bottom: 0; left: 1%; width: 34%; height: 26%; }
}

@media (max-width: 760px) {
  .real-hero { min-height: 950px; }
  .real-hero .hero-layout { width: calc(100% - 32px); padding-top: 112px; }
  .real-hero .eyebrow { color: #b9b7b0; font-size: 10px; }
  .real-hero h1 { font-size: clamp(2.65rem,11.2vw,3.55rem); }
  .real-hero .hero-lede { margin-top: 19px; color: #c8c5bd; font-size: 14px; }
  .real-hero .hero-actions { margin-top: 23px; }
  .hero-sector-stage { height: 465px; margin-top: 35px; }
  .sector-main { top: 9%; right: 0; width: 85%; height: 79%; }
  .sector-beauty { top: 0; left: 0; width: 40%; height: 27%; }
  .sector-clinic { bottom: 0; left: 1%; width: 37%; height: 25%; }
  .sector-beauty figcaption b,
  .sector-clinic figcaption b { display: none; }

  .system-heading { top: 76px; }
  .system-heading h2 { font-size: clamp(2.25rem,9.4vw,2.85rem); }
  [data-system-phase="0"] .unified-os { height: 48vh; min-height: 380px; }
  [data-system-phase="1"] .unified-os,
  [data-system-phase="2"] .unified-os { height: 54vh; min-height: 430px; }
}

@media (hover:hover) and (min-width:1021px) {
  .hero-sector-stage:hover .sector-card:not(:hover) { filter: none; }
  .sector-main:hover { z-index: 3; transform: rotate(.5deg); box-shadow: 0 38px 92px rgba(0,0,0,.42); }
  .sector-beauty:hover { z-index: 4; transform: translate(-6px,5px) rotate(-2deg) scale(1.035); }
  .sector-clinic:hover { z-index: 4; transform: translate(-4px,-4px) rotate(1.5deg) scale(1.035); }
  .sector-beauty:hover figcaption b,
  .sector-clinic:hover figcaption b { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sector-main,
  .sector-beauty,
  .sector-clinic { animation: none; }
  .unified-os { transition: none; }
}

/* v13 — Rando Mocha editorial accents */
.home-copy .eyebrow,
.domain-proof small,
.home-chapter-caption { color: var(--rando-mocha); }

.domain-proof { border-color: rgba(128,106,88,.34); }
.domain-proof s {
  color: #665c54;
  text-decoration-color: var(--rando-mocha);
}
.domain-proof > span { color: var(--rando-mocha); }
.website-environment { border-color: rgba(128,106,88,.34); }

.schedule-appointment.tone-clay {
  border-color: var(--rando-mocha);
  background: rgba(128,106,88,.11);
}
.schedule-appointment.tone-clay em { color: var(--rando-mocha); }

.final-calendar-head small { color: var(--rando-mocha); }
.final-calendar-head > span {
  color: var(--rando-mocha);
  border-color: rgba(128,106,88,.3);
}
.final-mac-chin span { border-color: rgba(128,106,88,.55); }
.phone-app-top > span {
  color: var(--rando-mocha);
  background: rgba(128,106,88,.12);
}
.phone-categories button {
  transition: border-color .22s ease, background-color .22s ease;
}
.phone-categories button:focus-visible {
  outline: 2px solid var(--rando-mocha);
  outline-offset: 2px;
}

@media (hover:hover) {
  .phone-categories button:hover {
    border-color: var(--rando-mocha);
    background: rgba(128,106,88,.07);
  }
}

/* v16 — commercial layer: header access, pricing and site footer */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-login {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 5px;
  color: rgba(242,240,234,.74);
  font-size: 13px;
  font-weight: 600;
  transition: color .2s ease;
}
.header-login:hover { color: var(--rando-paper); }
.header-login:focus-visible {
  outline: 2px solid var(--rando-lime);
  outline-offset: 4px;
  border-radius: 2px;
}

.pricing-section {
  scroll-margin-top: 88px;
  padding: clamp(110px,11vw,165px) 24px clamp(95px,9vw,135px);
  color: var(--rando-black);
  background: var(--rando-paper);
  border-top: 1px solid rgba(128,106,88,.3);
}
.pricing-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 48px 32px;
  width: min(100%,var(--max));
  margin: 0 auto;
}
.pricing-intro .eyebrow {
  margin-bottom: 18px;
  color: var(--rando-mocha);
}
.pricing-intro h2 {
  max-width: 850px;
  font-size: clamp(3rem,5.5vw,5.75rem);
}
.pricing-intro > p:last-child {
  max-width: 410px;
  margin: 24px 0 0;
  color: #625e58;
  font-size: 16px;
}
.billing-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 198px;
  padding: 3px;
  border: 1px solid rgba(128,106,88,.38);
  background: var(--rando-stone);
}
.billing-toggle button {
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  color: #625e58;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.billing-toggle button.is-selected {
  color: var(--rando-black);
  background: var(--rando-lime);
}
.billing-toggle button:focus-visible {
  outline: 2px solid var(--rando-black);
  outline-offset: -3px;
}

.pricing-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.pricing-card {
  display: flex;
  min-height: 570px;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(128,106,88,.42);
  border-radius: 3px;
  background: rgba(255,255,255,.2);
}
.pricing-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(128,106,88,.28);
  color: var(--rando-mocha);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.pricing-card header small {
  color: rgba(128,106,88,.6);
  font-size: 10px;
}
.pricing-card h3 {
  margin: 34px 0 0;
  font-family: Manrope,sans-serif;
  font-size: clamp(2rem,3vw,3.15rem);
  font-weight: 500;
  letter-spacing: -.05em;
}
.package-price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 92px;
  padding: 10px 0 20px;
  border-bottom: 1px solid rgba(15,15,16,.12);
}
.package-price strong {
  font-family: Manrope,sans-serif;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
}
.package-price span {
  margin-bottom: 8px;
  color: var(--rando-mocha);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.package-description-slot {
  display: grid;
  gap: 11px;
  min-height: 86px;
  align-content: center;
}
.package-description-slot i,
.package-feature-slots span {
  display: block;
  height: 6px;
  background: var(--rando-stone);
}
.package-description-slot i:first-child { width: 74%; }
.package-description-slot i:last-child { width: 48%; }
.package-feature-slots {
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid rgba(15,15,16,.12);
  list-style: none;
}
.package-feature-slots li {
  display: grid;
  grid-template-columns: 13px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid rgba(15,15,16,.1);
}
.package-feature-slots i {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(128,106,88,.66);
}
.package-feature-slots span { width: 64%; }
.package-feature-slots li:nth-child(2) span { width: 77%; }
.package-feature-slots li:nth-child(3) span { width: 52%; }
.package-feature-slots li:nth-child(4) span { width: 69%; }
.package-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  margin-top: auto;
  padding: 0 17px;
  color: var(--rando-black);
  background: var(--rando-lime);
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s ease;
}
.package-cta:hover { background: #dcff68; }
.package-cta:focus-visible {
  outline: 2px solid var(--rando-black);
  outline-offset: 3px;
}
.pricing-trial {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 25px;
  border-top: 1px solid rgba(128,106,88,.34);
  font-family: Manrope,sans-serif;
  font-size: clamp(1.45rem,2.2vw,2rem);
  font-weight: 500;
  letter-spacing: -.035em;
}

.site-footer {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  padding: 78px 24px 28px;
  border-top: 0;
  color: var(--rando-paper);
  background: var(--rando-black);
  font-size: inherit;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(220px,.85fr) minmax(0,1.75fr);
  gap: 78px 64px;
  width: min(100%,var(--max));
  margin: 0 auto;
}
.footer-brand .brand { color: var(--rando-lime); }
.footer-brand { display: block; }
.footer-brand p {
  max-width: 250px;
  margin: 24px 0 0;
  color: rgba(242,240,234,.56);
  font-size: 14px;
  line-height: 1.55;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 30px;
}
.footer-links > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footer-links h2 {
  margin: 0 0 7px;
  color: rgba(242,240,234,.42);
  font-family: DM Sans,Arial,sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
}
.footer-links a {
  color: rgba(242,240,234,.7);
  font-size: 13px;
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--rando-lime); opacity: 1; }
.footer-links a:focus-visible {
  outline: 1px solid var(--rando-lime);
  outline-offset: 4px;
}
.footer-legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(128,106,88,.42);
  color: rgba(242,240,234,.42);
  font-size: 11px;
}

@media (max-width:980px) {
  .pricing-inner { grid-template-columns: 1fr auto; }
  .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pricing-card:nth-child(3) { grid-column: 1 / -1; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width:760px) {
  .header-actions { gap: 9px; }
  .header-login { min-height: 36px; font-size: 12px; }
  .pricing-section {
    scroll-margin-top: 72px;
    padding: 96px 18px 82px;
  }
  .pricing-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 31px;
  }
  .pricing-intro h2 { font-size: clamp(2.75rem,11vw,3.55rem); }
  .pricing-intro > p:last-child { margin-top: 18px; }
  .billing-toggle { grid-column: 1; width: 188px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; }
  .pricing-card,
  .pricing-card:nth-child(3) {
    grid-column: auto;
    min-height: 520px;
    padding: 23px;
  }
  .site-footer { padding: 68px 20px 25px; }
  .footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 38px 24px; }
}

@media (max-width:430px) {
  .site-header { padding-right: 8px; }
  .header-actions { gap: 6px; }
  .header-login { padding: 0 2px; }
  .site-header .header-cta { padding-right: 11px; padding-left: 11px; }
}

/* v17 — mobile-first product story */
.system-story { height: 220vh; min-height: 1640px; }
.system-sticky { min-height: 760px; }
.mobile-product-stage {
  position: absolute;
  z-index: 3;
  right: max(24px,calc((100vw - 1180px) / 2));
  bottom: clamp(45px,5.5vh,64px);
  left: max(24px,calc((100vw - 1180px) / 2));
  height: clamp(485px,63vh,610px);
  perspective: 1400px;
}
.mobile-first-note {
  position: absolute;
  z-index: 2;
  top: 43%;
  left: 2.5%;
  display: grid;
  grid-template-columns: auto 82px;
  gap: 5px 13px;
  align-items: center;
  color: #8f9189;
  transform: translateY(-50%);
}
.mobile-first-note span { grid-column: 1; color: var(--rando-lime); font-size: 8px; letter-spacing: .17em; }
.mobile-first-note b { grid-column: 1; color: var(--rando-paper); font-family: Manrope,sans-serif; font-size: 13px; font-weight: 500; }
.mobile-first-note i { grid-row: 1 / 3; grid-column: 2; width: 82px; height: 1px; background: linear-gradient(90deg,rgba(208,250,67,.65),transparent); }

.web-companion {
  position: absolute;
  z-index: 1;
  top: 17%;
  right: 1%;
  width: 51%;
  height: 47%;
  opacity: .78;
  transform: rotate(2.4deg) translateZ(-55px);
  transform-origin: 50% 80%;
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.web-companion-label {
  position: absolute;
  top: -29px;
  right: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8bab2;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.web-companion-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--rando-lime); box-shadow: 0 0 0 5px rgba(208,250,67,.08); }
.web-companion-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--rando-black);
  background: var(--rando-paper);
  border: 7px solid #20211f;
  border-radius: 8px;
  box-shadow: 0 30px 75px rgba(0,0,0,.38);
}
.web-companion-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 38px;
  padding: 0 11px;
  color: #7d7b74;
  border-bottom: 1px solid #dbd8d0;
  font-size: 7px;
}
.web-companion-top > div { display: flex; align-items: center; gap: 6px; color: #71891d; }
.web-companion-top .brand-mark { width: 13px; height: 13px; color: var(--rando-lime); }
.web-companion-top .brand-mark i { width: 4px; height: 4px; }
.web-companion-top .brand-mark i:nth-child(1) { top: 5px; }
.web-companion-top b { font-family: Manrope,sans-serif; font-size: 9px; }
.web-companion-top > em { justify-self: end; display: flex; align-items: center; gap: 5px; font-style: normal; }
.web-companion-top > em i { width: 5px; height: 5px; border-radius: 50%; background: var(--rando-lime); }
.web-companion-body { display: grid; grid-template-columns: 35px 1fr; height: calc(100% - 38px); }
.web-companion-body > aside { display: flex; flex-direction: column; align-items: center; gap: 17px; padding-top: 12px; background: #191a18; }
.web-companion-body > aside b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--rando-lime); font-size: 7px; }
.web-companion-body > aside i { width: 11px; height: 11px; border: 1px solid #595a55; border-radius: 3px; }
.web-calendar-mini { min-width: 0; padding: 11px 12px 12px; }
.web-calendar-mini > header { display: flex; justify-content: space-between; align-items: center; height: 31px; }
.web-calendar-mini > header div { display: flex; flex-direction: column; }
.web-calendar-mini > header small { color: var(--rando-mocha); font-size: 5px; letter-spacing: .12em; }
.web-calendar-mini > header b { font-family: Manrope,sans-serif; font-size: 11px; }
.web-calendar-mini > header > span { padding: 4px 7px; border: 1px solid #d9d6cf; color: #77746d; font-size: 6px; }
.web-calendar-grid { display: grid; grid-template-columns: 26px repeat(3,1fr); height: calc(100% - 32px); overflow: hidden; border: 1px solid #dedbd4; background: #fff; }
.web-time { display: flex; flex-direction: column; justify-content: space-around; padding: 23px 4px 3px; color: #9a978f; font-size: 5px; }
.web-staff { position: relative; padding: 7px 5px; border-left: 1px solid #e8e5df; background-image: linear-gradient(#ece9e3 1px,transparent 1px); background-size: 100% 16.66%; }
.web-staff > b { font-size: 6px; }
.web-staff > small { float: right; color: #96938b; font-size: 4.5px; }
.web-event { position: absolute; right: 4px; left: 4px; overflow: hidden; padding: 5px 4px; border-left: 2px solid #96a36d; color: #4b4c45; background: #edf0e6; font-size: 5px; font-style: normal; white-space: nowrap; }
.we-a { top: 24%; height: 21%; }
.we-b { top: 62%; height: 25%; border-color: var(--rando-mocha); background: rgba(128,106,88,.11); }
.we-c { top: 17%; height: 26%; border-color: #8b7c9b; background: #efecf2; }
.we-d { top: 52%; height: 31%; border-color: #96a82c; background: #edf2d6; }
.we-e { top: 31%; height: 23%; border-color: #a68873; background: #f1e9e2; }
.we-f { top: 68%; height: 18%; }
[data-system-phase="1"] .web-companion,
[data-system-phase="2"] .web-companion { opacity: .34; transform: translateX(5%) rotate(3.2deg) translateZ(-80px); }

.phone-orbit {
  --phone-rx: 0deg;
  --phone-ry: 0deg;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 47%;
  width: clamp(250px,25.5vw,310px);
  height: 100%;
  transform: translateX(-50%) perspective(1200px) rotateX(var(--phone-rx)) rotateY(var(--phone-ry));
  transform-style: preserve-3d;
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.rando-iphone {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px;
  background: linear-gradient(135deg,#777b79 0%,#222421 12%,#080909 52%,#40433f 88%,#171817 100%);
  border: 1px solid #6c706d;
  border-radius: 51px;
  box-shadow: -24px 32px 70px rgba(0,0,0,.42), 14px 22px 55px rgba(0,0,0,.32), inset 1px 1px rgba(255,255,255,.28), inset -2px -2px rgba(0,0,0,.8);
  transform: translateZ(38px);
  transform-style: preserve-3d;
}
.rando-iphone::after { content: ""; position: absolute; z-index: 40; inset: 9px; border-radius: 42px; background: linear-gradient(118deg,rgba(255,255,255,.12),transparent 18%,transparent 76%,rgba(255,255,255,.04)); pointer-events: none; }
.iphone-side { position: absolute; left: -4px; width: 3px; border-radius: 3px 0 0 3px; background: #777b78; box-shadow: inset 1px 0 rgba(255,255,255,.2); }
.iphone-side-top { top: 108px; height: 42px; }
.iphone-side-bottom { top: 160px; height: 67px; }
.iphone-screen-shell { position: relative; height: 100%; overflow: hidden; color: var(--rando-black); background: var(--rando-paper); border: 1px solid #090909; border-radius: 43px; }
.iphone-island { position: absolute; z-index: 35; top: 12px; left: 50%; width: 83px; height: 22px; border-radius: 30px; background: #050505; transform: translateX(-50%); }
.iphone-island i { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: #101a25; box-shadow: inset 0 0 2px #586c83; }
.iphone-status { position: absolute; z-index: 34; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 18px 0 20px; font-size: 7px; transition: color .3s ease; }
.iphone-status > div { display: flex; align-items: end; gap: 3px; }
.iphone-status i { display: block; width: 2px; height: 5px; background: currentColor; }
.iphone-status i:nth-child(2) { height: 7px; }
.iphone-status b { width: 11px; height: 5px; border: 1px solid currentColor; border-radius: 2px; }
[data-system-phase="1"] .iphone-status,
[data-system-phase="2"] .iphone-status { color: var(--rando-paper); }

.mobile-ops-screen,
.mobile-ai-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 38px 14px 12px;
  transition: opacity .36s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.mobile-ops-screen { z-index: 3; color: var(--rando-black); background: var(--rando-paper); }
.mobile-ai-screen { z-index: 4; color: var(--rando-paper); background: #151614; opacity: 0; pointer-events: none; transform: translateX(18%); }
[data-system-phase="1"] .mobile-ops-screen,
[data-system-phase="2"] .mobile-ops-screen { opacity: 0; pointer-events: none; transform: translateX(-16%); }
[data-system-phase="1"] .mobile-ai-screen,
[data-system-phase="2"] .mobile-ai-screen { opacity: 1; pointer-events: auto; transform: none; }

.mobile-app-head { display: flex; justify-content: space-between; align-items: center; min-height: 30px; }
.mobile-app-head > div { display: flex; align-items: center; gap: 6px; color: #71891d; }
.mobile-app-head .brand-mark { width: 15px; height: 15px; color: var(--rando-lime); }
.mobile-app-head .brand-mark i { width: 5px; height: 5px; }
.mobile-app-head .brand-mark i:nth-child(1) { top: 5px; }
.mobile-app-head b { font-family: Manrope,sans-serif; font-size: 11px; }
.mobile-app-head button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; color: var(--rando-mocha); background: rgba(128,106,88,.12); font-size: 7px; }
.mobile-day-title { display: flex; justify-content: space-between; align-items: end; margin: 9px 1px 7px; }
.mobile-day-title small { color: var(--rando-mocha); font-size: 6px; letter-spacing: .13em; }
.mobile-day-title h3 { margin: 1px 0 0; font-family: Manrope,sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -.055em; }
.mobile-day-title button { width: 27px; height: 27px; padding: 0; border: 1px solid #d6d2c9; border-radius: 50%; color: #5f5d57; background: transparent; }
.mobile-booking-arrived { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; min-height: 43px; padding: 6px 8px; border: 1px solid #d7d4cb; background: #fbfaf6; }
.mobile-booking-arrived > i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--rando-black); background: var(--rando-lime); font-size: 7px; font-style: normal; }
.mobile-booking-arrived span { display: flex; flex-direction: column; min-width: 0; }
.mobile-booking-arrived small { color: #858179; font-size: 5.5px; letter-spacing: .11em; }
.mobile-booking-arrived b { overflow: hidden; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-booking-arrived em { color: #77746d; font-size: 6px; font-style: normal; }
.mobile-calendar-tabs { display: flex; align-items: center; gap: 13px; min-height: 31px; border-bottom: 1px solid #d9d6ce; color: #908d85; font-size: 7px; }
.mobile-calendar-tabs b { align-self: stretch; display: flex; align-items: center; color: var(--rando-black); border-bottom: 2px solid var(--rando-lime); }
.mobile-calendar-tabs em { margin-left: auto; color: #77746d; font-style: normal; }
.mobile-timeline { display: grid; flex: 1; grid-template-columns: 39px minmax(0,1fr); grid-template-rows: repeat(5,minmax(0,1fr)); min-height: 0; padding-top: 4px; }
.mobile-timeline > span { display: flex; align-items: flex-start; padding-top: 7px; color: #99968e; border-bottom: 1px solid #e2dfd7; font-size: 6px; }
.mobile-booking-event { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; margin: 2px 0; padding: 4px 8px; overflow: hidden; border: 0; border-left: 2px solid #8e9c6f; color: #34352f; background: #e9eee1; text-align: left; cursor: pointer; }
.mobile-booking-event b { font-size: 7.5px; line-height: 1.1; }
.mobile-booking-event small { max-width: 100%; margin-top: 2px; overflow: hidden; color: #74716b; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-booking-event > i { position: absolute; top: 4px; right: 5px; padding: 2px 3px; color: var(--rando-mocha); background: rgba(255,255,255,.58); font-size: 4px; font-style: normal; font-weight: 700; letter-spacing: .06em; }
.mobile-booking-event.event-mocha { border-color: var(--rando-mocha); background: rgba(128,106,88,.1); }
.mobile-booking-event.event-stone { border-color: #999287; background: var(--rando-stone); }
.mobile-booking-event.event-active { border-color: #91ad26; background: #eef5d4; box-shadow: inset 0 0 0 1px rgba(208,250,67,.65); }
.mobile-booking-event.event-lime { border-color: #8faa25; background: #ecf3d0; }
.mobile-booking-event:focus-visible { outline: 2px solid var(--rando-lime); outline-offset: -2px; }
.mobile-reaction-strip { display: grid; grid-template-columns: repeat(3,1fr); min-height: 41px; margin-top: 5px; border: 1px solid #d8d5cd; background: #fbfaf6; }
.mobile-reaction-strip span { display: flex; justify-content: center; flex-direction: column; padding-left: 8px; color: #827f77; border-right: 1px solid #dedbd4; font-size: 5px; }
.mobile-reaction-strip span:last-child { border-right: 0; }
.mobile-reaction-strip b { color: var(--rando-black); font-size: 8px; }

.mobile-ai-head { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; min-height: 31px; }
.mobile-ai-head button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid #393a36; border-radius: 50%; color: var(--rando-paper); background: transparent; }
.mobile-ai-head div { display: flex; flex-direction: column; }
.mobile-ai-head small { color: var(--rando-lime); font-size: 5.5px; letter-spacing: .14em; }
.mobile-ai-head b { font-size: 8px; font-weight: 500; }
.mobile-ai-head > i { width: 6px; height: 6px; border-radius: 50%; background: var(--rando-lime); box-shadow: 0 0 0 5px rgba(208,250,67,.08); }
.mobile-ai-prompt { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 13px; padding: 10px; border: 1px solid #3b3c37; background: #20211e; }
.mobile-ai-prompt > span { color: var(--rando-lime); font-size: 13px; }
.mobile-ai-prompt p { margin: 0; font-family: Manrope,sans-serif; font-size: 10px; line-height: 1.3; letter-spacing: -.015em; }
.mobile-ai-progress { margin-top: 7px; }
.mobile-ai-progress p { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; min-height: 38px; margin: 0; border-bottom: 1px solid #333430; opacity: 0; transform: translateX(-7px); }
[data-system-phase="1"] .mobile-ai-progress p,
[data-system-phase="2"] .mobile-ai-progress p { animation: mobile-ai-step .42s ease-out forwards; }
.mobile-ai-progress p:nth-child(2) { animation-delay: .1s; }
.mobile-ai-progress p:nth-child(3) { animation-delay: .2s; }
.mobile-ai-progress p:nth-child(4) { animation-delay: .3s; }
@keyframes mobile-ai-step { to { opacity: 1; transform: none; } }
.mobile-ai-progress p > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--rando-black); background: var(--rando-lime); font-size: 6px; font-style: normal; }
.mobile-ai-progress span { display: flex; flex-direction: column; }
.mobile-ai-progress small { color: #7f8179; font-size: 5px; letter-spacing: .12em; }
.mobile-ai-progress b { overflow: hidden; font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mobile-campaign-ready { margin-top: 8px; padding: 11px; color: var(--rando-black); background: var(--rando-paper); }
.mobile-campaign-ready > small { color: #71891d; font-size: 5px; font-weight: 700; letter-spacing: .13em; }
.mobile-campaign-ready h3 { margin: 4px 0 3px; font-family: Manrope,sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.045em; }
.mobile-campaign-ready p { margin: 0; color: #6f6c65; font-size: 6.5px; line-height: 1.35; }
.mobile-campaign-ready button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 31px; margin-top: 9px; padding: 0 10px; border: 0; color: var(--rando-black); background: var(--rando-lime); font-size: 7px; font-weight: 700; cursor: pointer; }
.mobile-campaign-ready button.sent { background: var(--rando-stone); }
.mobile-automation { display: flex; justify-content: space-between; gap: 4px; margin-top: auto; padding-top: 9px; color: #9b9d95; font-size: 5.3px; }
.mobile-automation span { display: flex; align-items: center; gap: 3px; }
.mobile-automation i { color: var(--rando-lime); font-style: normal; }
.mobile-ai-screen.campaign-sent .mobile-automation { color: var(--rando-paper); }

.appointment-detail-sheet {
  position: absolute;
  z-index: 25;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 43%;
  padding: 24px 18px 18px;
  color: var(--rando-black);
  background: #fff;
  border-top: 1px solid #d8d5ce;
  border-radius: 21px 21px 0 0;
  box-shadow: 0 -24px 55px rgba(15,15,16,.2);
  pointer-events: none;
  transform: translateY(106%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.rando-iphone.detail-open .mobile-ops-screen { filter: brightness(.7); }
.rando-iphone.detail-open .appointment-detail-sheet { pointer-events: auto; transform: none; }
.detail-close { position: absolute; top: 13px; right: 14px; width: 25px; height: 25px; padding: 0; border: 1px solid #dad7d0; border-radius: 50%; color: #615e57; background: transparent; font-size: 14px; }
.appointment-detail-sheet > small { color: #71891d; font-size: 6px; font-weight: 700; letter-spacing: .11em; }
.appointment-detail-sheet h3 { margin: 8px 0 2px; font-family: Manrope,sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -.05em; }
.appointment-detail-sheet > p { margin: 0; color: #6d6a63; font-size: 8px; }
.appointment-detail-sheet > div { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border-top: 1px solid #dedbd4; }
.appointment-detail-sheet > div span { display: flex; flex-direction: column; gap: 4px; padding: 12px 8px 0 0; color: #858179; font-size: 6px; }
.appointment-detail-sheet > div b { color: var(--rando-black); font-size: 9px; }

@media (hover:hover) {
  .phone-orbit:hover .rando-iphone { box-shadow: -29px 39px 80px rgba(0,0,0,.46), 18px 26px 65px rgba(0,0,0,.34), inset 1px 1px rgba(255,255,255,.3), inset -2px -2px rgba(0,0,0,.8); }
}

@media (max-width:1020px) {
  .system-story { min-height: 1580px; }
  .mobile-product-stage { right: 18px; left: 18px; }
  .mobile-first-note { left: 0; }
  .phone-orbit { left: 43%; }
  .web-companion { right: -3%; width: 56%; }
}

@media (max-width:760px) {
  .system-story { height: 210vh; min-height: 1500px; }
  .system-sticky { min-height: 760px; }
  .system-heading { top: 66px; }
  .system-heading h2 { font-size: clamp(2.15rem,8.9vw,2.75rem); }
  .system-heading > p:last-child { margin-top: 9px; }
  .mobile-product-stage { right: 10px; bottom: 48px; left: 10px; height: clamp(465px,calc(100svh - 255px),490px); }
  .mobile-first-note { display: none; }
  .phone-orbit { left: 45%; width: min(250px,68vw); }
  .rando-iphone { border-radius: 46px; }
  .iphone-screen-shell { border-radius: 38px; }
  .web-companion { top: 8%; right: -28%; width: 72%; height: 32%; opacity: .54; }
  .web-companion-label { top: -24px; right: 8px; font-size: 7px; }
  .web-companion-frame { border-width: 5px; }
  .web-companion-top { grid-template-columns: 1fr auto; }
  .web-companion-top > span { display: none; }
  .web-companion-top > em { grid-column: 2; }
  .web-calendar-mini { padding: 7px; }
  .web-calendar-mini > header > span { display: none; }
  [data-system-phase="1"] .web-companion,
  [data-system-phase="2"] .web-companion { opacity: .22; transform: translateX(9%) rotate(3.2deg) translateZ(-80px); }
  .system-closing { bottom: 17px; }
}

@media (max-width:380px) {
  .phone-orbit { left: 44%; width: min(242px,70vw); }
  .mobile-ops-screen,
  .mobile-ai-screen { padding-right: 12px; padding-left: 12px; }
  .mobile-campaign-ready h3 { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .system-story { height: 190vh; min-height: 1400px; }
  .system-sticky { position: sticky; height: 100svh; min-height: 760px; }
  [data-system-phase="0"] .system-heading-os { opacity: 1; transform: translateX(-50%); }
  [data-system-phase="0"] .system-heading-ai { opacity: 0; }
  [data-system-phase="1"] .system-heading-os,
  [data-system-phase="2"] .system-heading-os { opacity: 0; }
  [data-system-phase="1"] .system-heading-ai,
  [data-system-phase="2"] .system-heading-ai { opacity: 1; transform: translateX(-50%); }
  .phone-orbit,
  .web-companion,
  .mobile-ops-screen,
  .mobile-ai-screen,
  .appointment-detail-sheet { transition: none; }
  .mobile-ai-progress p { animation: none !important; opacity: 1; transform: none; }
  .phone-orbit { --phone-rx: 0deg !important; --phone-ry: 0deg !important; }
}