/* ══════════════════════════════════════════════════════════════
   Empire Jewellers — Ring Builder
   Built to the design handoff, with a tablet layout added on top of it.
     >= 1440px  desktop: fixed 1440 canvas, two columns, dial off the right edge
     768-1439   tablet:  the stacked layout, scaled up, with its own dial geometry
     < 768px    phone:   stacked, fluid, capped at 480
   The handoff shipped no tablet layout and warned against improvising one by
   stretching the desktop grid — because the desktop dial is anchored to a fixed
   1440 canvas and cannot reflow. The tablet tier therefore builds UP from the
   phone structure rather than DOWN from the desktop one.
   Corners are square everywhere; the only radii are true circles.
   ══════════════════════════════════════════════════════════════ */

body.ej-rb-body {
	--rb-black: #08080A;
	--rb-panel: #0A0A0C;
	--rb-bone: #F4F1EA;
	--rb-gold: #E8CE93;
	--rb-gold-pale: #F6E6C2;
	--rb-gold-deep: #C9A15A;
	--rb-line: rgba(255, 255, 255, .06);
	--rb-line2: rgba(255, 255, 255, .07);
	--rb-line3: rgba(255, 255, 255, .14);
	--rb-gold-1: rgba(232, 206, 147, .18);
	--rb-gold-2: rgba(232, 206, 147, .3);
	--rb-gold-3: rgba(232, 206, 147, .34);
	--rb-wash: rgba(232, 206, 147, .045);
	--rb-wash2: rgba(232, 206, 147, .07);
	--rb-sel: rgba(232, 206, 147, .28);
	--rb-serif: 'Cormorant Garamond', Georgia, serif;
	--rb-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--rb-ease: cubic-bezier(.22, .94, .28, 1);
	--rb-dur: 1.05s;

	margin: 0;
	background: var(--rb-black);
	color: var(--rb-bone);
	font-family: var(--rb-sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.ej-rb-body .ej-rb-main {
	min-height: 100vh;
	background:
		radial-gradient(120% 80% at 72% 42%, #131317 0%, #0A0A0C 46%, #07070A 100%);
}

.ej-rb *,
.ej-rb *::before,
.ej-rb *::after { box-sizing: border-box; }

.ej-rb button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.ej-rb input,
.ej-rb textarea,
.ej-rb select { font-family: inherit; color: inherit; }
.ej-rb img { display: block; max-width: 100%; }
.ej-rb h1, .ej-rb h2, .ej-rb h3, .ej-rb p { margin: 0; }
.ej-rb a { color: inherit; text-decoration: none; }

.ej-rb__noscript { padding: 90px 24px; text-align: center; }
.ej-rb__noscript h1 { font-family: var(--rb-serif); font-size: 44px; font-weight: 300; margin-bottom: 14px; }
.ej-rb__noscript p { color: rgba(244, 241, 234, .56); }

/* ── shared atoms ────────────────────────────────────────────── */

.rb-eyebrow {
	font-size: 10px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
	color: rgba(244, 241, 234, .44);
	display: flex; align-items: center; gap: 9px;
}
.rb-eyebrow i { font-style: normal; color: var(--rb-gold); }

.rb-h1 {
	font-family: var(--rb-serif); font-weight: 300; font-size: 62px; line-height: 1.02;
	letter-spacing: -.01em; margin: 18px 0 20px;
}
.rb-h1 em { font-style: italic; color: var(--rb-gold); }

.rb-body { font-size: 14px; line-height: 1.75; color: rgba(244, 241, 234, .56); max-width: 330px; text-wrap: pretty; }

.rb-price { font-family: var(--rb-serif); font-size: 24px; letter-spacing: .02em; color: var(--rb-gold); }

.rb-label { font-size: 9px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 241, 234, .34); }

.rb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	padding: 18px 30px; border: 1px solid var(--rb-gold-deep);
	font-size: 11px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
	color: var(--rb-bone); background: transparent;
	transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.rb-btn:hover { background: var(--rb-gold); color: #0A0A0C; border-color: var(--rb-gold); }
.rb-btn[disabled] { opacity: .4; cursor: default; }
.rb-btn[disabled]:hover { background: transparent; color: var(--rb-bone); border-color: var(--rb-gold-deep); }

.rb-btn2 {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 18px 26px; border: 1px solid var(--rb-line3);
	font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
	color: rgba(244, 241, 234, .72);
	transition: border-color .35s ease, color .35s ease;
}
.rb-btn2:hover { border-color: rgba(255, 255, 255, .32); color: var(--rb-bone); }

.rb-chip {
	padding: 10px 16px; border: 1px solid var(--rb-line3);
	font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(244, 241, 234, .6);
	transition: all .35s ease;
}
.rb-chip:hover { border-color: var(--rb-gold-2); color: var(--rb-bone); }
.rb-chip.is-on { border-color: var(--rb-gold-deep); color: var(--rb-gold); background: var(--rb-wash2); }

/* ── header ──────────────────────────────────────────────────── */

.rb-head {
	display: flex; align-items: center; gap: 34px;
	padding: 24px 56px; border-bottom: 1px solid var(--rb-line);
}
.rb-head__logo { height: 58px; width: auto; }
.rb-head__mark { display: flex; align-items: center; gap: 22px; }
.rb-head__mark span {
	font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
	color: rgba(244, 241, 234, .4); padding-left: 22px; border-left: 1px solid var(--rb-line3);
}
.rb-rail { display: flex; align-items: center; margin: 0 auto; }
.rb-rail__rule { width: 34px; height: 1px; background: rgba(255, 255, 255, .1); transition: background .5s ease; }
.rb-rail__rule.is-done { background: rgba(232, 206, 147, .5); }
.rb-rail__btn { display: flex; align-items: center; gap: 9px; padding: 8px 12px; }
.rb-rail__btn[disabled] { cursor: default; }
.rb-rail__n { font-family: var(--rb-serif); font-size: 13px; color: rgba(244, 241, 234, .25); transition: color .5s ease; }
.rb-rail__l { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 241, 234, .24); transition: color .5s ease; }
.rb-rail__btn.is-done .rb-rail__n { color: rgba(232, 206, 147, .6); }
.rb-rail__btn.is-done .rb-rail__l { color: rgba(244, 241, 234, .5); }
.rb-rail__btn.is-on .rb-rail__n { color: var(--rb-gold); }
.rb-rail__btn.is-on .rb-rail__l { color: var(--rb-bone); }
.rb-head__est { text-align: right; }
.rb-head__est .rb-label { margin-bottom: 4px; }

/* ── step shell ──────────────────────────────────────────────── */

.rb-step { display: none; padding: 0 56px; }
.rb-step.is-on { display: block; }
.rb-sec { min-height: 690px; }

/* ── step 1 — the dial ───────────────────────────────────────── */

.rb-s1 { display: grid; grid-template-columns: 430px 1fr; align-items: center; min-height: 690px; }
.rb-s1__panel { max-width: 430px; }
.rb-s1__cta { margin-top: 34px; }

/* touch-action: none — without it the browser claims the gesture as a page
   pan after ~10px and fires pointercancel, so drag-to-turn never reaches its
   threshold on a phone. Worse, the inverse: a page swipe over the dial would
   turn it, and turning clears the chosen diamond. */
.rb-stage { position: relative; height: 690px; overflow: hidden; touch-action: none; }
.rb-dial { position: absolute; left: 80%; top: 50%; width: 0; height: 0; }
/* Stacking inside the dial: band (1) BELOW the stones (2). A diamond is set
   on top of the shank, so the metal must pass behind it. DOM order alone is
   too fragile to rely on here. */
.rb-dial__rotor { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; transition: transform var(--rb-dur) var(--rb-ease); }
.rb-dial__arc { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }

/* The gem's own transform MUST animate on the same curve as the rotor.
   Each gem counter-rotates by exactly the angle the rotor turns; if the rotor
   animates and the gem snaps, the two no longer cancel and every stone visibly
   tips 20deg the instant you turn the dial, then rights itself over 1.05s. */
.rb-gem {
	position: absolute; left: 0; top: 0;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transform-origin: 0 0;
	transition: transform var(--rb-dur) var(--rb-ease), opacity .5s ease;
}
.rb-gem:focus-visible { outline: 1px solid var(--rb-gold); outline-offset: 10px; }

/* WHY width/height AND NOT transform: scale() — this is deliberate.
   The stone grows 104px -> 186px as the dial turns. Under a scale animation
   the compositor stretches the texture it already rasterized at 104px, so the
   diamond visibly softens for the whole 1.05s while it is the largest thing on
   screen. Animating the box instead re-renders the background image sharp at
   every frame. The design handoff documents the same artifact from the other
   direction ("never apply a filter to a stone image ... visibly softens the
   stone as it grows on the dial. This was a real bug in the prototype.").
   The usual objection to animating layout properties — reflow — does not apply
   here: every gem is absolutely positioned inside a zero-size dial container,
   so nothing else on the page is laid out by these boxes, and at most three
   are in flight at once. Sharpness of the hero product image wins. */
.rb-gem__img {
	position: relative; flex: 0 0 auto;
	background-size: contain; background-position: center; background-repeat: no-repeat;
	transition: width var(--rb-dur) var(--rb-ease), height var(--rb-dur) var(--rb-ease), opacity .85s var(--rb-ease);
}
/* A blurred layer BEHIND the stone, never a filter on the image itself:
   filtering the stone forces a raster snapshot that visibly softens it as it
   grows on the dial. */
.rb-gem__bloom {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	z-index: -1; pointer-events: none;
	transition: width var(--rb-dur) var(--rb-ease), height var(--rb-dur) var(--rb-ease), background .95s var(--rb-ease);
}
.rb-gem__label {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	font-size: 8.5px; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap;
	color: rgba(244, 241, 234, .32); transition: all .6s ease;
}
.rb-gem.is-on .rb-gem__label { font-size: 10px; color: var(--rb-gold); }

/* z-index 1: explicitly BELOW the rotor (2) so the stone sits on the metal. */
.rb-band { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; transition: all .6s cubic-bezier(.4, 0, .2, 1); }
.rb-band__inner { position: absolute; inset: 0; }

/* Above the dial: the dial's gems and arcs overflow their 0x0 container and
   would otherwise sit over these. */
.rb-s1__info { z-index: 2; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 290px; padding-top: 22px; border-top: 1px solid var(--rb-gold-1); }
.rb-s1__info h2 { font-family: var(--rb-serif); font-weight: 300; font-size: 34px; }
.rb-s1__info .tag { font-family: var(--rb-serif); font-style: italic; font-size: 16px; color: var(--rb-gold); margin: 2px 0 14px; }
.rb-s1__info .desc { font-size: 13px; line-height: 1.7; color: rgba(244, 241, 234, .5); }
.rb-s1__facts { display: flex; gap: 34px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rb-line2); }
.rb-s1__facts b { display: block; font-family: var(--rb-serif); font-size: 19px; font-weight: 400; color: var(--rb-bone); margin-top: 5px; }

.rb-s1__controls { z-index: 2; position: absolute; right: 0; bottom: 34px; display: flex; align-items: center; gap: 12px; }
.rb-turn { width: 42px; height: 42px; border: 1px solid var(--rb-line3); display: flex; align-items: center; justify-content: center; color: var(--rb-gold); transition: border-color .35s ease; }
.rb-turn:hover { border-color: var(--rb-gold-2); }
.rb-hint { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 241, 234, .3); margin: 0 6px; }
.rb-metal { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--rb-line3); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 234, .6); transition: all .35s ease; }
.rb-metal.is-on { border-color: var(--rb-gold-deep); color: var(--rb-bone); }
.rb-metal i { width: 13px; height: 13px; border-radius: 50%; display: block; }

