/* RESET black and white layer on top of the Uber layout styles in base.css.
   base.css already carries the monochrome ramp (tools/brand_css.py) and type (Inter Tight titles, Inter text).
   This file only holds what a colour swap cannot: brand shapes, the accent CTA and browser surfaces. */

:root {
  --indigo: #0E0E0E;
  --indigo-up: #1A1A1A;
  --indigo-line: #2E2E2E;
  --sky: #FFFFFF;
  --sky-deep: #8A8A8A;
  --mist: #F2F2F2;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- browser surfaces ---------- */
html { background: var(--indigo); scrollbar-color: var(--indigo-line) var(--indigo); }
::selection { background: var(--sky); color: var(--indigo); }
input, textarea { caret-color: var(--indigo); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
a { text-underline-offset: 0.22em; }

/* ---------- type: rounded titles carry the brand voice ---------- */
h1, h2, h3, [data-testid="heading.base"] {
  font-family: "Inter Tight", Inter, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { letter-spacing: -0.04em; }

/* ---------- CTAs: every button is a pill, the main actions wear sky ---------- */
.css-kRDcIj,
.css-dMtHoP,
.css-gjRClU,
.css-cjssDq { border-radius: 999px !important; }

/* Primary on indigo (hero "See prices", business "Learn more"): the sky accent */
.css-kRDcIj {
  background-color: var(--sky) !important;
  color: var(--indigo) !important;
  transition: background-color 240ms var(--ease-out-expo), transform 240ms var(--ease-out-expo);
}
.css-kRDcIj:hover { background-color: #E6E6E6 !important; }
.css-kRDcIj:active { transform: scale(0.98); }

/* Primary on white: indigo pill */
.css-dMtHoP { transition: background-color 240ms var(--ease-out-expo); }
.css-dMtHoP:hover { background-color: var(--indigo-up) !important; }

/* Carousel arrows: round, on-brand */
.css-iNLzPl,
.css-bkMhsb {
  border-radius: 999px !important;
  border: 0 !important;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sky) !important;
  color: var(--indigo) !important;
  cursor: pointer;
}
.css-iNLzPl:disabled,
.css-bkMhsb:disabled { background: var(--indigo-up) !important; color: var(--indigo-line) !important; cursor: default; }
.css-iNLzPl svg path,
.css-bkMhsb svg path { fill: currentColor; }

/* Footer chips (socials, language, city): pills like the nav */
.css-kMWZSe, .css-eCfKro { border-radius: 999px !important; }

/* ---------- surfaces ---------- */
/* Booking inputs: mist fields with indigo ink */
input { color: var(--indigo); }
input::placeholder { color: #6B6B6B; opacity: 1; }


/* Soft corners, as in RESET's app and site */
.css-eufkQs, .css-kJpwYw { border-radius: 20px !important; position: relative; }
/* App card arrow: without Uber's JS its wrapper collapses and the arrow lands on the app icon; the card itself is the link */
.css-ligAUi > svg { display: none !important; }
img[src*="banner-"], img[src*="city-guide"] { border-radius: 16px; }

/* Small screens: Uber's tablet and mobile "Explore" variants are loading skeletons that its JavaScript
   fills in. This page has no JavaScript, so small screens use the desktop variant, which holds the real tiles. */
@media (max-width: 1135px) {
  [data-testid$="2d33f71c5b6f-desktop"] { display: block !important; }
  [data-testid$="2d33f71c5b6f-tablet"],
  [data-testid$="2d33f71c5b6f-mobile"] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .css-kRDcIj, .css-dMtHoP { transition: none; }
}

/* Menu counters were pure black in Uber's markup */
.css-gAzlNU { color: var(--indigo) !important; }

/* =====================================================================
   Motion: the wipe. RESET's pattern is the trail a wipe leaves, so every
   authored moment is a wipe: hazy to crisp, empty to filled.
   Everything is visible by default; .rs-js (set by motion.js) arms it.
   ===================================================================== */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* 1. Hero: a sky blade clears the collage, then the checks tick off */
.rs-collage { position: relative; overflow: hidden; isolation: isolate; }
.rs-haze {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(240, 240, 240, 0.26);
  -webkit-backdrop-filter: blur(14px) brightness(1.1) contrast(0.85);
  backdrop-filter: blur(14px) brightness(1.1) contrast(0.85);
  clip-path: inset(0 0 0 0);
}
.rs-blade { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(-100%); }
.rs-blade::after {
  content: ""; position: absolute; right: -6px; top: -4%; bottom: -4%; width: 12px; border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF, #CFCFCF 55%, #FFFFFF);
  box-shadow: 10px 0 28px rgba(0, 0, 0, 0.32);
}
.rs-blade::before { /* the wet sheen right behind the blade */
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 22%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22));
}
.is-wiping .rs-haze { animation: rs-unhaze 1.3s var(--ease) 0.3s forwards; }
.is-wiping .rs-blade { animation: rs-blade 1.3s var(--ease) 0.3s forwards; }
@keyframes rs-unhaze { to { clip-path: inset(0 0 0 100%); } }
@keyframes rs-blade {
  0% { transform: translateX(-100%); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(6px); opacity: 0; }
}
.is-clean .rs-haze, .is-clean .rs-blade { display: none; }

.rs-checks {
  position: absolute; z-index: 3; left: 53.4%; top: 46.5%;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.rs-checks li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--indigo);
  font: 600 13px/1.1 Inter, system-ui, sans-serif; letter-spacing: -0.01em;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.rs-checks svg { width: 20px; height: 20px; flex: none; }
.rs-checks circle { fill: var(--indigo); }
.rs-checks path { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }
.rs-js .rs-collage:not(.is-clean) .rs-checks li { opacity: 0; transform: translateX(-10px) scale(0.96); }
.rs-js .rs-collage:not(.is-clean) .rs-checks path { stroke-dashoffset: 14; }
.rs-js .rs-checks li { transition: opacity 0.45s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i) * 160ms + 60ms); }
.rs-js .rs-checks path { transition: stroke-dashoffset 0.5s var(--ease); transition-delay: calc(var(--i) * 160ms + 320ms); }

