/* High-fidelity hardware shells, preserving existing page content and interactions.
   No imported animation runtime or unlicensed product images. */

/* iPhone Pro: concentric natural-titanium frame and proper Dynamic Island. */
.df-iphone-pro .df-body{filter:drop-shadow(0 0.8px 1px #ffffff88)}
.df-iphone-pro.df-tone-light .df-metal{
  background:linear-gradient(132deg,#e0e4e1 0%,#999e9c 9%,#f4f3f0 22%,#a7afac 43%,#edecea 56%,#878f8e 82%,#dfe3df 98%);
  box-shadow:inset 0 0 0 calc(.85*var(--df-pt)) #6c75727d,inset 0 0 calc(3*var(--df-pt)) #ffffff70;
}
.df-iphone-pro.df-tone-dark .df-metal{
  background:linear-gradient(130deg,#515756,#222929 19%,#646b68 45%,#262d2a 76%,#555c58);
}
.df-iphone-pro .df-glass{
  background:linear-gradient(155deg,#202426,#050708 44%,#000 83%);
  box-shadow:inset 0 0 calc(5*var(--df-pt)) #090c0db8;
}
.df-iphone-pro .df-camera{display:none!important}
.df-iphone-pro .df-screen{z-index:2}
.df-iphone-pro .df-status{z-index:6;top:calc(10*var(--df-pt))}
.df-iphone-pro .df-island{
  position:absolute;z-index:8;
  width:calc(120*var(--df-pt));height:calc(34*var(--df-pt));
  left:50%;top:calc(9*var(--df-pt));
  transform:translateX(-50%);
  display:block;pointer-events:none;
  border-radius:calc(18*var(--df-pt));
  background:linear-gradient(160deg,#050607 0%,#000 62%,#101519);
  border:calc(.6*var(--df-pt)) solid #292d31;
  box-shadow:0 calc(1.2*var(--df-pt)) calc(2.6*var(--df-pt)) #0009,inset 0 calc(1.1*var(--df-pt)) calc(1.4*var(--df-pt)) #ffffff13;
}
.df-iphone-pro .df-island-glow{
  position:absolute;display:block;
  left:calc(21*var(--df-pt));top:calc(9*var(--df-pt));
  width:calc(32*var(--df-pt));height:calc(17*var(--df-pt));
  background:radial-gradient(ellipse,#282d31b8 0%,#050607 75%);
  border-radius:50%;
  opacity:.38;
}
.df-iphone-pro .df-island-lens{
  position:absolute;display:block;
  top:calc(9*var(--df-pt));right:calc(14*var(--df-pt));
  width:calc(14*var(--df-pt));height:calc(14*var(--df-pt));
  border-radius:50%;
  background:radial-gradient(circle at 45% 37%,#223d53 0 14%,#0c1424 36%,#060607 71%);
  box-shadow:inset 0 0 0 calc(1.2*var(--df-pt)) #1a2125,0 0 calc(2*var(--df-pt)) #30394340;
}
.df-iphone-pro .df-side-button{
  display:block;position:absolute;z-index:1;pointer-events:none;
  width:calc(3*var(--df-pt));
  border:calc(.5*var(--df-pt)) solid #77827d;
  box-shadow:inset 0 0 calc(1*var(--df-pt)) #f8f8f283,0 0 calc(1.5*var(--df-pt)) #14231f50;
}
.df-iphone-pro .df-side-action{left:calc(-1.8*var(--df-pt));top:calc(160*var(--df-pt));height:calc(33*var(--df-pt));border-radius:calc(3*var(--df-pt)) 0 0 calc(3*var(--df-pt))}
.df-iphone-pro .df-side-volume-up{left:calc(-1.8*var(--df-pt));top:calc(228*var(--df-pt));height:calc(65*var(--df-pt));border-radius:calc(3*var(--df-pt)) 0 0 calc(3*var(--df-pt))}
.df-iphone-pro .df-side-volume-down{left:calc(-1.8*var(--df-pt));top:calc(310*var(--df-pt));height:calc(65*var(--df-pt));border-radius:calc(3*var(--df-pt)) 0 0 calc(3*var(--df-pt))}
.df-iphone-pro .df-side-power{right:calc(-1.8*var(--df-pt));top:calc(248*var(--df-pt));height:calc(91*var(--df-pt));border-radius:0 calc(3*var(--df-pt)) calc(3*var(--df-pt)) 0}
.df-iphone-pro .df-home{z-index:7}
.df-iphone-pro .df-edge{z-index:5;pointer-events:none}
/* Lateral editorial previews use the same recognisable iPhone silhouette. */
#editorial .es-peek-bezel{
  background:linear-gradient(135deg,#d9dedb 0%,#949f9a 25%,#e9ece7 54%,#8b9691 82%,#d6d9d4 100%);
}
#editorial .es-peek-screen::before{
  content:"";position:absolute;top:1.2%;left:50%;z-index:10;
  transform:translateX(-50%);width:31%;height:3.5%;
  background:#050709;border-radius:0 0 14px 14px;
  box-shadow:inset 0 -1px 1px #26302d70;pointer-events:none;
}
#editorial .es-peek-screen::after{
  content:"";position:absolute;top:2.1%;left:59%;z-index:11;
  width:1.8%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 45% 40%,#294358,#080a0e 75%);
  pointer-events:none;
}

/* Notebook Pro: full aluminum lid, dark display bezel, camera notch, hinge
   and tapered lower deck. All site elements remain actual HTML inside screen. */
.rf-film .rf-web.rf-macbook{
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  width:min(940px,calc(100vw - 24px));max-width:calc(100vw - 24px);
  height:var(--rf-art-height,620px);
  margin:0;padding:0;
  border:0;border-radius:0;overflow:visible;
  background:transparent;box-shadow:none;
  color:#273a2b;
}
.rf-macbook .mbp-device{
  --mbp-silver-hi:#f1f3f0;
  --mbp-silver-mid:#bcc4c1;
  --mbp-silver-low:#778481;
  position:relative;
  flex:none;
  width:min(100%,var(--mbp-max-width,880px));
  height:auto;
  padding-bottom:6px;
  isolation:isolate;
  filter:drop-shadow(0 12px 17px #1a282b28);
}
.rf-macbook .mbp-lid{
  box-sizing:border-box;
  position:relative;
  width:100%;
  aspect-ratio:1.59;
  padding:clamp(5px,.85vw,10px);
  border-radius:clamp(8px,1.5vw,16px) clamp(8px,1.5vw,16px) 4px 4px;
  background:linear-gradient(140deg,#e9edeb,#899590 10%,#dce0de 35%,#68756f 80%,#f1f2ed);
  border:1px solid #7f8986;
  box-shadow:inset 0 1px 1px #ffffffd6,inset 0 -2px 2px #56615a91,0 3px 3px #13261a38;
}
.rf-macbook .mbp-display{
  box-sizing:border-box;
  width:100%;height:100%;
  border-radius:clamp(5px,.9vw,9px) clamp(5px,.9vw,9px) 2px 2px;
  background:#080b0c;
  padding:clamp(4px,.7vw,8px);
  box-shadow:0 0 0 1px #414845,inset 0 0 0 1px #0b0f11;
}
.rf-macbook .mbp-screen{
  position:relative;display:flex;flex-direction:column;
  width:100%;height:100%;min-height:0;min-width:0;
  overflow:hidden;
  background:#fbfaf6;border-radius:2px;
  isolation:isolate;
}
.rf-macbook .mbp-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(115deg,#ffffff0b 0%,transparent 22%,transparent 79%,#080c0917 100%);
}
.rf-macbook .mbp-camera{
  position:absolute;top:clamp(5px,.85vw,10px);left:50%;
  transform:translateX(-50%);
  z-index:6;display:flex;align-items:center;justify-content:center;
  width:clamp(23px,4.2vw,75px);height:clamp(6px,1.15vw,13px);
  border-radius:0 0 clamp(4px,.75vw,9px) clamp(4px,.75vw,9px);
  background:linear-gradient(#050809,#101419);
  pointer-events:none;
}
.rf-macbook .mbp-camera i{
  width:clamp(2px,.45vw,5px);height:clamp(2px,.45vw,5px);
  display:block;border-radius:50%;
  background:radial-gradient(circle at 42% 35%,#29455b,#06080c 72%);
  box-shadow:0 0 0 1px #454e51;
}
.rf-macbook .mbp-hinge{
  width:93%;height:clamp(2px,.65vw,6px);
  margin:0 auto;position:relative;
  background:linear-gradient(90deg,#929c98,#282f31 15%,#404949 44%,#606964 66%,#929b96 100%);
  border-radius:0 0 8px 8px;
  box-shadow:0 2px 3px #17231b45;
}
.rf-macbook .mbp-base{
  position:relative;z-index:2;
  width:107%;height:clamp(11px,1.75vw,23px);
  margin:0 0 0 -3.5%;
  background:linear-gradient(180deg,#e7eae7 0%,#aeb7b2 45%,#7b8883 82%,#c0c6c2 100%);
  border:1px solid #9ca69f;
  border-top:1px solid #f4f5f1;
  border-radius:2px 2px 36% 36% / 2px 2px 64% 64%;
  box-shadow:inset 0 1px 1px #fff9,0 2px 3px #17252126;
  clip-path:polygon(3.5% 0,96.5% 0,100% 68%,99% 100%,1% 100%,0 68%);
}
.rf-macbook .mbp-front-groove{
  position:absolute;left:42%;top:0;
  width:16%;height:30%;display:block;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#758079,#aab6ad);
  box-shadow:inset 0 1px 2px #4f5c53a1,0 1px #f2f3ee;
}
.rf-macbook .mbp-ground-shadow{
  display:block;position:absolute;z-index:-2;
  left:11%;right:11%;bottom:-1px;height:clamp(5px,1vw,12px);
  border-radius:50%;background:#21332429;filter:blur(clamp(4px,1.2vw,11px));
  pointer-events:none;
}
/* Existing Casa Costa screen as a real browser window inside the hardware. */
.rf-film .rf-macbook .rf-web-chrome{
  box-sizing:border-box;flex:none;
  height:clamp(12px,2vw,24px);
  gap:clamp(3px,.5vw,6px);
  padding:0 clamp(7px,1.2vw,14px);
  font-size:clamp(6px,.7vw,9px);
  background:#e8eee5;
}
.rf-film .rf-macbook .rf-web-chrome i{
  flex:none;
  width:clamp(3px,.55vw,6px);height:clamp(3px,.55vw,6px);
}
.rf-film .rf-macbook .rf-web-chrome span{
  margin-left:auto;margin-right:0;
  font-size:clamp(5px,.65vw,9px);
  letter-spacing:.06em;white-space:nowrap;
}
.rf-film .rf-macbook .rf-web-nav{
  box-sizing:border-box;flex:none;
  height:clamp(25px,4.8vw,57px);
  gap:8px;padding:0 clamp(9px,2.4vw,25px);
  min-width:0;
}
.rf-film .rf-macbook .rf-web-nav strong{
  min-width:0;white-space:nowrap;
  font-size:clamp(13px,2.3vw,26px);line-height:1.05;
}
.rf-film .rf-macbook .rf-web-nav span{
  font-size:clamp(7px,1vw,12px);
  white-space:nowrap;
}
.rf-film .rf-macbook .rf-web-hero{
  position:relative;flex:1;min-height:0;height:auto;
}
.rf-film .rf-macbook .rf-web-hero>img{
  width:100%;height:100%;object-fit:cover;object-position:50% 52%;
}
.rf-film .rf-macbook .rf-web-copy{
  left:clamp(11px,3vw,38px);bottom:clamp(8px,2.8vw,33px);
  right:clamp(8px,2vw,20px);
}
.rf-film .rf-macbook .rf-web-copy small{
  font-size:clamp(7px,.9vw,10px);margin-bottom:clamp(5px,1.5vw,13px);
}
.rf-film .rf-macbook .rf-web-copy strong{
  font-size:clamp(21px,4.2vw,68px);
  line-height:.98;letter-spacing:-.055em;
}
.rf-film .rf-macbook .rf-web-copy p{
  font-size:clamp(10px,1.3vw,14px);
  margin-top:clamp(4px,1.3vw,12px);
}
/* Static-flow layout has 20px inner gutters on both sides. */
.rf-film.rf-natural .rf-web.rf-macbook{
  height:auto;min-height:0;
  width:min(940px,calc(100vw - 44px));
  max-width:calc(100vw - 44px);
}
.rf-film.rf-natural .rf-macbook .mbp-device{
  /* Reserve room for the 107% tapered aluminum base in static reading mode. */
  width:min(calc(100% - 22px),880px);
}
@media(max-width:760px){
  .rf-film .rf-web.rf-macbook{width:calc(100vw - 18px);max-width:calc(100vw - 18px)}
  /* Keep the 107% tapered aluminum deck fully within a narrow viewport. */
  .rf-film .rf-macbook .mbp-device{width:min(calc(100% - 22px),var(--mbp-max-width,880px))}
  .rf-film .rf-macbook .rf-web-nav>span{display:none}
  .rf-film .rf-macbook .rf-web-nav{height:clamp(25px,5vw,35px)}
  .rf-film .rf-macbook .rf-web-chrome span{letter-spacing:0;font-size:6px}
  .rf-film .rf-macbook .rf-web-copy strong{font-size:clamp(20px,6vw,33px)}
  .rf-film .rf-macbook .rf-web-copy small{font-size:7px}
}
@media(max-width:370px){
  .rf-film .rf-macbook .rf-web-copy p{display:none}
  .rf-film .rf-macbook .rf-web-copy strong{font-size:clamp(19px,6vw,24px)}
}
@media(prefers-reduced-motion:reduce){
  .df-iphone-pro .df-status,.df-iphone-pro .df-home{transition:none!important}
}