/* ── step 2 — the vault ──────────────────────────────────────── */

.rb-s2 { display: grid; grid-template-columns: 300px 1fr; gap: 48px; min-height: 690px; padding-top: 46px; }
.rb-filters { border-right: 1px solid var(--rb-line); padding-right: 34px; }
.rb-filters__grp { margin-bottom: 30px; }
.rb-filters__grp > .rb-label { margin-bottom: 12px; display: block; }
.rb-seg { display: flex; border: 1px solid var(--rb-line3); }
.rb-seg button { flex: 1; padding: 12px 6px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 234, .5); transition: all .35s ease; }
.rb-seg button.is-on { background: var(--rb-wash2); color: var(--rb-gold); }
.rb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-chips .rb-chip { padding: 8px 13px; font-size: 10px; }

.rb-range { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; margin: 6px 0; }
.rb-range::-webkit-slider-runnable-track { height: 1px; background: var(--rb-gold-2); }
.rb-range::-moz-range-track { height: 1px; background: var(--rb-gold-2); }
.rb-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%;
	background: var(--rb-gold); box-shadow: 0 0 10px rgba(232, 206, 147, .7); margin-top: -5.5px; cursor: pointer;
}
.rb-range::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--rb-gold); box-shadow: 0 0 10px rgba(232, 206, 147, .7); cursor: pointer; }
.rb-range__row { display: flex; align-items: baseline; justify-content: space-between; }
.rb-range__row b { font-family: var(--rb-serif); font-size: 17px; font-weight: 400; color: var(--rb-gold); }

