/* Rimwell landing page. Two worlds: the bathroom (porcelain, light) and the bench (graphite, hardware). */
:root {
  --porcelain: #eef1ef;
  --porcelain-deep: #dfe6e4;
  --water: #bfdcda;
  --ink: #10323a;
  --ink-soft: #3f5c62;
  --ring: #f2b530;
  --graphite: #23272b;
  --graphite-2: #2d3237;
  --bench-text: #e6e8e6;
  --bench-muted: #a9b0b4;
  --max: 1120px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--porcelain); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0 0 0.5em; font-variation-settings: "SOFT" 80, "opsz" 72; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
figcaption { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.5rem; }
.bench figcaption { color: var(--bench-muted); }

/* Header: a floating pill, inset from the page edges, frosted over whatever scrolls under it. It slides away while
   reading down and comes back on any scroll up; app.js toggles .top-hidden. */
.top { position: sticky; top: 0.9rem; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  max-width: var(--max); margin: 0.9rem auto 0; padding: 0.55rem 0.6rem 0.55rem 1.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 90%, transparent); border: 1px solid rgb(255 255 255 / 0.12); color: var(--porcelain);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.18), 0 6px 20px rgb(0 0 0 / 0.10), 0 1px 4px rgb(0 0 0 / 0.06);
  transition: transform 0.35s ease, opacity 0.35s ease; }
.top.top-hidden { transform: translateY(calc(-100% - 1.5rem)); opacity: 0; }
.top.top-hidden:focus-within { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
.wordmark { display: inline-flex; align-items: center; gap: 0.45rem; font-family: "Manrope", var(--sans); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; text-decoration: none; }
.wordmark svg { width: 1.6rem; height: 1.08rem; margin-top: 0.12rem; overflow: visible; }
.wordmark path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.wordmark .dot { fill: var(--ring); }
.top nav { display: flex; gap: 0.2rem; }
.top nav a { text-decoration: none; font-size: 0.92rem; color: rgb(238 241 239 / 0.78); padding: 0.45rem 0.85rem; border-radius: 999px; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
.top nav a:hover, .top nav a:focus-visible { color: white; background: rgb(255 255 255 / 0.12); outline: none; }
@media (max-width: 1180px) { .top { margin-left: 0.9rem; margin-right: 0.9rem; } }
@media (max-width: 900px) {
  .top { gap: 0.8rem; padding-left: 1.1rem; }
  .top nav { overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 85%, transparent); }
  .top nav::-webkit-scrollbar { display: none; }
}

section { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem); }
.hero, .how-head, .story, .split, .bench-head, .gallery, .inner { max-width: var(--max); margin-left: auto; margin-right: auto; }
.inner p { margin-left: 0; }

.hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 3rem; align-items: center; min-height: 78vh; }
.hero-copy .lede { font-size: 1.2rem; }
.button { display: inline-block; margin-top: 0.8rem; padding: 0.8rem 1.2rem; background: var(--ink); color: var(--porcelain); text-decoration: none; border-radius: 999px; font-weight: 500; }
.button:hover, .button:focus-visible { background: #0b262c; }
.hero-photo img, .product-photo img { display: block; width: 100%; height: auto; border-radius: 28px; }
.caption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.6rem; }

