/* Rene IJnema design test: Sabai Mist's palette and type, with a studio's sections and small
   living illustrations. Loaded after /assets/site.css. */
.rn{--c2:var(--grass)}
.rn h2 em, .rn .rn-split-head em{font-style:italic; color:var(--grass-deep)}
.rn-lead{margin-top:18px; color:var(--ink-soft); max-width:40ch; font-size:17.5px}
.rn-small{font-size:13px; color:var(--ink-soft); margin-top:12px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}

/* Logo: Rene IJnema in Sabai Mist's serif, mixed case */
.rn .logo .wm{letter-spacing:.005em}
.rn .logo{font-size:34px}

/* Hero: a full screen with the services line always at the bottom. Text left, a small shop
   under care right; everything sized from the viewport so it fits any desktop. */
.rn-hero{flex-direction:column; align-items:stretch; cursor:default; height:100vh; height:100svh; min-height:600px}
.rn-hero-in{width:100%; max-width:1340px; flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(24px,4vw,64px); padding-top:clamp(78px,11vh,112px); padding-bottom:clamp(20px,4vh,44px)}
.rn-hero-copy{padding:0; z-index:3}
.rn-hero .no{font-size:clamp(18px,1.7vw,25px); white-space:nowrap}
.rn-hero .big{font-size:clamp(88px,min(12.5vw,20vh),220px)}
.rn-hero .hero-line{font-size:clamp(19px,min(1.9vw,3vh),27px); max-width:24ch; margin-top:clamp(14px,2.6vh,28px)}
.rn-hero .hero-actions{margin-top:clamp(18px,3.4vh,34px)}
.rn-try{display:flex; align-items:center; gap:12px; margin-top:clamp(14px,2.6vh,24px); font-size:14px; color:var(--ink-soft)}
.rn-try .dot{width:9px; height:9px; border-radius:50%; background:var(--grass); box-shadow:0 0 0 6px rgba(194,208,108,.35); animation:rnPulse 2s ease-out infinite}