.rb-s2__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.rb-s2__head h1 { font-family: var(--rb-serif); font-weight: 300; font-size: 44px; line-height: 1.05; }
.rb-s2__head h1 em { font-style: italic; color: var(--rb-gold); }
.rb-s2__sub { font-size: 12.5px; color: rgba(244, 241, 234, .44); margin-top: 8px; }
.rb-sort { display: flex; border: 1px solid var(--rb-line3); }
.rb-sort button { padding: 11px 18px; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 234, .5); transition: all .35s ease; }
.rb-sort button.is-on { background: var(--rb-wash2); color: var(--rb-gold); }

.rb-vault__head,
.rb-stone {
	display: grid;
	grid-template-columns: 60px 1fr 1fr .6fr .8fr 1.4fr 1.4fr 1fr;
	align-items: center; gap: 14px;
}
.rb-vault__head { padding: 0 12px 12px; border-bottom: 1px solid var(--rb-line3); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 241, 234, .34); }
.rb-stone { padding: 16px 12px; border-bottom: 1px solid var(--rb-line); cursor: pointer; transition: background .35s ease; text-align: left; width: 100%; }
.rb-stone:hover { background: var(--rb-wash); }
.rb-stone.is-on { background: var(--rb-wash2); outline: 1px solid var(--rb-sel); }
.rb-stone__thumb { width: 42px; height: 42px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.rb-stone__ct { font-family: var(--rb-serif); font-size: 21px; }
.rb-stone__type { display: block; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 241, 234, .4); margin-top: 3px; }
.rb-stone__cell { font-size: 13px; color: rgba(244, 241, 234, .72); }
.rb-stone__dim { font-size: 12px; color: rgba(244, 241, 234, .44); }
.rb-stone__price { text-align: right; }
.rb-stone__price b { font-family: var(--rb-serif); font-size: 21px; font-weight: 400; color: var(--rb-gold); }
.rb-stone__pick { display: block; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 241, 234, .34); margin-top: 3px; }
.rb-stone.is-on .rb-stone__pick { color: var(--rb-gold); }

