/* Website Rental v3 — "Here are the keys". Editorial, tactile, playful.
   Scoped to body.v3 so other pages keep v2 until this direction is approved. */
body.v3{--paper:#FFF7E8;--paper2:#FBEBD0;--ink:#0A1730;--coral:#FF5A36;--sun:#FFC53D;--mint:#3EE6B0;--sky:#BFE3FF;--serif:"Fraunces",Georgia,serif;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.09 0 0 0 0 0.19 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--ink)}
body.v3 .top{background:rgba(255,247,232,.9);border-bottom:2px solid var(--ink)}
body.v3 section{padding:64px 0}
.v3 .ser{font-family:var(--serif);font-style:italic;font-weight:600;text-transform:none;letter-spacing:-.01em}
.v3 .eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 13px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.v3 .eyebrow b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:0}
.v3 h2.big{font-size:clamp(38px,6.4vw,84px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;font-weight:900;margin:.25em 0 .4em}
.v3 .scribble{position:relative;white-space:nowrap}
.v3 .scribble svg{position:absolute;left:-4%;bottom:-.18em;width:108%;height:.42em;overflow:visible}
.v3 .tape{position:absolute;width:110px;height:30px;background:rgba(255,197,61,.75);transform:rotate(-8deg);box-shadow:0 2px 4px rgba(0,0,0,.08);z-index:3}
/* hero */
.keys-hero{padding:40px 0 30px!important;position:relative;overflow:hidden}
.keys-hero h1{font-size:clamp(54px,13vw,190px);line-height:.84;letter-spacing:-.045em;text-transform:uppercase;font-weight:900;color:var(--ink);margin:0}
.keys-hero h1 .l2{display:block;padding-left:8vw}
.keys-hero h1 .ser{font-size:.42em;letter-spacing:-.01em;display:inline-block;transform:translateY(-.55em);color:var(--coral)}
.hero-row{display:grid;gap:26px;align-items:end;margin-top:18px}
@media(min-width:900px){.hero-row{grid-template-columns:1.1fr .9fr}}
.hero-row .lead{font-size:21px;max-width:42ch}
.cta2{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.btn2{display:inline-flex;align-items:center;gap:10px;padding:16px 22px;border-radius:14px;border:2px solid var(--ink);font:800 18px/1 var(--head);text-decoration:none;color:var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn2:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.btn2:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn2.hot{background:var(--coral);color:#fff}.btn2.sun{background:var(--sun)}
.btn2 small{font:600 13px var(--body);opacity:.85}
.keycard{position:absolute;right:3vw;top:30px;width:min(30vw,300px);transform:rotate(7deg);background:#fff;padding:10px 10px 14px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);z-index:2}
.keycard img{display:block;width:100%;height:auto}
.keycard p{margin:8px 2px 0;font:600 italic 17px var(--serif);text-align:center}
@media(max-width:899px){.keycard{position:relative;right:auto;top:auto;width:200px;margin:10px 0 0 auto}}
.stamp{display:inline-grid;place-items:center;width:118px;height:118px;border-radius:50%;background:var(--sun);border:3px dashed var(--ink);text-align:center;font:900 13px/1.05 var(--head);text-transform:uppercase;transform:rotate(-10deg)}
.stamp b{display:block;font-size:34px}
.popup{position:relative;margin-top:34px;border:2px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:10px 10px 0 var(--ink);background:#fff}
.popup img{display:block;width:100%;height:auto}
.popup figcaption{position:absolute;left:18px;bottom:18px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;font:600 italic 18px var(--serif)}
/* tilted ticker */
.v3 .ticker{transform:rotate(-1.5deg);margin:10px -10px;background:var(--ink);border-top:3px solid var(--coral);border-bottom:3px solid var(--sun)}
/* analogy */
.analogy{display:grid;gap:22px;align-items:center}
@media(min-width:900px){.analogy{grid-template-columns:.8fr 1.2fr}}
.analogy img{width:100%;max-width:440px;border-radius:20px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--mint);transform:rotate(-2deg)}
.trio{display:grid;gap:14px}
@media(min-width:700px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio div{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:18px;position:relative}
.trio h3{font-size:22px;margin:4px 0 6px}.trio p{font-size:16px;margin:0}
.trio .ic{font-size:30px}
/* programme */
.prog{list-style:none;margin:20px 0 0;padding:0;border-top:3px solid var(--ink)}
.prog li{display:grid;grid-template-columns:72px 1fr;gap:6px 18px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(10,23,48,.25);transition:background .2s}
@media(min-width:760px){.prog li{grid-template-columns:110px 1fr 220px}}
.prog li:hover{background:rgba(255,197,61,.18)}
.prog .n{font:900 clamp(40px,6vw,72px)/.9 var(--head);color:var(--coral);letter-spacing:-.04em}
.prog h3{font-size:clamp(22px,2.8vw,32px);margin:0}
.prog p{margin:4px 0 0;font-size:16px}
.prog .when{font:600 italic 19px var(--serif);text-align:left}
@media(min-width:760px){.prog .when{text-align:right}}
/* bookshelf */
.shelf{display:flex;gap:12px;height:520px;margin-top:22px;align-items:stretch}
.spine{position:relative;flex:0 0 96px;border:2px solid var(--ink);border-radius:14px;overflow:hidden;transition:flex .5s cubic-bezier(.2,.8,.2,1);box-shadow:6px 6px 0 var(--ink);display:flex}
.spine.open{flex:1 1 auto}
.spine>button{all:unset;cursor:pointer;flex:0 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 0;box-sizing:border-box}
.spine>button:focus-visible{outline:3px solid var(--coral);outline-offset:-6px}
.spine .vt{writing-mode:vertical-rl;transform:rotate(180deg);font:900 30px/1 var(--head);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.spine .vp{font:900 22px/1 var(--head)}
.spine .vs{writing-mode:vertical-rl;transform:rotate(180deg);font:600 italic 17px var(--serif);white-space:nowrap}
.spine .inside{flex:1;padding:22px 24px 22px 6px;opacity:0;transition:opacity .3s .15s;min-width:280px;display:flex;flex-direction:column}
.spine.open .inside{opacity:1}
.spine:not(.open) .inside{visibility:hidden}
.spine .inside .pr{font:900 64px/1 var(--head);letter-spacing:-.03em}.spine .inside .pr small{font:400 16px var(--body)}
.spine .inside ul{list-style:none;padding:0;margin:12px 0;flex:1}.spine .inside li{padding:6px 0 6px 26px;position:relative;border-bottom:1px dashed rgba(10,23,48,.25);font-size:16px}
.spine .inside li::before{content:"✶";position:absolute;left:2px;color:var(--coral)}
.spine.b{background:#F4C9A0}.spine.s{background:#DDE4EC}.spine.g{background:var(--sun)}
.spine .ribbon{position:absolute;top:14px;right:-38px;transform:rotate(35deg);background:var(--coral);color:#fff;font:900 12px/1 var(--head);text-transform:uppercase;letter-spacing:.08em;padding:7px 44px}
@media(max-width:820px){.shelf{flex-direction:column;height:auto}.spine{flex:0 0 auto;flex-direction:column}.spine>button{flex:0 0 auto;flex-direction:row;padding:16px 20px;gap:12px}.spine .vt,.spine .vs{writing-mode:horizontal-tb;transform:none}.spine .vt{font-size:26px}.spine .inside{min-width:0;padding:0 20px 20px;display:none}.spine.open .inside{display:flex}}
/* rail */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px;margin-top:20px;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:8px}.rail::-webkit-scrollbar-thumb{background:var(--ink);border-radius:8px}
.phone{flex:0 0 236px;scroll-snap-align:start;background:var(--ink);border-radius:34px;padding:10px;box-shadow:8px 8px 0 var(--coral);position:relative}
.phone:nth-child(3n+2){box-shadow:8px 8px 0 var(--mint)}.phone:nth-child(3n){box-shadow:8px 8px 0 var(--sun)}
.phone .scr{background:#fff;border-radius:26px;overflow:hidden;height:440px;display:flex;flex-direction:column}
.phone .bar{height:22px;display:flex;justify-content:center;align-items:center}.phone .bar i{width:70px;height:6px;border-radius:6px;background:#ddd}
.phone .mh{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font:800 13px var(--head)}
.phone .mh span{width:18px;height:2px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)}
.phone img{width:100%;height:170px;object-fit:cover}
.phone .bd{padding:12px;flex:1;display:flex;flex-direction:column;gap:6px}
.phone .bd b{font:900 20px/1.05 var(--head)}.phone .bd small{font-size:12.5px;color:#475569}
.phone .call{margin-top:auto;background:var(--coral);color:#fff;text-align:center;border-radius:10px;padding:10px;font:800 14px var(--head)}
.phone .row2{display:flex;gap:6px}.phone .row2 i{flex:1;height:34px;border-radius:8px;background:var(--paper2);font:700 11px/34px var(--body);font-style:normal;text-align:center}
.phone .chip{position:absolute;top:-12px;left:16px;background:var(--sun);border:2px solid var(--ink);border-radius:99px;padding:5px 10px;font:900 11px/1 var(--head);text-transform:uppercase;letter-spacing:.08em}
/* vibe flip cards */
.flips{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:22px}
@media(min-width:900px){.flips{grid-template-columns:repeat(4,1fr)}}
.flip{perspective:1000px;height:340px;cursor:pointer;border:0;padding:0;background:none;text-align:left;font:inherit;color:inherit}
@media(max-width:600px){.flip{height:260px}}
.flip .in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flip:hover .in,.flip:focus-visible .in,.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .bk{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;border:2px solid var(--ink);overflow:hidden}
.flip .f img{width:100%;height:100%;object-fit:cover}
.flip .f span{position:absolute;left:12px;bottom:12px;font:900 clamp(22px,2.6vw,32px)/1 var(--head);text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.flip .bk{transform:rotateY(180deg);padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.flip .bk h3{font-size:30px;text-transform:uppercase;margin:0}.flip .bk p{font:500 italic 19px/1.35 var(--serif);margin:0}
.flip.h .bk{background:var(--sun)}.flip.i .bk{background:var(--mint)}.flip.m .bk{background:var(--coral);color:#fff}.flip.m .bk h3{color:#fff}.flip.e .bk{background:var(--sky)}
/* ticket */
.ticket{position:relative;display:grid;gap:20px;background:#fff;border:2px dashed var(--ink);border-radius:22px;padding:30px;box-shadow:10px 10px 0 var(--ink)}
@media(min-width:900px){.ticket{grid-template-columns:1fr 280px}}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:36px;height:36px;border-radius:50%;background:var(--paper);border:2px dashed var(--ink);transform:translateY(-50%)}
.ticket::before{left:-20px}.ticket::after{right:-20px}
.ticket ol{columns:2;column-gap:28px;padding-left:22px;font-size:16px}@media(max-width:700px){.ticket ol{columns:1}}
.ticket .side{border-left:2px dashed var(--ink);padding-left:20px;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center}
@media(max-width:899px){.ticket .side{border-left:0;border-top:2px dashed var(--ink);padding:20px 0 0}}
.ticket .free{font:900 64px/1 var(--head);color:var(--coral)}
/* diary */
.diary{list-style:none;padding:0;margin:20px 0 0}
.diary li{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:18px 0;border-bottom:2px solid var(--ink)}
.diary .d{font:900 68px/.85 var(--head);letter-spacing:-.04em}.diary .d small{display:block;font:800 13px/1.4 var(--head);letter-spacing:.14em;text-transform:uppercase}
.diary h3{margin:4px 0 6px;font-size:24px}.diary p{margin:0;font-size:17px}
.diary li.next .d{color:var(--coral)}.diary li.next h3{font-family:var(--serif);font-style:italic}
/* final */
.keysfinal{position:relative;background:var(--ink);color:var(--paper);text-align:center;padding:90px 0!important;overflow:hidden}
.keysfinal h2{color:var(--paper);font-size:clamp(46px,9vw,130px);line-height:.88;letter-spacing:-.04em;text-transform:uppercase;margin:0 0 .25em}
.keysfinal h2 .ser{color:var(--sun);text-transform:none}
.keysfinal p{font-size:20px;max-width:44ch;margin:0 auto 24px;color:#E6EDF7}
.keysfinal .cta2{justify-content:center}
.keysfinal .btn2{box-shadow:5px 5px 0 var(--sun)}
.keysfinal .orb{position:absolute;width:280px;opacity:.9;transform:rotate(-12deg)}
/* corner index */
.cindex{position:fixed;left:16px;bottom:16px;z-index:35;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:10px 12px;box-shadow:5px 5px 0 var(--ink);font:800 12.5px/1.9 var(--head);text-transform:uppercase;letter-spacing:.06em}
.cindex a{display:block;color:var(--ink);text-decoration:none}.cindex a:hover,.cindex a.on{color:var(--coral)}
.cindex a b{display:inline-block;width:26px;color:var(--coral)}
@media(max-width:1100px){.cindex{display:none}}
/* colophon */
.colophon{border-top:1px solid rgba(255,255,255,.25);margin-top:16px;padding-top:12px;font-size:13.5px;color:#AFC0D8}
/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.flip .in,.spine{transition:none}}
.v3 .stickycta{background:var(--ink)}
.v3 .faq2 details{background:#fff}
body.v3 main{overflow-x:clip}
.v3 .ticker{margin:10px 0}
.keycard{top:300px}
@media(min-width:900px) and (max-width:1199px){.keycard{top:250px;width:240px}}
nav.cindex{display:block;gap:0}
nav.cindex a{padding:0;border:0;font-size:12px;font-weight:800}
@media(max-width:1319px){.cindex{display:none}}
@media(max-width:1319px){nav.cindex{display:none}}
@media(max-width:899px){.keycard{top:auto;margin:18px 0 0 auto}}
@media(max-width:759px){.prog .when{grid-column:2;font-size:16px}}
@media(max-width:820px){.spine .ribbon{display:none}.spine>button .vs{white-space:normal;font-size:15px;text-align:right;line-height:1.1}}
/* ===== v3.2: Archivo Expanded headlines + site-wide carry-through ===== */
body.v3 h1,body.v3 h2,body.v3 .big,body.v3 .keysfinal h2,body.v3 .prog .n,body.v3 .diary .d,body.v3 .stamp,body.v3 .spine .vt{font-stretch:118%}
body.v3 .ser{font-stretch:100%}
.keys-hero h1{font-size:clamp(46px,10.6vw,166px)}
body.v3 h2{font-weight:900;letter-spacing:-.02em}
body.v3 h3{letter-spacing:-.01em}
/* sub-page hero */
.sub3{padding:34px 0 46px!important;position:relative}
.sub3 .g{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.sub3 .g{grid-template-columns:1.15fr .85fr}}
.sub3 h1{font-size:clamp(40px,6.6vw,98px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase;font-weight:900;margin:.25em 0 .3em;color:var(--ink)}
.sub3 h1 .ser{text-transform:none;color:var(--coral);letter-spacing:-.01em}
.sub3 .lead{font-size:20px;max-width:46ch}
.sub3 .promise{display:inline-block;background:#fff;border:2px dashed var(--ink);border-radius:12px;padding:10px 14px;font-size:16px;margin:0 0 6px}
.pin{position:relative;background:#fff;border:2px solid var(--ink);padding:10px 10px 12px;box-shadow:9px 9px 0 var(--ink);transform:rotate(3deg);max-width:440px;justify-self:center;margin:0}
.pin img{display:block;width:100%;height:auto}
.pin figcaption{margin:8px 4px 0;text-align:center;font:600 italic 18px var(--serif)}
.pin .tape{top:-14px;left:38%}
.pin .stamp{position:absolute;right:-26px;bottom:-30px;width:104px;height:104px;font-size:11.5px}
.pin .stamp b{font-size:26px}
/* restyle shared components on paper */
body.v3 .box,body.v3 .kpi,body.v3 .steps li,body.v3 details{background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
body.v3 .box h3{font-size:22px}
body.v3 .tint{background:var(--paper2)}
body.v3 .sun{background:#FFE7A8}
body.v3 .navy{background:var(--ink)}
body.v3 table{border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:5px 5px 0 var(--ink);border-collapse:separate;border-spacing:0}
body.v3 th{background:var(--ink);color:var(--paper);font-stretch:110%}
body.v3 td{border-bottom:1px dashed rgba(10,23,48,.25)}
body.v3 .scroll{padding:0 8px 10px 0}
body.v3 .photo img{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--mint);border-radius:18px}
body.v3 .plan.best{border:3px solid var(--coral);box-shadow:7px 7px 0 var(--coral)}
body.v3 .price{font-stretch:118%;letter-spacing:-.03em}
body.v3 .pill{background:var(--sun);color:var(--ink);border:2px solid var(--ink)}
body.v3 .steps li::before{color:var(--coral);font-stretch:118%}
body.v3 .kpi b{font-stretch:118%;color:var(--coral)}
body.v3 .compare .no{border-left:8px solid var(--coral)}body.v3 .compare .yes{border-left:8px solid var(--mint)}
body.v3 .url{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
body.v3 .btn{border-radius:14px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--coral);color:#fff}
body.v3 .btn:hover{background:var(--coral);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
body.v3 .btn.ghost{background:#fff;color:var(--ink)}
body.v3 .btn.alt{background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
body.v3 .box .ic{width:46px;height:46px}
body.v3{overflow-x:clip}
html:has(body.v3){overflow-x:clip}
@media(min-width:900px){.sub3 .g{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}}
.pin{width:100%}
.sub3 h1{overflow-wrap:anywhere;hyphens:manual}
.sub3 h1{font-size:clamp(34px,4.9vw,72px);overflow-wrap:normal}
.pin .stamp{top:-34px;bottom:auto;right:-24px}
.sub3 h1{font-size:clamp(34px,4.6vw,66px)}
.keys-hero h1{font-size:clamp(36px,10.6vw,166px)}