/* Soft mist that drifts and leans towards the pointer */
.rn-mist{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.rn-mist span{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rn-mist span:nth-child(1){width:46vw; height:46vw; right:-8vw; top:-12vw; background:radial-gradient(circle,#E3ECC4,rgba(227,236,196,0) 70%); transform:translate(calc(var(--mx,0) * 30px),calc(var(--my,0) * 30px))}
.rn-mist span:nth-child(2){width:30vw; height:30vw; right:22vw; bottom:-8vw; background:radial-gradient(circle,#F6E7A8,rgba(246,231,168,0) 70%); opacity:.45; transform:translate(calc(var(--mx,0) * -40px),calc(var(--my,0) * -24px))}
.rn-mist span:nth-child(3){width:22vw; height:22vw; left:-6vw; bottom:6vh; background:radial-gradient(circle,#D7E5C9,rgba(215,229,201,0) 70%); animation:rnFloat 12s ease-in-out infinite alternate}

/* The stage. container units (cqw) scale every part with the stage width; the width itself
   follows the screen height so the ticker always stays in view. */
.rn-stage{position:relative; z-index:2; justify-self:end; width:min(100%, calc((100svh - 220px) * 1.04), 680px); aspect-ratio:580/560; container-type:inline-size; perspective:1400px; font-family:var(--sans)}
.rn-layer{position:absolute; transform:translate3d(calc(var(--mx,0) * var(--d,1) * 7px), calc(var(--my,0) * var(--d,1) * 7px), 0); transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rn-win{left:13%; top:2%; width:86%; height:62%; border-radius:3.4cqw; background:#FBFCF8; box-shadow:0 4cqw 9cqw rgba(35,57,43,.16), 0 0 0 1px rgba(35,57,43,.06); overflow:hidden; display:flex; flex-direction:column;
  transform:translate3d(calc(var(--mx,0) * 6px), calc(var(--my,0) * 6px), 0) rotateY(calc(var(--mx,0) * -5deg - 4deg)) rotateX(calc(var(--my,0) * 4deg + 2deg)); transform-style:preserve-3d}
.rn-win-bar{display:flex; align-items:center; gap:2cqw; height:8.4cqw; padding:0 2.4cqw; border-bottom:1px solid rgba(35,57,43,.07); background:#F3F6EE}
.rn-win-dots{display:flex; gap:1cqw} .rn-win-dots i{width:1.6cqw; height:1.6cqw; border-radius:50%; background:rgba(35,57,43,.16)}
.rn-win-dots i:first-child{background:#E6A493} .rn-win-dots i:nth-child(2){background:#F2D35A} .rn-win-dots i:nth-child(3){background:var(--grass)}
.rn-url{flex:1; display:flex; align-items:center; gap:1cqw; height:5cqw; padding:0 2cqw; border-radius:99px; background:#fff; font-size:2.3cqw; color:var(--ink-soft)}
.rn-url svg{width:2.4cqw; height:2.4cqw; fill:var(--grass-deep); color:var(--grass-deep)}
.rn-win-cart{position:relative; display:grid; place-items:center; width:5cqw; height:5cqw; color:var(--ink)}
.rn-win-cart svg{width:4cqw; height:4cqw}
.rn-win-cart b{position:absolute; top:-.4cqw; right:-.8cqw; min-width:2.8cqw; height:2.8cqw; padding:0 .6cqw; border-radius:99px; background:var(--grass); font:500 1.8cqw/2.8cqw var(--sans); text-align:center; transform:scale(0); transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.rn-win-cart.has b{transform:scale(1)}
.rn-win-cart.bump{animation:rnBump .45s}
@keyframes rnBump{40%{transform:scale(1.25) rotate(-8deg)}}
.rn-win-body{position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:2cqw; padding:2.2cqw; overflow:hidden}
.rn-banner{position:relative; flex:0 0 auto; padding:2.4cqw 3.2cqw; border-radius:2.4cqw; background:linear-gradient(120deg,#E3ECC4,#C2D06C); overflow:hidden}
.rn-banner-k{display:block; font-size:1.9cqw; letter-spacing:.08em; text-transform:uppercase; color:var(--grass-text)}
.rn-banner strong{display:block; margin-top:.6cqw; font-family:var(--serif); font-weight:400; font-size:4.6cqw; line-height:1; color:var(--ink)}
.rn-banner-btn{display:inline-block; margin-top:1.8cqw; padding:1cqw 2.4cqw; border-radius:99px; background:var(--ink); color:#fff; font-size:1.9cqw}
.rn-sun{position:absolute; right:5cqw; top:50%; width:11cqw; height:11cqw; margin-top:-5.5cqw; border-radius:50%; background:radial-gradient(circle at 35% 35%,#FFF4C2,#F2D35A 60%,#E3B93C); box-shadow:0 0 0 2.4cqw rgba(255,255,255,.25), 0 0 0 5cqw rgba(255,255,255,.12); animation:rnFloat 6s ease-in-out infinite alternate}
.rn-shop{flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2cqw}
.rn-prod{display:flex; flex-direction:column; gap:.8cqw; min-height:0}
.rn-prod-img{flex:1; min-height:0; display:grid; place-items:center; border-radius:2cqw; background:#EEF2E6; transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.rn-prod--mug .rn-prod-img{background:#F4EEDC} .rn-prod--fern .rn-prod-img{background:#E6EEDD}
.rn-prod:hover .rn-prod-img{transform:translateY(-.6cqw)}
.rn-prod-img svg{width:62%; height:auto; max-height:100%}
.rn-prod-name{font-size:2.1cqw; color:var(--ink-soft); line-height:1.2}
.rn-prod-row{display:flex; align-items:center; justify-content:space-between; gap:1cqw}
.rn-prod-row b{font-weight:500; font-size:2.3cqw}
.rn-prod-add{border:0; padding:.8cqw 1.9cqw; border-radius:99px; background:var(--grass); color:var(--ink); font:500 1.9cqw var(--sans); cursor:pointer; transition:background .2s, transform .2s}
.rn-prod-add:hover{background:var(--grass-deep); color:#fff}
.rn-prod-add:active{transform:scale(.94)}
.rn-flyer{position:fixed; z-index:30; pointer-events:none; width:44px; height:44px}
.rn-scan{position:absolute; left:0; right:0; top:0; height:30%; background:linear-gradient(180deg,rgba(194,208,108,0),rgba(194,208,108,.35) 85%,rgba(126,148,64,.9) 100%); transform:translateY(-110%); opacity:0; pointer-events:none}
.rn-win.scanning .rn-scan{animation:rnScan 1.8s cubic-bezier(.5,0,.4,1) 1}
@keyframes rnScan{0%{transform:translateY(-110%); opacity:1} 90%{opacity:1} 100%{transform:translateY(360%); opacity:0}}
.rn-win.fresh{animation:rnFresh 1s ease-out}
@keyframes rnFresh{0%{box-shadow:0 4cqw 9cqw rgba(35,57,43,.16), 0 0 0 0 rgba(194,208,108,.8)} 100%{box-shadow:0 4cqw 9cqw rgba(35,57,43,.16), 0 0 0 4cqw rgba(194,208,108,0)}}

/* Care check card, overlapping the window bottom left */
.rn-check{left:-3%; bottom:-1%; width:36%; padding:2.6cqw; border-radius:3cqw; background:var(--ink); color:#EEF3EA; box-shadow:0 4cqw 8cqw rgba(35,57,43,.28); --d:2.2}
.rn-check-head{display:flex; align-items:baseline; justify-content:space-between; gap:1cqw; margin-bottom:1.4cqw}
.rn-check-head strong{font-family:var(--serif); font-weight:400; font-size:3.6cqw}
.rn-check-head span{font-size:1.8cqw; color:rgba(238,243,234,.6)}
.rn-check ul{list-style:none; margin:0; padding:0}
.rn-check li{display:flex; align-items:center; gap:1.2cqw; padding:1.1cqw 0; font-size:2cqw; border-top:1px solid rgba(238,243,234,.09)}
.rn-check li span{flex:1; color:rgba(238,243,234,.75)}
.rn-check li b{font-weight:400}
.rn-check li i{position:relative; flex:0 0 2.4cqw; width:2.4cqw; height:2.4cqw; border-radius:50%; background:var(--grass)}
.rn-check li i::after{content:""; position:absolute; left:32%; top:22%; width:26%; height:44%; border:solid var(--ink); border-width:0 .45cqw .45cqw 0; transform:rotate(45deg)}
.rn-check li.warn i{background:#F2D35A} .rn-check li.warn i::after{border:0; left:44%; top:20%; width:12%; height:36%; background:var(--ink); border-radius:2px; transform:none; box-shadow:0 .9cqw 0 -.05cqw var(--ink)}
.rn-check li.busy i{background:transparent; border:.4cqw solid rgba(238,243,234,.2); border-top-color:var(--grass); animation:rnSpin .7s linear infinite}
.rn-check li.busy i::after{display:none}
.rn-check li.done b{color:var(--grass)}
@keyframes rnSpin{to{transform:rotate(360deg)}}
.rn-check-btn{width:100%; margin-top:1.8cqw; border:0; padding:1.6cqw; border-radius:99px; background:var(--grass); color:var(--ink); font:500 2.2cqw var(--sans); cursor:pointer; transition:background .2s}
.rn-check-btn:hover{background:#D3DE86}
.rn-check-btn:disabled{opacity:.6; cursor:progress}

/* Speed ring, top right */
.rn-speed{right:-4%; top:17%; width:19%; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 3cqw 7cqw rgba(35,57,43,.14); display:grid; place-items:center; --d:3}
.rn-speed svg{position:absolute; inset:8%; width:84%; height:84%; transform:rotate(-90deg)}
.rn-speed-bg{fill:none; stroke:rgba(35,57,43,.08); stroke-width:6}
.rn-speed-ring{fill:none; stroke:#E3B93C; stroke-width:6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:65; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1), stroke 1s}
.rn-speed.fast .rn-speed-ring{stroke:var(--grass-deep); stroke-dashoffset:12}
.rn-speed div{position:relative; text-align:center; line-height:1}
.rn-speed strong{display:block; font-family:var(--serif); font-weight:400; font-size:5cqw}
.rn-speed span{font-size:1.7cqw; color:var(--ink-soft)}

/* Order notification, slides in when someone buys */
.rn-order{right:0; bottom:17%; display:flex; align-items:center; gap:1.8cqw; padding:1.8cqw 2.6cqw 1.8cqw 1.8cqw; border-radius:99px; background:#fff; box-shadow:0 3cqw 7cqw rgba(35,57,43,.16); --d:2.6; opacity:0; translate:0 2cqw; scale:.94; transition:opacity .45s, translate .6s cubic-bezier(.2,.9,.3,1.3), scale .6s cubic-bezier(.2,.9,.3,1.3), transform .9s cubic-bezier(.2,.7,.2,1)}
.rn-order.on{opacity:1; translate:0 0; scale:1}
.rn-order-ico{display:grid; place-items:center; width:5.4cqw; height:5.4cqw; border-radius:50%; background:var(--grass); color:var(--ink)}
.rn-order-ico svg{width:3cqw; height:3cqw}
.rn-order strong{display:block; font-weight:500; font-size:2.3cqw}
.rn-order small{display:block; font-size:1.9cqw; color:var(--ink-soft)}

/* Small chips at different depths */
.rn-chip{display:flex; align-items:center; gap:1.2cqw; padding:1.2cqw 2.2cqw; border-radius:99px; background:rgba(255,255,255,.85); box-shadow:0 2cqw 5cqw rgba(35,57,43,.1); font-size:2cqw; white-space:nowrap}
.rn-chip i{width:1.5cqw; height:1.5cqw; border-radius:50%; background:var(--grass-deep); animation:rnBlink 2.4s ease-in-out infinite}
.rn-chip--ssl{left:2%; top:28%; --d:3.4}
.rn-chip--up{right:8%; bottom:3%; --d:1.8}

@media (max-width:980px){
  .rn-hero{height:auto; min-height:0}
  .rn-hero-in{grid-template-columns:minmax(0,1fr); padding-top:110px; padding-bottom:48px; gap:44px}
  .rn-stage{justify-self:center; width:min(100%,560px)}
  .rn-hero .no{font-size:clamp(18px,1.7vw,25px); white-space:nowrap}
.rn-hero .big{font-size:clamp(96px,24vw,170px)}
}

@keyframes rnFloat{from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(-10px) rotate(.5deg)}}
@keyframes rnBlink{0%,100%{opacity:1} 50%{opacity:.45}}

/* Ticker band */
.rn-ticker{position:relative; z-index:3; flex:0 0 auto; overflow:hidden; background:var(--ink); color:#EEF3EA; padding:16px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rn-ticker-track{display:flex; align-items:center; gap:26px; width:max-content; animation:rnTick 46s linear infinite; font-family:var(--serif); font-size:26px; white-space:nowrap}
.rn-ticker i{font-style:normal; color:var(--grass); font-size:16px}
@keyframes rnTick{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Bento */
.rn-bento-sec{background:var(--air)}
.rn-split-head{display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:start}
.rn-split-head .kicker{padding-top:16px}
.rn-split-head h2{max-width:16ch}
.rn-bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:18px; margin-top:60px}
.rn-tile{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:26px; border-radius:28px; background:rgba(255,255,255,.62); border:1px solid rgba(35,57,43,.07); color:var(--ink); text-decoration:none; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.rn-tile:hover{box-shadow:0 26px 60px rgba(35,57,43,.12)}
.rn-tile-kicker{display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grass-text); margin-bottom:6px}
.rn-tile strong{display:block; font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.05}
.rn-tile p{margin-top:8px; font-size:15px; color:var(--ink-soft); max-width:34ch}
.rn-tile--wp{grid-column:span 4; grid-row:span 2; background:linear-gradient(150deg,#FBFCF6 0%,#E9F0DE 100%)}
.rn-tile--woo{grid-column:span 2; grid-row:span 2; background:linear-gradient(170deg,#F7F3E4,#EEE6CB)}
.rn-tile--host{grid-column:span 2; grid-row:span 2; background:var(--ink); color:#EEF3EA}
.rn-tile--host p{color:rgba(238,243,234,.72)} .rn-tile--host .rn-tile-kicker{color:var(--grass)}
.rn-tile--dom{grid-column:span 4}
.rn-tile--mail, .rn-tile--ssl{grid-column:span 2}
.rn-tile--hours{grid-column:span 3; background:linear-gradient(150deg,#FBF6E2,#F2E6B9)}
.rn-tile--call{grid-column:span 3}
.rn-tile--wp strong{font-size:clamp(34px,3.6vw,48px)}
@media (max-width:1000px){ .rn-bento{grid-template-columns:repeat(2,minmax(0,1fr))} .rn-tile{grid-column:span 1 !important; grid-row:auto !important} .rn-tile--wp{grid-column:span 2 !important} .rn-split-head{grid-template-columns:minmax(0,1fr)} .rn-split-head .kicker{padding-top:0} }
@media (max-width:560px){ .rn-bento{grid-template-columns:minmax(0,1fr)} .rn-tile--wp{grid-column:span 1 !important} }

/* Tile art: updates ticking through */
.rn-art--updates{display:flex; flex-direction:column; gap:12px; max-width:440px}
.rn-upd{display:grid; grid-template-columns:140px minmax(0,1fr); align-items:center; gap:14px; font-size:14px; color:var(--ink-soft)}
.rn-upd i{position:relative; height:8px; border-radius:99px; background:rgba(35,57,43,.08); overflow:hidden}
.rn-upd i::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,var(--grass),var(--grass-deep)); transform-origin:left; transform:scaleX(0); animation:rnUpd 6s cubic-bezier(.4,0,.2,1) infinite; animation-delay:var(--d)}
@keyframes rnUpd{0%{transform:scaleX(0)} 30%,80%{transform:scaleX(1)} 92%,100%{transform:scaleX(1); opacity:0}}
/* Cart rolling to a confirmed order */
.rn-art--cart svg{width:100%; max-width:240px; color:var(--ink)}
.rn-road{stroke:rgba(35,57,43,.2); stroke-width:2; stroke-dasharray:6 8; fill:none}
.rn-cart{animation:rnRoll 5s cubic-bezier(.5,0,.3,1) infinite}
.rn-cart circle{fill:var(--ink)}
.rn-box{fill:var(--grass); animation:rnDrop 5s ease-out infinite}
.rn-box--2{fill:var(--zest); animation-delay:.25s}
.rn-ding circle{fill:var(--grass-deep)}
.rn-ding{transform-box:fill-box; transform-origin:center; animation:rnDing 5s ease-out infinite}
@keyframes rnRoll{0%{transform:translateX(-40px)} 55%,100%{transform:translateX(70px)}}
@keyframes rnDrop{0%,10%{transform:translateY(-40px); opacity:0} 25%,100%{transform:translateY(0); opacity:1}}
@keyframes rnDing{0%,55%{transform:scale(0); opacity:0} 65%{transform:scale(1.15); opacity:1} 75%,92%{transform:scale(1); opacity:1} 100%{opacity:0}}
/* Server rack */
.rn-art--rack{display:flex; flex-direction:column; gap:8px}
.rn-unit{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:rgba(238,243,234,.08); border:1px solid rgba(238,243,234,.1)}
.rn-unit i{width:7px; height:7px; border-radius:50%; background:var(--grass); animation:rnBlink 1.6s steps(2) infinite; animation-delay:var(--d)}
.rn-unit i:nth-child(2){background:#F2D35A; animation-duration:2.3s}
.rn-unit span{flex:1; height:4px; margin-left:8px; border-radius:4px; background:repeating-linear-gradient(90deg,rgba(238,243,234,.25) 0 6px,transparent 6px 10px)}
/* Domain being typed */
.rn-art--type{display:flex; align-items:center; font-family:var(--serif); font-size:clamp(30px,3.4vw,44px); color:var(--ink)}
.rn-caret{display:inline-block; width:2px; height:1em; margin-left:4px; background:var(--grass-deep); animation:rnBlink 1s steps(2) infinite}
/* Mail flying in */
.rn-art--mail svg{width:150px}
.rn-env rect{fill:#fff; stroke:var(--ink); stroke-width:2.6}
.rn-env{animation:rnFly 4.5s cubic-bezier(.3,.7,.2,1) infinite}
.rn-trail{fill:none; stroke:var(--grass); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:4 7; animation:rnFade 4.5s ease-out infinite}
@keyframes rnFly{0%{transform:translate(-30px,18px) rotate(-10deg); opacity:0} 25%{opacity:1} 50%,100%{transform:translate(0,0) rotate(0)}}
@keyframes rnFade{0%,20%{opacity:0} 40%{opacity:1} 70%,100%{opacity:0}}
/* Padlock closing */
.rn-art--lock svg{width:80px}
.rn-art--lock rect{fill:var(--grass-deep)}
.rn-shackle{color:var(--ink); animation:rnLock 4s ease-in-out infinite}
@keyframes rnLock{0%,25%{transform:translateY(-10px)} 40%,85%{transform:translateY(0)} 100%{transform:translateY(-10px)}}
/* Quarter hours filling */
.rn-art--quarters{display:flex; gap:10px}
.rn-art--quarters svg{width:46px; height:46px}
.rn-q-bg{fill:rgba(35,57,43,.08)}
.rn-q{fill:var(--grass-deep); transform-origin:20px 20px; animation:rnQuarter 4.8s steps(1) infinite; animation-delay:var(--d); opacity:0}
.rn-art--quarters svg:nth-child(2) .rn-q{transform:rotate(90deg)} .rn-art--quarters svg:nth-child(3) .rn-q{transform:rotate(180deg)} .rn-art--quarters svg:nth-child(4) .rn-q{transform:rotate(270deg)}
@keyframes rnQuarter{0%{opacity:0} 12%,85%{opacity:1} 100%{opacity:0}}
/* Phone ringing */
.rn-art--phone svg{width:86px}
.rn-handset{fill:var(--ink); transform-box:fill-box; transform-origin:center; animation:rnRingPhone 3s ease-in-out infinite}
.rn-ring{fill:none; stroke:var(--grass-deep); stroke-width:4; stroke-linecap:round; animation:rnRings 3s ease-out infinite}
.rn-ring--2{animation-delay:.2s}
@keyframes rnRingPhone{0%,40%,100%{transform:rotate(0)} 5%,15%,25%{transform:rotate(-9deg)} 10%,20%,30%{transform:rotate(9deg)}}
@keyframes rnRings{0%,5%{opacity:0} 15%,35%{opacity:1} 50%,100%{opacity:0}}

/* Care: a week beside the plans */
.rn-care{background:linear-gradient(180deg,#F7F9F3,var(--air-2))}
.rn-care-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:72px; align-items:start}
.rn-week{list-style:none; margin:40px 0 0; padding:0; position:relative}
.rn-week::before{content:""; position:absolute; left:23px; top:30px; bottom:30px; width:2px; background:linear-gradient(180deg,var(--zest),var(--grass),var(--grass-deep))}
.rn-week li{position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; padding:14px 0; align-items:start}
.rn-week-ico{position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 2px var(--grass-deep), 0 8px 20px rgba(35,57,43,.1); color:var(--grass-deep)}
.rn-week-ico svg{width:22px; height:22px}
.rn-week li > div{padding-top:3px}
.rn-week h3{font-size:24px; line-height:1.15}
.rn-week p{font-size:15px; color:var(--ink-soft); margin-top:4px}
.fx .rn-week[data-reveal] li{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * .12s)}
.fx .rn-week.in li{opacity:1; transform:none}
.rn-care-plans{display:grid; gap:18px; position:sticky; top:100px}
.rn-plan{position:relative; padding:30px; border-radius:28px; background:rgba(255,255,255,.7); border:1px solid rgba(35,57,43,.08)}
.rn-plan.is-top{background:var(--ink); color:#EEF3EA; border-color:transparent; box-shadow:0 30px 70px rgba(35,57,43,.22)}
.rn-plan.is-top .rn-plan-line, .rn-plan.is-top .rn-price span{color:rgba(238,243,234,.7)}
.rn-plan.is-top .rn-list svg{color:var(--grass)}
.rn-plan h3{font-size:34px; line-height:1}
.rn-plan-line{margin-top:8px; font-size:15px; color:var(--ink-soft)}
.rn-flag{position:absolute; top:22px; right:22px; padding:6px 12px; border-radius:999px; background:var(--grass); color:var(--ink); font-size:12.5px; font-weight:500}
.rn-flag--soon{background:#F2D35A}
.rn-price{display:flex; align-items:baseline; gap:10px; margin:22px 0 4px}
.rn-price strong{font-family:var(--serif); font-weight:400; font-size:60px; line-height:1; font-variant-numeric:lining-nums}
.rn-price span{font-size:14px; color:var(--ink-soft)}
.rn-price--sm strong{font-size:40px}
.rn-list{list-style:none; margin:18px 0 24px; padding:0; display:grid; gap:9px; font-size:15px}
.rn-list li{display:flex; gap:10px; align-items:flex-start}
.rn-list svg{flex:0 0 18px; width:18px; height:18px; margin-top:3px; color:var(--grass-deep)}
.rn-plan.is-top .btn{background:var(--grass)}
@media (max-width:960px){ .rn-care-grid{grid-template-columns:minmax(0,1fr); gap:44px} .rn-care-plans{position:static} }

/* Hosting */
.rn-hosting{background:var(--air)}
.rn-host-top{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:end}
.rn-tabs{margin-top:28px}
.rn-tabs small{font-size:11px; padding:2px 7px; border-radius:99px; background:#F2D35A; margin-left:4px}
.rn-gauge{position:relative; justify-self:end; width:300px; padding-bottom:64px}
.rn-gauge svg{width:100%; color:var(--ink)}
.rn-gauge-bg{fill:none; stroke:rgba(35,57,43,.1); stroke-width:14; stroke-linecap:round}
.rn-gauge-fill{fill:none; stroke:url(#none); stroke:var(--grass-deep); stroke-width:14; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.rn-needle{transform-box:view-box; transform-origin:110px 120px; transform:rotate(-90deg); transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.rn-needle circle{fill:var(--ink)}
.rn-gauge.on .rn-gauge-fill{stroke-dashoffset:22}
.rn-gauge.on .rn-needle{transform:rotate(52deg)}
.rn-gauge-num{position:absolute; left:0; right:0; bottom:0; text-align:center}
.rn-gauge-num strong{font-family:var(--serif); font-weight:400; font-size:44px; line-height:1}
.rn-gauge-num span{display:block; font-size:13px; color:var(--ink-soft)}
.rn-host-plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:52px}
.rn-host-plans[hidden]{display:none}
.rn-hplan{position:relative; padding:26px 22px; border-radius:24px; background:rgba(255,255,255,.66); border:1px solid rgba(35,57,43,.08); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.rn-hplan:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(35,57,43,.1)}
.rn-hplan.is-top{background:linear-gradient(170deg,#FBFCF6,#E5EDD7); border-color:rgba(126,148,64,.35)}
.rn-hplan.is-soon{opacity:.8}
.rn-hplan h3{font-size:32px; line-height:1}
.rn-hplan-sites{display:block; margin-top:6px; font-size:14px; color:var(--grass-text)}
.rn-hplan .rn-price strong{font-size:46px}
.rn-hplan .btn{width:100%}
.rn-hplan .rn-flag{top:18px; right:16px}
@media (max-width:1000px){ .rn-host-plans{grid-template-columns:repeat(2,minmax(0,1fr))} .rn-host-top{grid-template-columns:minmax(0,1fr)} .rn-gauge{justify-self:start} }
@media (max-width:560px){ .rn-host-plans{grid-template-columns:minmax(0,1fr)} }

/* Specifications table under the plans */
.rn-spec{position:relative; margin-top:28px; border-radius:28px; background:rgba(255,255,255,.66); border:1px solid rgba(35,57,43,.08)}
.rn-spec[hidden]{display:none}
.rn-spec table{width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:15px}
.rn-spec col.rn-col-label{width:30%}
.rn-spec col.is-top{background:rgba(194,208,108,.13)}
.rn-spec thead th{position:sticky; top:68px; z-index:2; padding:26px 16px 18px; text-align:center; vertical-align:bottom; background:rgba(251,252,248,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom:1px solid rgba(35,57,43,.1)}
.rn-spec thead th:first-child{text-align:left; padding-left:28px; font-family:var(--serif); font-weight:400; font-size:30px; line-height:1; border-top-left-radius:28px}
.rn-spec thead th:last-child{border-top-right-radius:28px}
.rn-spec thead th.is-top{background:rgba(236,241,214,.96); box-shadow:inset 0 3px 0 var(--grass-deep)}
.rn-spec-k{display:block; margin-bottom:8px; font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grass-text)}
.rn-spec thead strong{display:block; font-family:var(--serif); font-weight:400; font-size:28px; line-height:1}
.rn-spec thead span{display:block; margin-top:6px; font-size:13.5px; font-weight:400; color:var(--ink-soft)}
.rn-spec-group th{padding:30px 28px 10px; text-align:left; font-family:var(--serif); font-style:italic; font-weight:400; font-size:23px; color:var(--grass-deep)}
.rn-spec tbody tr:not(.rn-spec-group) th, .rn-spec tbody td{padding:13px 16px; border-top:1px solid rgba(35,57,43,.07)}
.rn-spec tbody tr:not(.rn-spec-group) th{padding-left:28px; text-align:left; font-weight:500}
.rn-spec tbody th small{display:block; margin-top:2px; font-size:13px; font-weight:400; line-height:1.4; color:var(--ink-soft)}
.rn-spec tbody td{text-align:center; color:var(--ink)}
.rn-spec tbody tr:not(.rn-spec-group):hover > *{background:rgba(238,243,234,.7)}
.rn-spec td svg{width:22px; height:22px; vertical-align:middle}
.rn-spec td svg circle{fill:var(--grass)} .rn-spec td svg path{stroke:var(--ink)}
.rn-no{color:rgba(35,57,43,.3)}
.rn-spec.is-collapsed tbody.more{display:none}
.rn-spec.is-collapsed tbody:nth-of-type(2) tr:last-child > *{padding-bottom:26px}
.rn-spec-more{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:18px; border:0; border-top:1px solid rgba(35,57,43,.08); border-radius:0 0 28px 28px; background:transparent; color:var(--ink); font:500 15px var(--sans); cursor:pointer}
.rn-spec-more:hover{background:rgba(238,243,234,.7)}
.rn-spec-more svg{width:18px; height:18px; transition:transform .3s}
.rn-spec-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.rn-spec-pick{display:none}
@media (max-width:860px){
  .rn-spec thead th{position:static}
  .rn-spec-pick{display:flex; gap:6px; padding:16px 16px 0; flex-wrap:wrap}
  .rn-spec-pick button{flex:1; border:0; padding:10px 6px; border-radius:99px; background:var(--air); color:var(--ink); font:400 18px var(--serif); cursor:pointer}
  .rn-spec-pick button[aria-pressed="true"]{background:var(--grass)}
  .rn-spec table{table-layout:auto; font-size:14px}
  .rn-spec col{width:auto !important; background:none !important}
  .rn-spec[data-show="2"] :is(thead th, tbody td):not(:nth-child(1)):not(:nth-child(2)),
  .rn-spec[data-show="3"] :is(thead th, tbody td):not(:nth-child(1)):not(:nth-child(3)),
  .rn-spec[data-show="4"] :is(thead th, tbody td):not(:nth-child(1)):not(:nth-child(4)),
  .rn-spec[data-show="5"] :is(thead th, tbody td):not(:nth-child(1)):not(:nth-child(5)){display:none}
  .rn-spec thead th:first-child{font-size:22px; padding-left:18px; border-top-left-radius:0}
  .rn-spec thead th:last-child{border-top-right-radius:0}
  .rn-spec thead th.is-top{box-shadow:none}
  .rn-spec tbody td, .rn-spec thead th:not(:first-child){width:42%}
  .rn-spec-group th{padding:24px 18px 8px; font-size:21px}
  .rn-spec tbody tr:not(.rn-spec-group) th{padding-left:18px}
  .rn-spec tbody tr:not(.rn-spec-group) th, .rn-spec tbody td{padding:11px 12px}
}


/* Domains and extras */
.rn-domains{background:linear-gradient(180deg,var(--air),#F7F9F3)}
.rn-dom-card{position:relative; padding:clamp(32px,5vw,64px); border-radius:36px; background:var(--ink); color:#EEF3EA; overflow:hidden}
.rn-dom-card::after{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(194,208,108,.35),rgba(194,208,108,0) 70%); animation:rnFloat 9s ease-in-out infinite alternate; pointer-events:none}
.rn-dom-card .kicker{color:var(--grass)}
.rn-search{position:relative; z-index:1; display:flex; gap:10px; margin-top:30px; max-width:640px; padding:8px; border-radius:999px; background:rgba(238,243,234,.1); border:1px solid rgba(238,243,234,.18)}
.rn-search input{flex:1; min-width:0; border:0; background:transparent; color:#fff; font:400 20px var(--sans); padding:0 18px; outline:none}
.rn-search input::placeholder{color:rgba(238,243,234,.5)}
.rn-search-out{position:relative; z-index:1; margin-top:14px; min-height:1.6em; font-size:15px; color:var(--grass)}
.rn-tlds{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.rn-tld{display:flex; flex-direction:column; padding:12px 18px; border-radius:16px; background:rgba(238,243,234,.07); border:1px solid rgba(238,243,234,.12); font-size:13px; color:rgba(238,243,234,.7)}
.rn-tld strong{font-family:var(--serif); font-weight:400; font-size:26px; color:#fff}
.rn-extra-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px}
.rn-extra{padding:30px; border-radius:28px; background:rgba(255,255,255,.66); border:1px solid rgba(35,57,43,.08)}
.rn-extra h3{font-size:32px}
.rn-extra p{margin-top:10px; color:var(--ink-soft); font-size:15.5px; max-width:44ch}
@media (max-width:760px){ .rn-extra-grid{grid-template-columns:minmax(0,1fr)} }

/* Add-ons: a sticky total beside a list of switches */
.rn-addons{background:var(--air)}
.rn-addons-grid{display:grid; grid-template-columns:330px minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:start}
.rn-addons-side{position:sticky; top:100px}
.rn-how{margin-top:30px; padding:26px; border-radius:26px; background:var(--ink); color:#EEF3EA; box-shadow:0 26px 60px rgba(35,57,43,.2)}
.rn-how-k{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grass)}
.rn-how ol{list-style:none; margin:16px 0 22px; padding:0; display:grid; gap:14px}
.rn-how li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:start}
.rn-how li > span{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(238,243,234,.1); font-family:var(--serif); font-size:17px; color:var(--grass)}
.rn-how strong{display:block; font-weight:500; font-size:15.5px}
.rn-how small{display:block; margin-top:2px; font-size:13.5px; color:rgba(238,243,234,.65)}
.rn-how .btn{width:100%; background:var(--grass)}
.rn-how .rn-small{color:rgba(238,243,234,.55)}
.rn-filter{margin:0 0 22px}
.rn-addon-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.rn-addon{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:14px; row-gap:10px; align-items:start; padding:18px; border-radius:22px; background:rgba(255,255,255,.66); border:1px solid rgba(35,57,43,.07); transition:border-color .25s, background .25s, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.rn-addon:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(35,57,43,.08)}
.rn-addon[hidden]{display:none}
.rn-addon-ico{grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--air); color:var(--grass-deep); transition:background .25s, color .25s}
.rn-addon-ico svg{width:22px; height:22px}
.rn-addon-text{grid-column:2 / 4}
.rn-addon-text strong{display:block; font-weight:500; font-size:16px; line-height:1.25}
.rn-addon-text small{display:block; margin-top:3px; font-size:13.5px; line-height:1.45; color:var(--ink-soft)}
.rn-addon-price{grid-column:2; display:flex; align-items:baseline; gap:6px}
.rn-addon-price strong{font-family:var(--serif); font-weight:400; font-size:26px; line-height:1}
.rn-addon-price small{font-size:12.5px; color:var(--ink-soft)}
@media (max-width:1100px){ .rn-addon-list{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){ .rn-addons-grid{grid-template-columns:minmax(0,1fr)} .rn-addons-side{position:static} }
.rn-filter{display:flex; flex-wrap:wrap; gap:8px}
.rn-filter button{font-size:19px; padding:10px 18px 9px}

/* Hours: tokens and calculator */
.rn-hours{background:#F7F9F3}
.rn-hours-grid{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:64px; align-items:start}
.rn-steps{list-style:none; margin:36px 0 0; padding:0; display:grid; gap:20px}
.rn-steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px}
.rn-steps li > span{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--grass); font-family:var(--serif); font-size:22px}
.rn-steps h3{font-size:26px; line-height:1.1}
.rn-steps p{font-size:15px; color:var(--ink-soft); margin-top:4px}
.rn-calc{padding:30px; border-radius:32px; background:rgba(255,255,255,.75); border:1px solid rgba(35,57,43,.08); box-shadow:0 24px 60px rgba(35,57,43,.08)}
.rn-tokens{display:flex; flex-wrap:wrap; gap:6px; min-height:58px; margin-bottom:18px}
.rn-token{width:22px; height:22px; border-radius:50%; background:conic-gradient(var(--grass-deep) 0 90deg, rgba(35,57,43,.1) 90deg 360deg); animation:rnPop .4s cubic-bezier(.2,.9,.3,1.3) both}
.rn-token.hour{background:var(--grass-deep)}
@keyframes rnPop{from{transform:scale(0)} to{transform:scale(1)}}
.rn-calc-top{display:flex; justify-content:space-between; align-items:baseline}
.rn-calc-top span{font-size:14px; color:var(--ink-soft)}
.rn-calc-top strong{font-family:var(--serif); font-weight:400; font-size:34px}
.rn-calc input[type=range]{width:100%; margin:18px 0 6px; accent-color:var(--grass-deep)}
.rn-calc-ticks{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft)}
.rn-calc-out{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:22px}
.rn-calc-out div{padding:12px; border-radius:16px; background:var(--air)}
.rn-calc-out span{display:block; font-size:12px; color:var(--ink-soft)}
.rn-calc-out strong{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.1}
.rn-calc-save{margin:12px 0 16px; font-size:14px; color:var(--grass-text); min-height:1.4em}
.rn-calc .btn{width:100%}
@media (max-width:960px){ .rn-hours-grid{grid-template-columns:minmax(0,1fr); gap:40px} }

/* Call back */
.rn-callback{background:var(--air)}
.rn-cb-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start}
.rn-me{display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.6); font-size:14px; color:var(--ink-soft)}
.rn-me-dot{width:9px; height:9px; border-radius:50%; background:var(--grass-deep); box-shadow:0 0 0 0 rgba(126,148,64,.5); animation:rnPulse 2s ease-out infinite}
@keyframes rnPulse{0%{box-shadow:0 0 0 0 rgba(126,148,64,.45)} 100%{box-shadow:0 0 0 12px rgba(126,148,64,0)}}
.rn-cb{padding:30px; border-radius:32px; background:rgba(255,255,255,.72); border:1px solid rgba(35,57,43,.08)}
.rn-cb-label{font-size:14px; color:var(--ink-soft); margin:4px 0 10px}
.rn-cb-label small{opacity:.8}
.rn-days{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:18px}
.rn-day{display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border:0; border-radius:16px; background:var(--air); color:var(--ink); font:inherit; cursor:pointer; transition:background .2s, transform .2s}
.rn-day small{font-size:12px; color:var(--ink-soft)}
.rn-day strong{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1}
.rn-day[aria-pressed="true"]{background:var(--grass); transform:translateY(-3px)}
.rn-times{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.rn-time{border:0; padding:10px 16px; border-radius:999px; background:var(--air); color:var(--ink); font:500 14.5px var(--sans); cursor:pointer}
.rn-time[aria-pressed="true"]{background:var(--grass)}
.rn-time:disabled{opacity:.35; text-decoration:line-through; cursor:not-allowed}
.rn-cb-fields{margin-bottom:20px}
.rn-cb-fields label{font-size:14px}
@media (max-width:960px){ .rn-cb-grid{grid-template-columns:minmax(0,1fr); gap:36px} }
@media (max-width:480px){ .rn-days{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Footer: the network again, faint */
.rn-foot{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--air-2),#D9E4CF); padding-bottom:160px}
.rn-foot-net{position:absolute; left:0; right:0; bottom:0; width:100%; height:220px; pointer-events:none; opacity:.85}

/* Toast and pincode */
.rn-toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 24px); z-index:40; transform:translate(-50%,20px); padding:12px 22px; border-radius:999px; background:var(--ink); color:#fff; font-size:15px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s}
.rn-toast.on{opacity:1; transform:translate(-50%,0)}
.rn-pin{min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(120% 70% at 80% 0%, #FBFCF6 0%, rgba(251,252,246,0) 60%), linear-gradient(180deg,#F6F8F0,var(--air-2))}
.rn-pin-card{display:flex; flex-direction:column; align-items:center; gap:18px; width:min(360px,100%); padding:40px 30px; border-radius:28px; background:rgba(255,255,255,.75); border:1px solid rgba(35,57,43,.08); text-align:center}
.rn-pin-card p{color:var(--ink-soft); font-size:15px}
.rn-pin-card input{width:160px; text-align:center; font:500 28px/1 var(--sans); letter-spacing:.4em; padding:14px 10px; border-radius:16px; border:1px solid rgba(35,57,43,.2); background:#fff}
.rn-pin-err{color:#9B3B2E !important}
.rn .lang-btn{cursor:default}

@media (prefers-reduced-motion: reduce){
  .rn *{animation:none !important; transition:none !important}
  .fx .rn-week[data-reveal] li{opacity:1; transform:none}
}

/* Six menu items: use the phone menu below 900px rather than wrapping */
@media (min-width:641px) and (max-width:900px){
  .rn header nav > a:not(.acc-btn){display:none}
  .rn header nav{gap:0}
  .rn .menu-btn{display:inline-block}
  .rn .mnav{display:flex}
}

/* Live site bits: language link, form notes, bot trap */
.rn-lang{text-decoration:none; color:inherit; display:inline-flex; align-items:center}
.rn .lang-btn{cursor:pointer}
.rn-form-note{min-height:1.4em; margin:12px 0 0; font-size:14.5px; color:var(--grass-text)}
.contact .row-end .rn-form-note{margin:0 auto 0 0}
.rn-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-head a{color:var(--grass-text)}
.rn-404{min-height:100vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:22px; max-width:1180px; margin:0 auto; padding:40px 28px; background:none}
.rn-404 .big{font-size:clamp(110px,22vw,260px)}
body.rn{background:linear-gradient(180deg,#F6F8F0,var(--air))}
.rn-plan .rn-flag + h3{padding-right:120px}

/* Phones: the care plan label sits above the title, and the hero shop is stacked with readable text */
.rn-care-plans{grid-template-columns:minmax(0,1fr)}
@media (max-width:560px){
  .rn-plan .rn-flag{position:static; display:inline-block; margin-bottom:12px}
  .rn-plan .rn-flag + h3{padding-right:0}
  .rn-plan h3{font-size:30px; overflow-wrap:anywhere}

  .rn-stage{aspect-ratio:auto; width:100%; display:grid; gap:14px; perspective:none; container-type:normal}
  .rn-layer{transform:none !important}
  .rn-win{position:relative; left:auto; top:auto; width:100%; height:auto; border-radius:20px}
  .rn-win-bar{height:40px; gap:10px; padding:0 12px}
  .rn-win-dots{gap:5px} .rn-win-dots i{width:8px; height:8px}
  .rn-url{height:26px; padding:0 10px; gap:6px; font-size:12px} .rn-url svg{width:12px; height:12px}
  .rn-win-cart, .rn-win-cart svg{width:22px; height:22px}
  .rn-win-cart b{min-width:15px; height:15px; padding:0 4px; font-size:10px; line-height:15px; top:-4px; right:-6px}
  .rn-win-body{gap:10px; padding:12px}
  .rn-banner{padding:14px 16px; border-radius:14px}
  .rn-banner-k{font-size:10px} .rn-banner strong{font-size:22px; margin-top:4px} .rn-banner-btn{margin-top:10px; padding:5px 12px; font-size:11px}
  .rn-sun{width:54px; height:54px; margin-top:-27px; right:18px; box-shadow:0 0 0 10px rgba(255,255,255,.25), 0 0 0 20px rgba(255,255,255,.12)}
  .rn-shop{flex:none; gap:8px}
  .rn-prod{gap:4px} .rn-prod-img{flex:none; height:78px; border-radius:12px}
  .rn-prod-name{font-size:12px} .rn-prod-row b{font-size:13px} .rn-prod-add{padding:5px 10px; font-size:12px}
  .rn-check{position:relative; left:auto; bottom:auto; width:100%; padding:18px; border-radius:20px}
  .rn-check-head{margin-bottom:8px} .rn-check-head strong{font-size:22px} .rn-check-head span{font-size:12px}
  .rn-check li{gap:10px; padding:9px 0; font-size:14px}
  .rn-check li i{flex-basis:16px; width:16px; height:16px}
  .rn-check li i::after{border-width:0 2px 2px 0}
  .rn-check li.warn i::after{box-shadow:0 5px 0 -.5px var(--ink)}
  .rn-check li.busy i{border-width:2px}
  .rn-check-btn{margin-top:12px; padding:12px; font-size:14px}
  .rn-speed{position:absolute; right:-6px; top:-14px; width:76px}
  .rn-speed strong{font-size:22px} .rn-speed span{font-size:9px}
  .rn-order{position:absolute; right:10px; top:52px; bottom:auto; gap:10px; padding:10px 16px 10px 10px}
  .rn-order-ico{width:30px; height:30px} .rn-order-ico svg{width:16px; height:16px}
  .rn-order strong{font-size:13px} .rn-order small{font-size:11.5px}
  .rn-chip{display:none}
}

/* Phones: the four small tiles two per row */
@media (max-width:560px){
  .rn-bento{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .rn-tile{grid-column:span 2 !important; padding:22px}
  .rn-tile--mail, .rn-tile--ssl, .rn-tile--hours, .rn-tile--call{grid-column:span 1 !important; padding:18px; gap:12px}
  .rn-tile--mail strong, .rn-tile--ssl strong, .rn-tile--hours strong, .rn-tile--call strong{font-size:22px}
  .rn-tile--hours p{display:none}
  .rn-art--mail svg{width:110px} .rn-art--lock svg, .rn-art--phone svg{width:60px}
  .rn-art--quarters{gap:5px} .rn-art--quarters svg{width:30px; height:30px}
}
@media (max-width:400px){ .rn-gauge{width:100%; max-width:300px} }

/* Credit calculator: one disc per 5 hours, and the key under it */
.rn-tokens{min-height:52px; margin-bottom:6px}
.rn-token{background:var(--grass-deep)}
.rn-token-key{display:flex; align-items:center; gap:6px; margin:0 0 16px; font-size:12.5px; color:var(--ink-soft)}
.rn-token-key .rn-token{width:12px; height:12px; animation:none}

/* Service pages (/wordpress-onderhoud …) */
.rn-sub{background:var(--air)}
.rn-svc-hero{position:relative; overflow:hidden; padding:clamp(120px,16vh,170px) 0 clamp(56px,8vh,90px); background:radial-gradient(120% 70% at 80% 0%, #FBFCF6 0%, rgba(251,252,246,0) 60%), linear-gradient(180deg,#F6F8F0 0%, var(--air) 100%)}
.rn-svc-hero-in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(32px,5vw,80px); align-items:end}
.rn-crumbs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; font-size:13.5px; color:var(--ink-soft)}
.rn-crumbs a{color:var(--grass-text); text-decoration:none}
.rn-svc-copy h1{margin-top:10px; font-family:var(--serif); font-weight:400; font-size:clamp(46px,7vw,92px); line-height:.95; letter-spacing:-.01em}
.rn-svc-lead{margin-top:24px; max-width:44ch; font-family:var(--serif); font-size:clamp(20px,2vw,25px); line-height:1.4}
.rn-svc-copy .hero-actions{margin-top:30px}
.rn-trust{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px; font-size:14px; color:var(--ink-soft)}
.rn-trust li{display:flex; align-items:center; gap:8px}
.rn-trust svg{color:var(--grass-deep)}
.rn-svc-price{padding:28px; border-radius:28px; background:var(--ink); color:#EEF3EA; box-shadow:0 30px 70px rgba(35,57,43,.22)}
.rn-svc-price-ico{display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:rgba(238,243,234,.08); color:var(--grass)}
.rn-svc-price-k{margin-top:18px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--grass)}
.rn-svc-price-v{margin-top:6px; font-family:var(--serif); font-size:64px; line-height:1}
.rn-svc-price-n{margin:8px 0 22px; font-size:14px; color:rgba(238,243,234,.7)}
.rn-svc-price .btn{width:100%; background:var(--grass)}
.rn-svc-price .rn-small{color:rgba(238,243,234,.5)}
.rn-svc-points{padding:0 0 clamp(56px,8vh,90px)}
.rn-points{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.rn-points li{padding:24px; border-radius:24px; background:rgba(255,255,255,.66); border:1px solid rgba(35,57,43,.07)}
.rn-point-t{margin-top:16px; font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.1}
.rn-points p{margin-top:8px; font-size:14.5px; color:var(--ink-soft)}
.rn-svc-body{padding:clamp(56px,8vh,100px) 0; background:#F7F9F3}
.rn-svc-sec{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,80px); padding:36px 0; border-top:1px solid rgba(35,57,43,.1)}
.rn-svc-sec:first-child{border-top:0; padding-top:0}
.rn-svc-sec h2{font-size:clamp(30px,3.4vw,44px); line-height:1.05}
.rn-svc-text p{font-size:17px; line-height:1.65; color:var(--ink)}
.rn-svc-text p + p{margin-top:14px}
.rn-svc-text .rn-list{margin-top:14px; font-size:16px}
.rn-related{padding:clamp(56px,8vh,90px) 0; background:var(--air)}
.rn-related-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px}
.rn-related-card{position:relative; display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:24px; background:rgba(255,255,255,.66); border:1px solid rgba(35,57,43,.07); color:var(--ink); text-decoration:none; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.rn-related-card:hover{transform:translateY(-4px); box-shadow:0 22px 50px rgba(35,57,43,.1)}
.rn-related-card strong{font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.1}
.rn-related-card small{font-size:14px; line-height:1.5; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.rn-related-go{position:absolute; top:24px; right:24px; font-size:20px; color:var(--grass-deep)}
@media (max-width:1000px){ .rn-points{grid-template-columns:repeat(2,minmax(0,1fr))} .rn-related-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){ .rn-svc-hero-in{grid-template-columns:minmax(0,1fr)} .rn-svc-sec{grid-template-columns:minmax(0,1fr); gap:14px} }
@media (max-width:560px){ .rn-points{grid-template-columns:minmax(0,1fr)} .rn-svc-copy h1{font-size:clamp(40px,12vw,56px); overflow-wrap:anywhere} }

/* Hire me: the kinds of work, as links */
.rn-jobs-k{margin-top:30px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grass-text)}
.rn-jobs{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.rn-jobs a{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid rgba(35,57,43,.1); color:var(--ink); font-size:14px; text-decoration:none; transition:background .2s, border-color .2s}
.rn-jobs a:hover{background:#fff; border-color:var(--grass-deep)}
.rn-jobs svg{color:var(--grass-deep)}
.rn-hours h2{white-space:normal}
.rn-svc-price-v.is-text{font-size:40px; line-height:1.05}

/* Footer: the brand on its own row, link columns as wide as their longest link */
.rn-foot .foot-brand{flex:1 1 100%; max-width:560px}
.rn-foot .foot-links{flex:1 1 100%; grid-template-columns:repeat(4,max-content); justify-content:space-between; gap:32px 48px}
.rn-foot .foot-links a{white-space:nowrap}
@media (max-width:1000px){ .rn-foot .foot-links{grid-template-columns:repeat(2,max-content); justify-content:start; column-gap:64px} }
@media (max-width:560px){
  .rn-foot .foot-links{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px}
  .rn-foot .foot-links > div:nth-child(-n+2){grid-column:1 / -1}
}
.rn-addons-side h2{white-space:nowrap; font-size:clamp(36px,3.5vw,54px)}
.rn-care-left h2{text-wrap:balance}

/* Headings on one line on desktop; no lonely last words in paragraphs */
.rn h1, .rn h2, .rn h3{text-wrap:balance}
.rn p, .rn li, .rn small{text-wrap:pretty}
.rn-hero .hero-line{max-width:28ch}
.rn-split-head h2{max-width:none}
@media (min-width:1100px){
  .rn-split-head h2{white-space:nowrap; font-size:clamp(34px,3.1vw,48px)}
  .rn-care-left h2{white-space:nowrap; font-size:clamp(36px,3.4vw,54px)}
}
.rn-check-head{flex-wrap:wrap; row-gap:2px}
.rn-check-head span{white-space:nowrap}
.rn .acc-btn{color:inherit}
.rn-svc-points{padding-top:clamp(40px,6vh,64px); background:var(--air)}
.rn-svc-hero{padding-bottom:clamp(48px,7vh,80px)}
.rn-points li{display:flex; flex-direction:column}
@media (min-width:1001px){ .rn-point-t{min-height:2.2em; display:flex; align-items:flex-end} }

/* Legal pages */
.rn-doc{padding:clamp(120px,15vh,160px) 0 clamp(64px,9vh,110px); background:linear-gradient(180deg,#F6F8F0,var(--air) 40%)}
.rn-doc-in{max-width:820px}
.rn-doc h1{font-family:var(--serif); font-weight:400; font-size:clamp(44px,6vw,72px); line-height:1}
.rn-doc-date{margin-top:14px; font-size:14px; color:var(--ink-soft)}
.rn-doc-intro{margin-top:26px; font-family:var(--serif); font-size:clamp(20px,2vw,24px); line-height:1.45}
.rn-doc section{margin-top:40px; padding-top:28px; border-top:1px solid rgba(35,57,43,.1)}
.rn-doc h2{font-size:clamp(26px,2.6vw,32px); line-height:1.15}
.rn-doc section p{margin-top:12px; font-size:16.5px; line-height:1.7}
.rn-doc .rn-list{margin-top:12px; font-size:16px}
.rn-doc-more{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:56px}
.rn-doc-more a{color:var(--grass-text); text-decoration:none; font-weight:500}