.rb-empty { padding: 60px 12px; text-align: center; color: rgba(244, 241, 234, .5); font-size: 14px; line-height: 1.7; }
.rb-pager { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.rb-pager button { width: 34px; height: 34px; border: 1px solid var(--rb-line3); font-size: 11px; color: rgba(244, 241, 234, .55); }
.rb-pager button.is-on { border-color: var(--rb-gold-deep); color: var(--rb-gold); }

/* ── step 3 — settings ───────────────────────────────────────── */

.rb-s3 { padding-top: 46px; }
.rb-s3__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 34px; margin-bottom: 34px; }
.rb-s3__top h1 { font-family: var(--rb-serif); font-weight: 300; font-size: 52px; line-height: 1.04; }
.rb-s3__top h1 em { font-style: italic; color: var(--rb-gold); }
.rb-metals { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rb-card { border: 1px solid var(--rb-line); background: var(--rb-panel); padding: 0 0 22px; text-align: left; transition: border-color .35s ease, background .35s ease; }
.rb-card:hover { border-color: var(--rb-gold-1); }
.rb-card.is-on { border-color: var(--rb-gold-deep); background: linear-gradient(180deg, var(--rb-wash2), transparent 70%), var(--rb-panel); }
.rb-card__pic { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rb-card__pic img { width: 100%; height: 100%; object-fit: contain; transition: filter .5s ease; }
/* The Cathedral Solitaire photo is a profile shot while the rest are top-down;
   padding it to 1.6:1 stops it dominating the grid. */
.rb-card__pic.is-profile img { padding: 0 18%; }
.rb-card__body { padding: 0 24px; }
.rb-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rb-card__row h3 { font-family: var(--rb-serif); font-weight: 400; font-size: 26px; }
.rb-card__row b { font-family: var(--rb-serif); font-weight: 400; font-size: 19px; color: var(--rb-gold); }
.rb-card__desc { font-size: 12.5px; line-height: 1.65; color: rgba(244, 241, 234, .5); margin-top: 8px; }
.rb-card__sel { display: none; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--rb-gold); margin-top: 12px; }
.rb-card.is-on .rb-card__sel { display: block; }

/* ── step 4 — engraving ──────────────────────────────────────── */

.rb-s4 { display: grid; grid-template-columns: 430px 1fr; gap: 56px; align-items: center; min-height: 690px; }
.rb-eng__input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--rb-line3); padding: 12px 0; font-family: var(--rb-serif); font-size: 30px; font-weight: 300; letter-spacing: .06em; outline: none; }
.rb-eng__input::placeholder { color: rgba(244, 241, 234, .28); }
.rb-eng__input:focus { border-bottom-color: var(--rb-gold-deep); }
.rb-eng__meta { display: flex; justify-content: space-between; margin-top: 10px; }
.rb-eng__glyphs { display: flex; gap: 8px; }
.rb-eng__glyphs button { width: 42px; height: 42px; border: 1px solid var(--rb-line3); font-size: 15px; color: rgba(244, 241, 234, .7); transition: border-color .35s ease; }
.rb-eng__glyphs button:hover { border-color: var(--rb-gold-2); }
.rb-eng__stage { display: flex; align-items: center; justify-content: center; height: 690px; }
.rb-eng__ring { position: relative; width: 340px; height: 340px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rb-eng__ring::after { content: ""; position: absolute; inset: -60px; border-radius: 50%; border: 1px solid var(--rb-line); }
.rb-eng__inner { width: 66%; height: 66%; border-radius: 50%; background: var(--rb-black); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 22px; }
.rb-eng__text { font-size: 15px; color: rgba(244, 241, 234, .8); word-break: break-word; }
.rb-eng__text.is-empty { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 241, 234, .3); }
.rb-eng__text.f-italic { font-family: var(--rb-serif); font-style: italic; font-weight: 400; letter-spacing: .04em; }
.rb-eng__text.f-caps { font-family: var(--rb-sans); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; }
.rb-eng__text.f-light { font-family: var(--rb-serif); font-weight: 300; letter-spacing: .14em; }

