/* Glass Skin SA: "Build your routine" strip with a frosted-glass panel (home page).
   Linked from index.php. Remove the link and the section there to undo. */

.rt{position:relative;overflow:hidden;padding:96px 24px 104px;background:#f3eee8;isolation:isolate}
.rt-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.75;pointer-events:none}
.rt-orb.o1{width:420px;height:420px;left:-120px;top:-60px;background:#f6cfd2;animation:rt-drift 18s ease-in-out infinite alternate}
.rt-orb.o2{width:480px;height:480px;right:-140px;top:40px;background:#cfe3f3;animation:rt-drift 22s ease-in-out infinite alternate-reverse}
.rt-orb.o3{width:380px;height:380px;left:38%;bottom:-160px;background:#f4e3b8;animation:rt-drift 20s ease-in-out infinite alternate}
@keyframes rt-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(60px,40px,0)}}

.rt-in{max-width:1180px;margin:0 auto}
.rt-head{text-align:center;margin-bottom:40px}
.rt-head .eyebrow{display:block;margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep)}
.rt-head h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.018em;font-size:clamp(32px,4.6vw,56px);line-height:1.06;margin:0;color:var(--ink)}
.rt-head p{margin:14px auto 0;max-width:34em;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--ink-dim)}

.rt-steps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.rt-step{display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 12px;border-radius:980px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font:500 15px var(--font-body);cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s,color .25s}
.rt-step b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(42,37,34,.08);font-size:12px;font-weight:600;transition:background .25s,color .25s}
.rt-step:hover{transform:translateY(-2px);background:rgba(255,255,255,.75)}
.rt-step[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 14px 28px -16px rgba(42,37,34,.6)}
.rt-step[aria-selected="true"] b{background:rgba(255,255,255,.22);color:#fff}

.rt-glass{--mx:50%;--my:0%;position:relative;border-radius:30px;padding:36px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.52);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 80px -40px rgba(42,37,34,.35);overflow:hidden}
/* a soft light that follows the cursor across the glass */
.rt-glass::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.75),transparent 60%);opacity:0;transition:opacity .3s}
.rt-glass:hover::before{opacity:1}
.rt-panel{display:none;grid-template-columns:.8fr 2.2fr;gap:36px;align-items:center;position:relative}
.rt-panel.is-on{display:grid;animation:rt-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rt-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rt-copy h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin:0;color:var(--ink)}
.rt-copy p{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--ink-dim)}
.rt-copy a{display:inline-block;margin-top:22px;padding:13px 26px;border-radius:980px;background:var(--accent);color:#fff;font-size:15px;font-weight:500;transition:transform .2s,box-shadow .2s}
.rt-copy a:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(42,37,34,.5)}
.rt-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rt-card{display:flex;flex-direction:column;gap:8px;padding:10px 10px 16px;border-radius:20px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.rt-card:hover{transform:translateY(-6px);box-shadow:0 26px 40px -24px rgba(42,37,34,.35)}
.rt-img{display:block;aspect-ratio:1/1;border-radius:14px;background:#fff;overflow:hidden}
.rt-img img{display:block;width:100%;height:100%;object-fit:contain;filter:contrast(1.07) brightness(1.025) saturate(1.04)}
.rt-name{padding:0 6px;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rt-price{padding:0 6px;font-size:14px;color:var(--ink-dim)}

/* the same cursor light on the home page's rail cards and hero photo tile */
.hs-art,.ar-card{--mx:50%;--my:50%}
html .ar-card.has-photo::after,.hs-art::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(255,236,222,.55),transparent 60%);opacity:0;transition:opacity .3s}
html .ar-card.has-photo:hover::after,.hs-art:hover::after{opacity:1}
.hs-art{position:relative}
html .ar-card.has-photo{position:relative}

@media(max-width:900px){
  .rt{padding:64px 16px 72px}
  .rt-glass{padding:22px;border-radius:24px}
  .rt-panel.is-on{grid-template-columns:1fr;gap:22px}
  .rt-row{grid-template-columns:repeat(2,1fr)}
  .rt-steps{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 4px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rt-step{flex:none}
}
@media(prefers-reduced-motion:reduce){
  .rt-orb{animation:none}
  .rt-panel.is-on{animation:none}
}
html[data-theme="dark"] .rt{background:#1b1c20}
html[data-theme="dark"] .rt-glass{background:rgba(40,41,46,.55);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .rt-head h2,html[data-theme="dark"] .rt-copy h3,html[data-theme="dark"] .rt-name{color:var(--d-text,#f5f5f7)}
html[data-theme="dark"] .rt-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .rt-step{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:var(--d-text,#f5f5f7)}