.rs-rise .rs-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.rs-rise .rs-word > span { display: inline-block; animation: rs-rise 0.9s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
@keyframes rs-rise { from { transform: translateY(108%); } }

/* 2. The drip pattern grows down from the top edge, then the drops fall */
.rs-banner { display: block; width: 100%; height: 100%; }
.rs-footer-band { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1200px, 100%); height: auto; pointer-events: none; }
.rs-js .rs-drip .rs-pill { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }
.rs-js .rs-drip .rs-drop { opacity: 0; transform: translateY(-14px); transform-box: fill-box; }
.rs-js .rs-drip.is-in .rs-pill { transform: scaleY(1); transition: transform 1.25s var(--ease) var(--d); }
.rs-js .rs-drip.is-in .rs-drop { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) var(--d), transform 0.9s var(--ease) var(--d); }

/* 3. Photos wipe in, left to right, settling from a slight scale */
.rs-js .rs-frame { overflow: hidden; }
.rs-js img.rs-photo { transition: clip-path 1.05s var(--ease), transform 1.5s var(--ease); }
.rs-js img.rs-photo:not(.is-in) { clip-path: inset(0 100% 0 0); transform: scale(1.06); }

/* 4. Feedback */
a:has(img[src*="product-"]) { transition: background-color 0.3s var(--ease); }
a:has(img[src*="product-"]):hover { background-color: #262626 !important; }
a:has(img[src*="product-"]) img { transition: transform 0.5s var(--ease); }
a:has(img[src*="product-"]):hover img { transform: translateY(-6px) rotate(-4deg) scale(1.05); }
.rs-track { transition: transform 0.75s var(--ease); will-change: transform; }

/* Reduced motion: final states, no travel; colour feedback stays */
.rs-reduce .rs-haze, .rs-reduce .rs-blade { display: none; }
.rs-reduce .rs-rise .rs-word > span { animation: none; }
.rs-reduce img.rs-photo, .rs-reduce .rs-drip .rs-pill, .rs-reduce .rs-drip .rs-drop, .rs-reduce .rs-track { transition: none !important; transform: none !important; clip-path: none !important; opacity: 1 !important; }
.rs-reduce a:has(img[src*="product-"]):hover img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rs-rise .rs-word > span { animation: none; }
}