/* ── step 5 — review ─────────────────────────────────────────── */

.rb-s5 { display: grid; grid-template-columns: 1fr 430px; gap: 64px; min-height: 690px; padding-top: 46px; }
.rb-review__pic { border: 1px solid var(--rb-line); background: var(--rb-panel); aspect-ratio: 1 / 1; max-width: 430px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rb-review__pic img { width: 100%; height: 100%; object-fit: contain; }
.rb-spec { margin-top: 26px; }
.rb-spec__row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rb-line); font-size: 13.5px; }
.rb-spec__row span:first-child { color: rgba(244, 241, 234, .44); }
.rb-spec__row span:last-child { text-align: right; }
.rb-spec__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; }
.rb-sizes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.rb-sizes button { padding: 9px 13px; border: 1px solid var(--rb-line3); font-size: 11px; color: rgba(244, 241, 234, .6); transition: all .35s ease; }
.rb-sizes button.is-on { border-color: var(--rb-gold-deep); color: var(--rb-gold); background: var(--rb-wash2); }

.rb-form h2 { font-family: var(--rb-serif); font-weight: 300; font-size: 38px; margin-bottom: 8px; }
.rb-form__field { margin-top: 22px; }
.rb-form__field input,
.rb-form__field textarea {
	width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--rb-line3);
	padding: 11px 0; font-size: 14px; outline: none; resize: vertical;
}
.rb-form__field input:focus,
.rb-form__field textarea:focus { border-bottom-color: var(--rb-gold-deep); }
.rb-form__field input::placeholder,
.rb-form__field textarea::placeholder { color: rgba(244, 241, 234, .28); }
.rb-form__note { font-size: 12px; color: rgba(244, 241, 234, .4); margin-top: 18px; }
.rb-form__err { font-size: 13px; color: #E6A08C; margin-top: 14px; }
.rb-sent { text-align: center; padding: 70px 20px; }
.rb-sent__spark { font-size: 24px; color: var(--rb-gold); }
.rb-sent h2 { font-family: var(--rb-serif); font-weight: 300; font-size: 38px; margin: 14px 0 10px; }
.rb-sent__ref { font-family: var(--rb-serif); font-size: 22px; color: var(--rb-gold); letter-spacing: .08em; margin: 18px 0; }

.rb-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 0 70px; }
.rb-foot__l { font-size: 12px; color: rgba(244, 241, 234, .4); }
.rb-foot__r { display: flex; gap: 12px; }

