/* REFRM v166 — polish layer: hover, touch response, cursor, scroll and entrance motion.
   Loads LAST on every page. Graphite/silver only (matches neutral-v161). Presentation-only: no ids, behaviour or data touched.
   Heavy effects (cursor ring, magnet, tilt, progress bar, smooth scroll) are scoped to html[data-polish="page"|"auth"];
   the tactile basics (press, focus ring, tap highlight) apply everywhere, including the editor.
   Honours Settings -> Motion (html[data-refrm-motion]) and prefers-reduced-motion. Uses transform/opacity/scale/translate only. */

:root{--rf-out:cubic-bezier(.16,1,.3,1);--rf-spring:cubic-bezier(.34,1.56,.64,1);--rf-sil:#dcdcdc}

/* ───── 1. tactile basics (everywhere) ───── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a,button,summary,label,select,[role="button"],[role="tab"],input[type="range"]{touch-action:manipulation}
::selection{background:rgba(220,220,220,.28);color:#fff}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--rf-sil);outline-offset:3px}
/* press feedback: .is-pressed is set on pointerdown by polish-v166.js so touch gets it instantly (iOS never fires :active reliably) */
.rf-btn,.chip,.dd-btn,.burger,.nav-links>a,.nav-cta .signin,.guide-card,.rf-card,summary,.foot-col a{transition:scale .22s var(--rf-spring),translate .35s var(--rf-spring),background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .3s ease,opacity .22s ease}
.rf-btn.is-pressed,.chip.is-pressed,.dd-btn.is-pressed,.burger.is-pressed{scale:.955;transition-duration:.1s}
.guide-card.is-pressed,.rf-card.is-pressed{scale:.985;transition-duration:.12s}
.nav-links>a.is-pressed,.foot-col a.is-pressed{scale:.97}
button:not(:disabled),[role="button"]{cursor:pointer}

/* ───── 2. links: sliding underline ───── */
.foot-col a,.foot-bot a,.crumbs a,.prose a:not(.rf-btn){background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--rf-out),color .2s ease;padding-bottom:1px}
.foot-col a:hover,.foot-bot a:hover,.crumbs a:hover,.prose a:not(.rf-btn):hover{background-size:100% 1px}
.nav-links>a{position:relative}
.nav-links>a::after{content:"";position:absolute;left:50%;bottom:6px;width:0;height:1px;background:currentColor;opacity:.7;translate:-50% 0;transition:width .35s var(--rf-out)}
.nav-links>a:hover::after{width:calc(100% - 28px)}

/* ───── 3. buttons / inputs ───── */
@media (hover:hover){
  .rf-btn:hover{box-shadow:0 8px 28px -10px rgba(255,255,255,.28)}
  .rf-btn--primary:hover{box-shadow:0 10px 34px -8px rgba(255,255,255,.42)}
  .chip:hover{translate:0 -2px}
  .logo:hover .logo-mark{rotate:-6deg;scale:1.06}
}
.logo-mark{transition:rotate .5s var(--rf-spring),scale .5s var(--rf-spring)}
.rf-pill-input{transition:box-shadow .35s ease,border-color .25s ease,transform .35s var(--rf-out)}
.rf-pill-input:focus-within{border-color:rgba(255,255,255,.5)!important;box-shadow:0 0 0 4px rgba(255,255,255,.07),0 18px 50px -18px rgba(255,255,255,.2)}
details[open]>summary .ic{rotate:180deg}
summary .ic{transition:rotate .35s var(--rf-spring)}
.faq details{transition:border-color .25s ease,background-color .25s ease}
.faq details[open]{border-color:var(--rf-line-strong)}
.faq details>p{animation:rfFaqIn .45s var(--rf-out) both}
@keyframes rfFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ───── 4. full-page effects ───── */
html[data-polish="page"],html[data-polish="auth"]{scroll-padding-top:84px}
html[data-polish="page"]{scroll-behavior:smooth}
#rf-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:9998;pointer-events:none;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,255,255,.1),#fff 60%,rgba(255,255,255,.4));opacity:0;transition:opacity .3s ease}
#rf-progress.on{opacity:1}
/* cursor follower: decorative only, the native cursor always stays visible */
#rf-ring,#rf-dot{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;will-change:transform;border-radius:50%}
#rf-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.5);transition:opacity .3s ease,width .35s var(--rf-out),height .35s var(--rf-out),margin .35s var(--rf-out),background-color .3s ease,border-color .3s ease;mix-blend-mode:difference}
#rf-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#fff;mix-blend-mode:difference;transition:opacity .3s ease,scale .3s var(--rf-spring)}
html.rf-has-cursor #rf-ring,html.rf-has-cursor #rf-dot{opacity:1}
#rf-ring.is-link{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
#rf-ring.is-down{width:24px;height:24px;margin:-12px 0 0 -12px;background:rgba(255,255,255,.25)}
#rf-ring.is-text,#rf-dot.is-text{opacity:0!important}
#rf-dot.is-link{scale:0}
html.rf-hide-cursor #rf-ring,html.rf-hide-cursor #rf-dot{opacity:0}
/* pointer-driven depth */
[data-tilt]{transform-style:preserve-3d}
[data-tilt].is-tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)!important;transition:transform .12s linear,border-color .25s ease,box-shadow .3s ease!important;box-shadow:0 28px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
[data-tilt]:not(.is-tilting){transition:transform .6s var(--rf-out),border-color .25s ease,box-shadow .3s ease}
.hero-glow{transition:translate .9s var(--rf-out);translate:calc(var(--px,0)*26px) calc(var(--py,0)*16px)}
.showcase .demo{animation:rfFloat 9s ease-in-out infinite}
@keyframes rfFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ───── 5. entrance choreography ───── */
.js .reveal{transition-delay:calc(var(--i,0)*70ms)}
.js .reveal:not(.in){filter:blur(4px)}
.js .reveal.in{filter:none;transition:opacity .8s var(--rf-out),transform .8s var(--rf-out),filter .8s var(--rf-out)}
.grad{background-size:200% 100%;animation:rfSheen 9s ease-in-out infinite alternate}
@keyframes rfSheen{from{background-position:0 0}to{background-position:100% 0}}
.rf-eyebrow svg{animation:rfPulseIcon 3.2s ease-in-out infinite}
@keyframes rfPulseIcon{0%,100%{opacity:.7;scale:1}50%{opacity:1;scale:1.18}}