/* The word RESET in running text, set in the logo's own lettering: the wordmark as a mask,
   filled with the current text colour (white on black, ink on white). */
.rs-wm {
  display: inline-block;
  height: 0.84em;
  aspect-ratio: 3342 / 1120;
  margin: 0 0.01em 0 0.03em;
  vertical-align: -0.04em;
  background-color: currentColor;
  -webkit-mask: url("../img/brand/reset-logo-black.svg") no-repeat center / contain;
  mask: url("../img/brand/reset-logo-black.svg") no-repeat center / contain;
}

/* "It's easier in the apps": give the QR codes room inside their cards */
.css-kJpwYw { padding: 24px !important; }
.css-kJpwYw .css-MrmFY { border-radius: 10px; overflow: hidden; }
.css-eufkQs { padding: 16px !important; }

/* Hero headline: left aligned (Uber's heading block is right aligned here), typed ending */
.css-cgxnTe, [data-pudo-anchor="HEADING"]:has(> div > [data-rs-headline]) { text-align: left; }
.css-cgxnTe { white-space: nowrap; }

/* SEO: real text inside the wordmark, hidden visually (the logo already shows it) */
.rs-wm { position: relative; }
.rs-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Pages: current nav item ---------- */
.css-MDldu[aria-current="page"] { background-color: #FFFFFF !important; color: #0E0E0E !important; }

/* ---------- Pages: FAQ (Uber-style accordion, RESET black and white) ---------- */
.rs-faq { background: var(--indigo); color: #fff; padding: 72px 0 96px; }
.rs-faq-inner { max-width: 1136px; margin: 0 auto; padding: 0 24px; }
.rs-faq h2 { font: 700 36px/44px "Inter Tight", Inter, system-ui, sans-serif; letter-spacing: -0.03em; margin: 0 0 32px; }
.rs-faq-item { border-top: 1px solid #2E2E2E; }
.rs-faq-item:last-child { border-bottom: 1px solid #2E2E2E; }
.rs-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; font: 600 18px/26px Inter, system-ui, sans-serif; letter-spacing: -0.01em;
}
.rs-faq-item summary::-webkit-details-marker { display: none; }
.rs-faq-item summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(#fff, #fff) center / 14px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 14px no-repeat;
  transition: transform 0.35s var(--ease);
}
.rs-faq-item[open] summary::after { transform: rotate(45deg); }
.rs-faq-item p { margin: 0 0 24px; max-width: 68ch; color: #A3A3A3; font: 400 16px/26px Inter, system-ui, sans-serif; }
.rs-faq-item summary:hover { color: #E6E6E6; }
@media (max-width: 599px) { .rs-faq h2 { font-size: 28px; line-height: 36px; } .rs-faq-item summary { font-size: 16px; } }

/* Header logo on the page's content edge, like Uber and OpenAI: same 1280px container and 64px gutter as the body */
nav.css-ThnGd [data-testid="nav-grid"].css-hWkSKL { max-width: 1280px; }

/* =====================================================================
   A bit of blue, the way the RESET app uses it: only where it means
   something (booked, done, you're set). Blue #3B6CF0, tint #EAF0FE,
   with the app's arch illustrations.
   ===================================================================== */
:root { --blue: #3B6CF0; --blue-tint: #EAF0FE; }

/* Homepage: the "You're set" panel in the old family-banner slot */
.rs-blue-panel {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  width: 100%; height: 100%; box-sizing: border-box; padding: 28px 56px 0 56px; overflow: hidden;
  background: var(--blue); color: #fff; border-radius: 16px;
}
.rs-blue-copy { max-width: 560px; padding-bottom: 28px; }
.rs-booked { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.rs-booked svg { width: 22px; height: 22px; }
.rs-blue-panel h2 { margin: 0; font: 700 34px/40px "Inter Tight", Inter, system-ui, sans-serif !important; letter-spacing: -0.03em; color: #fff; }
.rs-blue-copy > p:not(.rs-booked) { margin: 8px 0 0; font: 400 16px/24px Inter, system-ui, sans-serif; color: rgba(255,255,255,0.86); }
.rs-blue-cta { display: inline-flex; align-items: center; height: 44px; margin-top: 18px; padding: 0 20px; border-radius: 999px; background: #0E0E0E; color: #fff !important; text-decoration: none; font: 600 15px/1 Inter, system-ui, sans-serif; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.rs-blue-cta:hover { background: #262626; }
.rs-blue-cta:active { transform: scale(0.98); }
.rs-blue-art { align-self: flex-end; flex: none; width: auto; height: 108%; max-height: 260px; margin-bottom: -2px; }
@media (max-width: 899px) {
  .rs-blue-panel { padding: 24px 24px 0; }
  .rs-blue-panel h2 { font-size: 26px; line-height: 32px; }
  .rs-blue-art { height: 92%; }
}

/* Hero: the done-today checks are blue, like the app's Booked check */
.rs-checks circle { fill: var(--blue) !important; }

/* =====================================================================
   The RESET app showcase: the app's own blue, its real screens
   ===================================================================== */
.rs-app { background: var(--blue); color: #fff; overflow: hidden; }
.rs-app-inner { max-width: 1136px; margin: 0 auto; padding: 96px 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.rs-app-copy { padding-bottom: 96px; }
.rs-app h2 { margin: 0 0 14px; font: 700 48px/54px "Inter Tight", Inter, system-ui, sans-serif !important; letter-spacing: -0.035em; color: #fff; }
.rs-app-lede { margin: 0 0 32px; max-width: 40ch; font: 400 19px/29px Inter, system-ui, sans-serif; color: rgba(255,255,255,0.88); }
.rs-app-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.rs-app-points li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.rs-app-points svg { width: 22px; height: 22px; margin-top: 2px; }
.rs-app-points strong { display: block; font: 600 17px/24px Inter, system-ui, sans-serif; color: #fff; }
.rs-app-points span { font: 400 15px/22px Inter, system-ui, sans-serif; color: rgba(255,255,255,0.82); }
.rs-app-actions { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
.rs-app-cta { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 999px; background: #0E0E0E; color: #fff !important; text-decoration: none; font: 600 16px/1 Inter, system-ui, sans-serif; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.rs-app-cta:hover { background: #262626; }
.rs-app-cta:active { transform: scale(0.98); }
.rs-app-link { color: #fff !important; font: 500 16px/1 Inter, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(255,255,255,0.45); }
.rs-app-link:hover { text-decoration-color: #fff; }
.rs-app-cta:focus-visible, .rs-app-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* three phones: Home in front, live Lock Screen and "Your home is reset" behind */
.rs-app-phones { position: relative; height: 600px; align-self: end; }
.rs-phone { position: absolute; bottom: -40px; width: 258px; height: auto; filter: drop-shadow(0 30px 40px rgba(10, 20, 60, 0.35)); }
.rs-phone-center { left: 50%; width: 288px; transform: translateX(-50%); z-index: 3; bottom: -70px; }
.rs-phone-left { left: 2%; transform: rotate(-7deg); z-index: 1; bottom: -10px; }
.rs-phone-right { right: 2%; transform: rotate(7deg); z-index: 2; bottom: -10px; }

/* the phones rise into place as the section scrolls in (CSS only; static where unsupported) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rs-phone { animation: rs-phone-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .rs-phone-left { --rot: -7deg; --x: 0; }
    .rs-phone-right { --rot: 7deg; --x: 0; }
    .rs-phone-center { --rot: 0deg; --x: -50%; animation-range: entry 5% cover 35%; }
    @keyframes rs-phone-rise { from { transform: translateX(var(--x)) translateY(120px) rotate(var(--rot)); opacity: 0.2; } to { transform: translateX(var(--x)) translateY(0) rotate(var(--rot)); opacity: 1; } }
  }
}
@media (max-width: 959px) {
  .rs-app-inner { grid-template-columns: 1fr; padding-top: 72px; gap: 8px; }
  .rs-app-copy { padding-bottom: 24px; }
  .rs-app h2 { font-size: 36px; line-height: 42px; }
  .rs-app-phones { height: 460px; }
  .rs-phone { width: 190px; }
  .rs-phone-center { width: 214px; }
}
@media (max-width: 479px) {
  .rs-app-phones { height: 380px; }
  .rs-phone { width: 150px; }
  .rs-phone-center { width: 176px; }
  .rs-phone-left { left: -4%; }
  .rs-phone-right { right: -4%; }
}