/* ── motion ──────────────────────────────────────────────────── */

@keyframes ejGlint { 0% { background-position: -80% 0; } 100% { background-position: 180% 0; } }
@keyframes ejRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rb-rise { animation: ejRise .7s var(--rb-ease) both; }

@media (prefers-reduced-motion: reduce) {
	.ej-rb *,
	.ej-rb *::before,
	.ej-rb *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ── mobile (< 1440px) ───────────────────────────────────────── */

.ej-rb__mobile { display: none; }

@media (max-width: 1439px) {
	.ej-rb__desktop { display: none; }
	.ej-rb__mobile { display: block; }

	.rb-mhead {
		position: sticky; top: 0; z-index: 20;
		display: flex; align-items: center; justify-content: space-between; gap: 16px;
		padding: 14px 20px; background: rgba(8, 8, 10, .9);
		-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--rb-line);
	}
	.rb-mhead__logo { height: 34px; width: auto; }
	.rb-mhead__step { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(244, 241, 234, .5); }
	.rb-mhead__step b { font-family: var(--rb-serif); color: var(--rb-gold); margin-left: 8px; letter-spacing: .06em; }
	.rb-mprog { height: 1px; background: rgba(255, 255, 255, .08); overflow: hidden; }
	/* scaleX, not width: this is a compositor-only animation, and the bar is in
	   normal flow so animating width here would reflow the page on every step. */
	.rb-mprog i {
		display: block; height: 1px; width: 100%; background: var(--rb-gold);
		transform-origin: 0 50%; transform: scaleX(0);
		transition: transform .5s var(--rb-ease);
	}

	/* The desktop 56px gutter must not survive onto a phone — it would leave a
	   238px content column on a 390px screen and push the dial's clip box out
	   of place. */
	.rb-step { padding: 0; }

	.rb-mwrap { max-width: 480px; margin: 0 auto; padding: 0 20px 120px; }
	/* Breaks out of .rb-mwrap's 20px gutter to sit full-bleed.
	   touch-action: none matters MORE here than on desktop — drag is the
	   primary way to turn the dial on a phone, and without it the browser
	   steals the gesture as a page pan before the drag threshold is reached. */
	.rb-mstage { position: relative; height: 486px; margin: 0 -20px; overflow: hidden; touch-action: none; }
	.rb-mcontrols { z-index: 2; position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
	.rb-mcontrols .rb-turn { width: 44px; height: 44px; }

	/* On mobile the shape panel sits in normal flow BELOW the dial. Without
	   this reset it keeps the desktop absolute placement and lands on top of
	   the stage, printing the shape name across the diamond. */
	.rb-s1__info {
		position: static; width: auto; transform: none;
		margin-top: 22px; padding-top: 18px;
	}
	.rb-s1__info h2 { font-size: 28px; }
	.rb-s1__facts { gap: 26px; }

	.rb-h1 { font-size: 36px; line-height: 1.05; margin: 14px 0 14px; }
	.rb-body { max-width: none; }
	.rb-price { font-size: 19px; }
	.rb-sec { min-height: 0; }

	.rb-mfoot {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		display: flex; align-items: stretch; gap: 12px; padding: 12px 20px;
		background: rgba(8, 8, 10, .86);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		border-top: 1px solid var(--rb-line);
	}
	.rb-mfoot__back { width: 54px; border: 1px solid var(--rb-line3); display: flex; align-items: center; justify-content: center; color: rgba(244, 241, 234, .7); }
	.rb-mfoot__est { display: flex; flex-direction: column; justify-content: center; }
	.rb-mfoot__est .rb-label { font-size: 8.5px; }
	.rb-mfoot__est b { font-family: var(--rb-serif); font-size: 19px; font-weight: 400; color: var(--rb-gold); }
	.rb-mfoot .rb-btn { flex: 1; padding: 16px 14px; font-size: 10px; letter-spacing: .2em; background: var(--rb-gold); color: #0A0A0C; border-color: var(--rb-gold); }
	.rb-mfoot .rb-btn[disabled] { background: rgba(232, 206, 147, .25); border-color: transparent; color: rgba(10, 10, 12, .55); }

	/* Steps 2-5 stack. */
	.rb-s2, .rb-s4, .rb-s5 { grid-template-columns: 1fr; gap: 30px; min-height: 0; padding-top: 22px; }
	.rb-filters { border-right: none; padding-right: 0; border-bottom: 1px solid var(--rb-line); padding-bottom: 22px; }
	.rb-s2__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.rb-s2__head h1 { font-size: 30px; }
	.rb-cards { grid-template-columns: 1fr; }
	.rb-s3 { padding-top: 22px; }
	.rb-s3__top { flex-direction: column; gap: 18px; }
	.rb-s3__top h1 { font-size: 34px; }
	.rb-metals { justify-content: flex-start; }
	.rb-eng__stage { height: auto; padding: 30px 0; }
	.rb-eng__ring { width: 240px; height: 240px; }
	.rb-eng__ring::after { inset: -30px; }
	.rb-review__pic { max-width: none; }
	.rb-form h2 { font-size: 30px; }

	/* Stone rows become cards. */
	.rb-vault__head { display: none; }
	.rb-stone {
		grid-template-columns: 52px 1fr auto;
		grid-template-areas: "thumb ct price" "thumb meta price" "dim dim dim";
		padding: 16px 4px; gap: 4px 14px;
	}
	.rb-stone__thumb { grid-area: thumb; align-self: start; }
	.rb-stone__ctwrap { grid-area: ct; }
	.rb-stone__meta { grid-area: meta; display: flex; gap: 10px; flex-wrap: wrap; }
	.rb-stone__dimwrap { grid-area: dim; margin-top: 6px; }
	.rb-stone__price { grid-area: price; }
}


/* ── tablet (768 – 1439px) ───────────────────────────────────────
   The handoff shipped no tablet layout and warned against improvising one,
   because the desktop dial is anchored to a fixed 1440 canvas. So tablet does
   NOT stretch the desktop layout — it takes the stacked phone structure and
   scales it up, with its own dial geometry (see dialSpec() in the JS).
   ──────────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1439px) {
	.rb-mwrap { max-width: 720px; padding: 0 32px 130px; }
	.rb-mstage { height: 620px; margin: 0 -32px; }
	.rb-mcontrols { left: 32px; right: 32px; bottom: 26px; gap: 11px; }

	.rb-mhead { padding: 18px 32px; }
	.rb-mhead__logo { height: 44px; }
	.rb-mfoot { padding: 16px 32px; }
	.rb-mfoot .rb-btn { flex: 0 1 320px; margin-left: auto; }

	.rb-h1 { font-size: 48px; }
	.rb-body { font-size: 15px; }
	.rb-price { font-size: 22px; }

	.rb-s1__info h2 { font-size: 34px; }
	.rb-s1__facts { gap: 40px; }

	/* Two columns for the things that are lists on a phone. */
	.rb-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.rb-s2__head { flex-direction: row; align-items: flex-end; }
	.rb-s2__head h1 { font-size: 38px; }
	.rb-s3__top { flex-direction: row; align-items: flex-start; justify-content: space-between; }
	.rb-s3__top h1 { font-size: 42px; }
	.rb-metals { justify-content: flex-end; max-width: 420px; }

	/* The filter rail sits above the results as a horizontal band. */
	.rb-filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
	.rb-filters > .rb-label { grid-column: 1 / -1; }

	/* Stone rows can afford the full table again. */
	.rb-vault__head { display: grid; }
	.rb-vault__head,
	.rb-stone {
		grid-template-columns: 50px 1fr .8fr .5fr .7fr 1.2fr 1fr;
		grid-template-areas: none;
		padding: 15px 8px;
	}
	.rb-stone__dimwrap { display: none; }

	.rb-s5 { grid-template-columns: 1fr 1fr; gap: 40px; }
	.rb-s4 { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
	.rb-eng__stage { height: auto; padding: 10px 0; }
	.rb-eng__ring { width: 300px; height: 300px; }
	.rb-eng__ring::after { inset: -44px; }
	.rb-review__pic { max-width: none; }
}