/* ───── 6. guides grid (internal links used on the homepage and SEO pages) ───── */
.guides{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.guides .guide-card{flex:1 1 300px;max-width:392px}
.guide-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--rf-r-card,22px);border:1px solid var(--rf-line);background:var(--rf-surface);overflow:hidden;isolation:isolate}
.guide-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 70%);opacity:0;transition:opacity .35s ease}
.guide-card:hover::before{opacity:1}
.guide-card:hover{border-color:var(--rf-line-strong);translate:0 -3px}
.guide-card small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rf-faint);font-weight:600}
.guide-card b{font-size:18px;letter-spacing:-.015em;color:var(--rf-text)}
.guide-card span.d{font-size:14.5px;color:var(--rf-muted);line-height:1.55}
.guide-card .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--rf-text)}
.guide-card .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .35s var(--rf-spring)}
.guide-card:hover .go svg{translate:5px 0}

/* ───── 7. footer with a Guides column ───── */
.foot-in.has-guides{grid-template-columns:1.5fr repeat(4,1fr)}
@media (max-width:980px){.foot-in.has-guides{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.foot-in.has-guides{grid-template-columns:1fr}}

/* ───── 8. scrollbar ───── */
@supports (scrollbar-color:auto){html[data-polish]{scrollbar-color:#3a3a3a #0a0a0a;scrollbar-width:thin}}
html[data-polish]::-webkit-scrollbar{width:10px;height:10px}
html[data-polish]::-webkit-scrollbar-track{background:#0a0a0a}
html[data-polish]::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:99px;border:2px solid #0a0a0a}
html[data-polish]::-webkit-scrollbar-thumb:hover{background:#4a4a4a}

/* ───── 9. small screens: bigger tap targets, no hover-only affordances ───── */
@media (hover:none){
  .rf-btn,.chip,.dd-btn,.nav-links>a{min-height:44px}
  .nav-links>a::after{display:none}
  .showcase .demo{animation:none}
}
@media (max-width:720px){.chips{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.chips .chip{scroll-snap-align:start}}

/* ───── 10. motion off / reduced ───── */
@media (prefers-reduced-motion:reduce){
  html[data-polish="page"]{scroll-behavior:auto}
  html:not([data-refrm-motion="on"]) .js .reveal,html:not([data-refrm-motion="on"]) .js .reveal:not(.in){filter:none;opacity:1;transform:none;transition:none}
  html:not([data-refrm-motion="on"]) .grad,html:not([data-refrm-motion="on"]) .showcase .demo,html:not([data-refrm-motion="on"]) .rf-eyebrow svg,html:not([data-refrm-motion="on"]) .faq details>p{animation:none}
  html:not([data-refrm-motion="on"]) #rf-ring,html:not([data-refrm-motion="on"]) #rf-dot,html:not([data-refrm-motion="on"]) #rf-progress{display:none}
  html:not([data-refrm-motion="on"]) .hero-glow{translate:none}
}
html[data-refrm-motion="off"]{scroll-behavior:auto!important}
html[data-refrm-motion="off"] .js .reveal,html[data-refrm-motion="off"] .js .reveal:not(.in){filter:none;opacity:1;transform:none;transition:none}
html[data-refrm-motion="off"] .grad,html[data-refrm-motion="off"] .showcase .demo,html[data-refrm-motion="off"] .rf-eyebrow svg,html[data-refrm-motion="off"] .faq details>p{animation:none}
html[data-refrm-motion="off"] #rf-ring,html[data-refrm-motion="off"] #rf-dot,html[data-refrm-motion="off"] #rf-progress{display:none}
html[data-refrm-motion="off"] .hero-glow{translate:none}
html[data-refrm-motion="off"] .rf-btn,html[data-refrm-motion="off"] .chip,html[data-refrm-motion="off"] .guide-card{transition-duration:.01s}