.how { background: white; }
.reports { background: var(--porcelain-deep); }
.how-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.how-head h2 { margin: 0; }
.replay { align-self: end; justify-self: end; background: none; border: 1px solid var(--ink); color: var(--ink); padding: 0.55rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.95rem; }
.replay:hover, .replay:focus-visible { background: var(--ink); color: white; }
.story { margin-top: 2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
.story svg { width: 100%; height: auto; display: block; }

/* storyboard drawing; motion lives in app.js (one timeline, Web Animations) */
.story svg .floor { stroke: var(--porcelain-deep); stroke-width: 2; }
.ceramic { fill: #fbfbf9; stroke: var(--ink); stroke-width: 2; }
.cavity { fill: var(--porcelain-deep); }
.seat { fill: #f1f1ec; stroke: var(--ink); stroke-width: 2; }
.seat-lid { fill: #f1f1ec; stroke: var(--ink); stroke-width: 2; }
.lever { fill: #fbfbf9; stroke: var(--ink); stroke-width: 2; }
.stool { fill: #8b6b4e; opacity: 0.9; transform-box: fill-box; transform-origin: center; }
.splash { fill: none; stroke: #7fb3af; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.swirl { fill: none; stroke: white; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 34 22; opacity: 0; }
.cone, .flash { opacity: 0; }
.flash { fill: #fff8e6; }
.pod-body { fill: #fdfdfb; stroke: var(--ink); stroke-width: 2; }
.pod .ring { fill: none; stroke: var(--ring); stroke-width: 2.5; opacity: 0.25; }
.pod .status { fill: #9aa5a8; }
.pod .panel { fill: none; stroke: #c9d2d0; stroke-width: 1.2; }
.pod .status-on { fill: #3cb371; }
.motion path { fill: none; stroke: var(--ring); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.legs .body { fill: url(#sitter); }
.legs .arm { fill: none; stroke: url(#sitter-arm); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.wifi path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.cloud path { fill: white; stroke: var(--ink); stroke-width: 2; }
.reading circle { fill: var(--ink-soft); opacity: 0; }
.deleted { font-family: var(--sans); font-size: 15px; fill: var(--ink-soft); }
.photo-card { fill: white; stroke: var(--ink); stroke-width: 2; }
.photo-bg { fill: var(--porcelain-deep); }
.photo-water { fill: #a9cfcc; }
.photo-stool { fill: #8b6b4e; }
.scan { fill: var(--ring); opacity: 0; }
.cross { fill: none; stroke: #b5483b; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.dot { fill: var(--ring); }
.phone .frame { fill: var(--ink); }
.phone .screen { fill: white; }
.phone text { font-family: var(--sans); fill: var(--ink); }
.phone .t-h { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.phone .t-s { font-size: 8.5px; font-weight: 600; fill: var(--ink-soft); }
.phone .t-e { font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; fill: var(--ink-soft); }
.phone .t-l { font-size: 11px; fill: var(--ink-soft); }
.phone .t-r { font-size: 11.5px; font-weight: 600; }
.phone .t-c { font-size: 9.5px; fill: var(--ink-soft); }
.phone .t-ok { font-size: 11px; font-weight: 600; fill: #3f8f7a; }
.phone .sep { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 1; }
.phone .viz text { fill: var(--ink-soft); }
.phone .marker { fill: none; stroke: var(--ink); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
/* narrow screens: the phone moves under the toilet and grows so its text stays readable */
.story svg.narrow .phone { transform: translate(-1003px, 416px) scale(1.4); }

.story-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.story-steps button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding-top: 0.9rem; font-size: 0.98rem; line-height: 1.4; color: var(--ink-soft); opacity: 0.6; transition: opacity 0.3s, color 0.3s;
  background: linear-gradient(var(--ring), var(--ring)) top left / calc(var(--p, 0) * 100%) 3px no-repeat, linear-gradient(var(--porcelain-deep), var(--porcelain-deep)) top left / 100% 3px no-repeat; }
.story-steps .n { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1; margin-bottom: 0.35rem; }
.story-steps li.active button { opacity: 1; color: var(--ink); }
.story-steps li.done button { opacity: 0.85; }
.story-steps button:hover { opacity: 1; }
.story-steps button:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
@media (max-width: 700px) {
  .story-steps { grid-template-columns: 1fr; gap: 0.9rem; }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }

/* chips: short labels for specs and claims, one pill style in both worlds */
.chips { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 40rem; }
.chips li, .chip { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); font-size: 0.92rem; line-height: 1.35; color: var(--ink); background: color-mix(in srgb, white 55%, transparent); }
.bench .chips li { border-color: #4a5257; color: var(--bench-text); background: var(--graphite); }
.hero .chips { margin-bottom: 1.4rem; }
.hero .chips li { font-size: 1rem; }

/* reports bento: a report card on a phone anchors it, each other tile is a small drawing of its own data */
.reports { --healthy: #3f8f7a; --alert: #b8483a; --line: color-mix(in srgb, var(--ink) 14%, transparent); }
.bento { margin-top: 2.2rem; display: grid; gap: 0.8rem; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
.bento > * { grid-column: span 4; }
.bento .card { grid-row: span 2; justify-items: center; padding: 1.4rem; }
.bento .rhythm { grid-column: span 8; }
.bento .s3 { grid-column: span 3; }
.bento .s5 { grid-column: span 5; }
.reports .tile { background: var(--porcelain); border-radius: 18px; padding: 1.1rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.reports .tile.white { background: white; }
.reports .t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.reports .tile h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.15; margin: 0; font-variation-settings: "SOFT" 80, "opsz" 36; }
.reports .when { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.reports .tile p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); max-width: none; }
.reports .tile p.note { font-size: 0.78rem; text-align: center; max-width: 30ch; }
.reports svg { display: block; }
.reports .viz { width: 100%; height: auto; }
.reports .viz text { font-family: var(--sans); fill: var(--ink-soft); }
.reports .gauge-wrap { max-width: 200px; }
.rp-phone { background: var(--ink); border-radius: 34px; padding: 10px; width: 100%; max-width: 280px; }
.rp-screen { background: white; border-radius: 26px; padding: 18px 16px 20px; display: grid; gap: 12px; align-content: start; }
.reports .bar-top { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--ink-soft); font-weight: 600; }
.reports .eyebrow { font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.reports .h { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; margin-top: -6px; }
.reports .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.82rem; }
.reports .row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.reports .row span { color: var(--ink-soft); }
.reports .blk { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.reports .logged { font-size: 0.78rem; color: var(--healthy); font-weight: 600; }
.pod-section img { border-radius: 20px; }
.zoom { display: block; cursor: zoom-in; }
.zoom img { display: block; width: 100%; height: auto; }
.pod-section .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); align-items: start; }
.fit-pair { max-width: var(--max); margin: 2.5rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.bench { background: var(--graphite); color: var(--bench-text); }
.bench h2 { color: white; }
.bench p { color: var(--bench-text); }
.bench .facts dt { color: var(--bench-muted); }
.bench-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; align-items: baseline; margin-bottom: 2.5rem; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.gallery img { background: white; border-radius: 12px; }
.gallery .wide { grid-column: 1 / -1; }
.gallery .exploded img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }   /* the render's white margins add nothing at full width */
.hint { color: var(--bench-muted); font-size: 0.9rem; }
.board { background: var(--graphite-2); }
.board img { border-radius: 12px; }
.links a { margin-right: 1.4rem; }
.chips + .links { margin-top: 1.4rem; }
.bench > .links { max-width: var(--max); margin: 1.2rem auto 0; }

.privacy { background: var(--water); }
.privacy p { font-size: 1.15rem; max-width: 46ch; }
.privacy .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.privacy-figure { position: relative; justify-self: center; max-width: 360px; }
.privacy-figure img { background: white; border-radius: 20px; padding: 0.6rem; }

/* status stepper: done, now, next, then along one track */
.stepper { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1.5rem; }
.stepper > li { position: relative; padding-top: 1.6rem; border-top: 3px solid var(--porcelain-deep); }
.stepper > li::before { content: ""; position: absolute; left: 0; top: -9px; width: 12px; height: 12px; border-radius: 50%; background: var(--porcelain); border: 2px solid var(--ink-soft); }
.stepper > li.done { border-top-color: var(--ink); }
.stepper > li.done::before { background: var(--ink); border-color: var(--ink); }
.stepper > li.now { border-top-color: var(--ring); }
.stepper > li.now::before { background: var(--ring); border-color: var(--ring); }
.stepper > li.then { opacity: 0.7; }
.stepper h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 0.5rem; }
.stepper ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
footer p { font-size: 0.9rem; color: var(--ink-soft); }
footer { padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; border-top: 1px solid var(--porcelain-deep); }

:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

@media (max-width: 860px) {
  .hero, .split, .how-head, .bench-head, .gallery, .privacy .split, .pod-section .split { grid-template-columns: 1fr; }
  .bento > *, .bento .s3, .bento .s5 { grid-column: span 6; }
  .bento .card { grid-row: auto; }
  .bento .rhythm { grid-column: span 12; }
  .stepper { grid-template-columns: 1fr 1fr; }
  .hero { min-height: auto; }
  .replay { justify-self: start; }
}
@media (max-width: 520px) {
  .stepper, .fit-pair { grid-template-columns: 1fr; }
  .bento > *, .bento .s3, .bento .s5, .bento .rhythm { grid-column: span 12; }
}
.spin canvas { display: block; width: 100%; height: auto; border-radius: 28px; }
.spin img, .spin canvas { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.spin.dragging canvas { cursor: grabbing; }
.xray { max-width: var(--max); margin: 0 auto 2.5rem; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.xray-img { position: relative; border-radius: 20px; overflow: hidden; }
.xray-img img { display: block; width: 100%; height: auto; }
.xray .dot { position: absolute; transform: translate(-50%, -50%); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: white; font-size: 0.8rem; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px white; }
.xray-key { margin: 0; padding-left: 1.4rem; color: var(--bench-text); line-height: 2; }
@media (max-width: 760px) { .xray { grid-template-columns: 1fr; } }