/* ============================================================
   "Every rental includes" — the comp (Drive 1mBgy…, 1672x941)
   converted to HTML. Scoped .rc.

   WHAT STAYED AN IMAGE, AND WHY
   Five pieces cannot be CSS: the photograph, the $100 seal, the
   gold palm glyph, the frond watermark behind the left column,
   and the watercolour shore inside the card. Each is cut from the
   comp with its alpha solved against the surface it sits on, so
   it composites over the live layout rather than carrying a
   background with it.

   Everything else is live: the card and its border, radius,
   dividers and check badges are CSS; every line of type is real
   text in the site's own faces.

   THE ONE HONEST DIFFERENCE
   The comp's display face is a condensed high-contrast serif that
   is not in the library. Matched on the comp's 68px cap, Walbaum
   sets "Every rental" 628px wide against the comp's 466 and would
   run into the photograph at x=621. So the headline is sized to
   the column instead, which lands its cap near 54px rather than
   68. Nothing else moved to accommodate it.

   Boxes are shares of the 1672x941 frame: 1 comp px = 0.0598%
   across, 0.1063% down, and 0.0598cqw for type.
   ============================================================ */

.rcp{background:var(--cream);color:var(--ink);}

/* ── seated on the site's margin ──
   The composition keeps the comp's internal proportions, and the frame that
   carries it is scaled and offset so the comp's own content bounds land on
   .shell: the headline's x=101 on the shell's content left, the card's right
   edge x=1607 on its right. Content is 90.07% of the comp's frame, so the frame
   renders at content-width / 0.90072 and steps back by its 6.041% left inset.
   The frame is in flow: a percentage inside --iw would resolve against height,
   not width, if the section tried to compute its own. */
.rc{position:relative;width:100%;overflow-x:clip;overflow-y:visible;isolation:isolate;
  background:var(--cream);font-family:var(--text);
  /* seated on the site's section rhythm. The frame carries the comp's own margins --
     the photo starts 6.801% down and ends 7.970% up, of a frame 0.5628x its own width --
     so subtract those from --gap instead of stacking both, or the composition reads
     crowded above and adrift below. */
  padding-top:max(0px,calc(var(--gap) - 0.03828 * var(--iw)));
  margin-bottom:calc(-0.04486 * var(--iw));
  --p:clamp(20px,4vw,44px);
  --outer:min(var(--shell),100%);
  --cl:calc((100% - var(--outer))/2 + var(--p));
  --cw:calc(var(--outer) - 2*var(--p));
  --iw:calc(var(--cw) / 0.90072);
  --gold:#BF9259; --gold-lt:#C7AB81; --rule:#EFE1C6;
  --deep-navy:#001942; --card-ink:#042854; --card-soft:#4C5874; --green:#083832;}
.rc__frame{position:relative;width:var(--iw);aspect-ratio:1672/941;
  container-type:inline-size;
  margin-left:calc(var(--cl) - 0.06041 * var(--iw));}
.rc__bgpalm{position:absolute;z-index:0;pointer-events:none;opacity:.2;}
/* ── bottom dissolve ──
   The section used to clip at its own box, so under ~1100px the card's 34px/70px shadow
   and the palm wash both ended on a flat line above the footer. overflow-x:clip still
   keeps the oversized frame from widening the page, while the y axis stays visible so the
   shadow finishes on the canvas below. The veil is the page cream on a smootherstep ramp
   (fade-effect.md), z0 like the palms and last in the DOM, so it melts the art into the
   canvas before the edge and never touches the copy (z2), photo (z1) or card (z4). */
.rc::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* top right: the frond watermark is cut flat on its own top row, so a second ladder,
       sized to the palm's box (its width is min(24%,360px) of .rc, height .53 of that),
       dissolves the fronds upward into the canvas. Boxed, not full width, because the
       stacked layout's copy is static and would sit under a full-width veil. */
    linear-gradient(to bottom,
      rgba(250,246,239,1) 0%, rgba(250,246,239,.99) 10%, rgba(250,246,239,.94) 20%,
      rgba(250,246,239,.84) 30%, rgba(250,246,239,.68) 40%, rgba(250,246,239,.5) 50%,
      rgba(250,246,239,.32) 60%, rgba(250,246,239,.16) 70%, rgba(250,246,239,.06) 80%,
      rgba(250,246,239,.01) 90%, rgba(250,246,239,0) 100%)
      right top / min(24%,360px) calc(min(24%,360px) * .53) no-repeat,
    linear-gradient(to bottom,
      rgba(250,246,239,0) 0%, rgba(250,246,239,.01) 10%, rgba(250,246,239,.06) 20%,
      rgba(250,246,239,.16) 30%, rgba(250,246,239,.32) 40%, rgba(250,246,239,.5) 50%,
      rgba(250,246,239,.68) 60%, rgba(250,246,239,.84) 70%, rgba(250,246,239,.94) 80%,
      rgba(250,246,239,.99) 90%, rgba(250,246,239,1) 100%)
      left bottom / 100% min(24%,220px) no-repeat;}
.rc__bgpalm--bl{
  /* seated 150px left of the copy column's edge (--cl), so the cluster leads in ahead of
     the Book Now pill; floored at the old inset so it never runs off the section's left
     edge where --cl is small */
  left:max(clamp(8px,1.5vw,24px),calc(var(--cl) - 150px));bottom:0;width:min(38%,560px);height:auto;
}
.rc__bgpalm--tr{
  right:0;top:0;width:min(24%,360px);height:auto;
}

.rc__frond-wrap{position:absolute;left:0;top:59.511%;width:25.718%;z-index:0;pointer-events:none;}
.rc__frond{display:block;width:100%;height:auto;}
.rc__frond-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 90% at 0% 100%,
      rgba(250,246,239,0) 0%,
      rgba(250,246,239,.08) 16%,rgba(250,246,239,.22) 28%,rgba(250,246,239,.42) 40%,
      rgba(250,246,239,.62) 52%,rgba(250,246,239,.8) 64%,rgba(250,246,239,.92) 76%,
      rgba(250,246,239,.98) 88%,rgba(250,246,239,1) 100%);
}

/* ── left column ── */
.rc__left{position:absolute;left:5.981%;top:0;height:100%;width:40%;z-index:2;}

.rc__head{position:absolute;top:23.06%;left:-.18cqw;margin:0;max-width:none;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;
  color:var(--navy);white-space:nowrap;
  font-feature-settings:"kern" 1,"liga" 1;}
.rc__head span{display:block;line-height:inherit;}
.rc__head .script{
  display:block;width:max-content;max-width:100%;
  font-family:var(--script);font-size:1.08em;line-height:.86;
  letter-spacing:0;color:var(--teal);
  margin:.12em 0 0;transform:translateY(.04em);position:relative;
}
.rc__head .script:after{
  content:"";position:absolute;left:5%;right:10%;bottom:-.08em;
  height:2px;background:#bd9652;border-radius:50%;transform:rotate(-4deg);
}

.rc__lead{position:absolute;top:46.15%;left:0;margin:0;width:26.2cqw;
  font-size:1.375cqw;line-height:1.545;color:#394860;}

.rc__ctas{position:absolute;top:61.63%;left:0;display:flex;gap:1.735cqw;}
/* Book Now is the site's own .pill.pill--solid (site.css), the same component as the
   cart section's, with the gold hairline rim it carries there; only the arrow motion
   lives here. The .rc__pill rules below stay for the ghost variant other pages use. */
.rc__ctas .pill{text-decoration:none;}
.rc__ctas .pill svg{flex:0 0 auto;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.rc__ctas .pill:hover svg{transform:translateX(3px);}
.rc__ctas .pill--solid{border-color:rgba(181,137,74,.78);}
.rc__ctas .pill--solid:hover{border-color:#b58a4a;}
.rc__pill{display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  height:3.767cqw;border-radius:999px;font-family:var(--text);font-weight:600;
  font-size:1.154cqw;letter-spacing:.037em;white-space:nowrap;text-decoration:none;
  transition:transform .2s cubic-bezier(.32,.72,.3,1),box-shadow .2s ease,
             background .2s ease,color .2s ease,border-color .2s ease;}
.rc__pill svg{width:1.15em;height:1.15em;flex:0 0 auto;
  transition:transform .2s cubic-bezier(.32,.72,.3,1);}
.rc__pill:hover svg{transform:translateX(2px);}
.rc__pill:focus-visible{outline:2px solid #143159;outline-offset:3px;}
.rc__pill:active{transform:translateY(1px) scale(.995);}
.rc__pill--solid{width:12.679cqw;background:#143159;color:#FDFDFE;border:0;}
.rc__pill--solid:hover{transform:translateY(-2px);background:#1B3F70;
  box-shadow:0 10px 24px rgba(9,20,38,.26);}
.rc__pill--ghost{width:11.005cqw;background:transparent;color:#173A6B;
  border:1.8px solid #1C3F6E;}
.rc__pill--ghost:hover{transform:translateY(-2px);background:#173A6B;color:#FDFDFE;
  box-shadow:0 10px 24px rgba(9,20,38,.20);}



/* ── the photograph ── */
/* the photograph, carrying the gold "More to Explore" that is drawn across its
   lower left in the comp. That flourish is script over a photographed clipboard;
   lifting it off would mean rebuilding printed paper, so it stays with the image. */
.rc__shot{position:absolute;left:40.4%;top:6.801%;width:40.431%;margin:0;z-index:1;}
.rc__shot img{display:block;width:100%;height:auto;}

/* ── the card: fill, border, radius, dividers and badges are CSS.
      Each row is seated at the offset measured off the comp rather than flowed,
      so the badges, titles and rules land where the comp puts them. ── */
.rc__card{position:absolute;left:64.8%;top:20.404%;width:34.4%;height:69.288%;
  z-index:4;background:#FDFBF6;border:1px solid rgba(191,146,89,.55);
  border-radius:1.2cqw;overflow:hidden;
  box-shadow:
    0 1px 2px rgba(40,53,67,.08),
    0 12px 24px -10px rgba(40,53,67,.16),
    0 34px 70px -20px rgba(14,36,69,.34);}
.rc__card::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -14px 22px -16px rgba(40,53,67,.12),
    inset 0 0 0 1px rgba(255,248,236,.35);
}
.rc__cardart{position:absolute;left:0;bottom:0;width:100%;height:auto;pointer-events:none;}

.rc__kicker{position:absolute;top:5.06%;left:0;right:0;margin:0;
  display:flex;align-items:center;justify-content:center;gap:1.02cqw;
  font-size:.754cqw;font-weight:600;letter-spacing:.335em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;}
.rc__kicker i{height:1px;background:var(--gold-lt);flex:0 0 auto;}
.rc__kicker i:first-of-type{width:7.59cqw;}
.rc__kicker i:last-of-type{width:6.04cqw;}

.rc__rows{margin:0;padding:0;list-style:none;}
.rc__rows li{position:absolute;left:0;right:0;margin:0;padding:0;}
.rc__rows li:nth-child(1){top:15.031%;}
.rc__rows li:nth-child(2){top:38.804%;}
.rc__rows li:nth-child(3){top:62.577%;}
.rc__tick{position:absolute;left:8.103%;top:0;width:9.655%;height:0;padding-bottom:9.655%;
  border-radius:50%;
  background:linear-gradient(180deg,#F4F8F5 0%,#E2EBE4 46%,#D0DDD4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(19,71,70,.1),
    0 1px 1px rgba(19,71,70,.12),
    0 5px 12px -3px rgba(19,71,70,.22);}
.rc__tick svg{position:absolute;left:0;top:0;width:100%;height:100%;}
.rc__rows h3{margin:0 0 .78cqw 21.552%;font-family:var(--disp);font-weight:400;
  font-size:1.65cqw;line-height:1;color:var(--card-ink);}
.rc__rows p{margin:0 16% 0 21.897%;font-size:1.10cqw;line-height:1.52;color:var(--card-soft);}

.rc__div{position:absolute;left:6.552%;width:87.069%;height:1px;background:var(--rule);}
.rc__div--a{top:34.663%;}
.rc__div--b{top:58.819%;}

.rc__note{position:absolute;left:0;right:0;top:86.2%;margin:0;text-align:center;
  font-family:var(--script);font-size:1.62cqw;line-height:1.1;color:var(--green);}
.rc__noterule{position:absolute;left:50%;transform:translateX(-50%);top:96.0%;
  width:13.448%;height:1px;background:var(--gold-lt);}

/* ── the $100 seal, live ──
   Was rc-seal.png (168x152, disc 135 across at 20,9). The aside keeps that exact box,
   position and drop shadow, so neither layout moves; the disc inside is its own
   container and everything is sized in cqi of the disc. Rings from the artwork's radial
   profile: green to 90% of the radius, a near-transparent cream gap to 96%, then the
   gold rim; inner hairline at 84%. Type calibrated against the PNG at 4x: the $100 row
   0.463 to 0.670 of the disc and 0.53 wide, A DAY 0.706 to 0.770; the palm is the site's
   engraved mark at the artwork's palm height. */
.rc__seal{position:absolute;left:88.324%;top:10.007%;width:13.2%;aspect-ratio:168/152;z-index:5;
  display:block;margin:0;pointer-events:none;
  filter:drop-shadow(0 .22cqw .5cqw rgba(22,51,95,.17));}
.rc__seal-disc{position:absolute;left:11.905%;top:5.921%;width:80.357%;aspect-ratio:1;
  container-type:inline-size;border-radius:50%;
  background:
    radial-gradient(circle at 34% 20%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 52%),
    radial-gradient(circle closest-side,#23504B 89.8%,rgba(250,246,239,.92) 91% 96.4%,#CFAF7E 97.4%);
  color:#F4F6F3;text-align:center;}
.rc__seal-disc::after{content:"";position:absolute;inset:7.8%;border-radius:50%;
  border:1px solid rgba(196,166,102,.85);}
.rc__seal-disc > *{position:absolute;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;}
.rc__seal-palm{top:15%;width:20cqi;height:auto;aspect-ratio:1;display:block;}
/* two rows under the palm: tracked caps, then the house script in the rim's gold.
   Both sit on chords inside the 84% hairline with a few cqi to spare each side. */
.rc__seal-head{top:40.5%;font-family:var(--text);font-weight:600;font-size:max(8.4cqi,7px);line-height:1;
  letter-spacing:.09em;text-indent:.09em;text-transform:uppercase;}
.rc__seal-rule{top:55.1%;width:24cqi;height:1px;background:rgba(216,196,154,.6);}
.rc__seal-sub{top:60.5%;font-family:var(--script);font-weight:400;font-size:max(11.8cqi,10px);line-height:1;
  letter-spacing:0;word-spacing:.16em;color:#D8C49A;}

@media (prefers-reduced-motion:reduce){
  .rc__pill,.rc__pill svg{transition:background .2s ease,color .2s ease,border-color .2s ease;}
  .rc__pill:hover,.rc__pill:active,.rc__pill:hover svg{transform:none;}
}

/* ── narrow: the frame cannot hold, so it stacks ── */
@media (max-width:900px){
  /* the frame cannot hold at this width, so everything comes out of it and stacks */
  /* stacked, the frame has no inset of its own, so take the gap straight */
  .rc{height:auto;margin-bottom:0;
    padding:var(--gap) 0 clamp(14px,4vw,26px);
    --sw:clamp(92px,24vw,126px); --sh:calc(var(--sw) / 1.10526);}
  .rc__frame{position:relative;width:auto;aspect-ratio:auto;margin-left:0;
    container-type:normal;display:flex;flex-direction:column;}
  .rc__left{order:1;} .rc__shot{order:2;} .rc__seal{order:3;} .rc__card{order:4;}

  /* the photo carries the card's overlap, not the card: the seal sits between
     them in the stack, and a negative margin-top on the card would eat the
     seal's box and drag the badge down onto the first row's text */
  .rc__shot{position:static;width:auto;
    margin:0 0 calc(-11% - 0.45 * var(--sh)) 0;}
  .rc__shot img{display:block;width:100%;height:clamp(250px,52vw,400px);object-fit:cover;
    object-position:50% 36%;}

  .rc__card{position:relative;left:auto;top:auto;width:min(92%,470px);height:auto;
    margin:0 auto;border-radius:14px;padding-bottom:clamp(72px,20vw,104px);}
  .rc__cardart{height:auto;}
  .rc__kicker{position:static;padding:clamp(20px,5vw,28px) 0 clamp(16px,4vw,22px);
    font-size:10.5px;letter-spacing:.3em;gap:12px;}
  .rc__kicker i:first-of-type,.rc__kicker i:last-of-type{width:clamp(34px,10vw,64px);}
  .rc__rows{position:static;padding:0 clamp(16px,4.5vw,26px);}
  .rc__div{display:none;}
  /* relative, not static: the tick is absolute, so a static row would hand it
     to the card and stack all three badges in the card's top-left corner */
  .rc__rows li{position:relative;min-height:0;padding:0 0 0 52px;}
  .rc__rows li+li{margin-top:16px;padding-top:18px;border-top:1px solid var(--rule);}
  .rc__tick{position:absolute;left:0;top:2px;width:36px;height:36px;padding-bottom:0;}
  .rc__rows li+li .rc__tick{top:20px;}
  .rc__rows h3{font-size:20px;margin:0 0 5px 0;}
  .rc__rows p{font-size:14.5px;line-height:1.5;margin:0;}
  .rc__note{position:absolute;left:0;right:0;top:auto;bottom:clamp(32px,9vw,46px);font-size:17px;}
  .rc__noterule{top:auto;bottom:clamp(19px,5.5vw,29px);width:64px;}

  /* the seal rides the card's top-right in the comp; stacked, it sits just above
     the card and the card rises over it, which reads the same way */
  /* the seal rides the card's top-right in the comp; stacked, it sits just above
     the card and the card rises over it. Its offset tracks the card's own edge,
     not the viewport's, or it drifts away from the card as the card stops
     growing at 470px. */
  .rc__seal{position:relative;left:auto;top:auto;align-self:flex-end;
    width:var(--sw);height:auto;z-index:6;
    filter:drop-shadow(0 2px 5px rgba(22,51,95,.17));
    margin:0 calc(max(0px,(100% - min(92%,470px))/2) + clamp(6px,2vw,16px))
      calc(var(--sh) * -0.55) 0;}

  .rc__left{position:static;width:auto;height:auto;
    padding:clamp(26px,6vw,40px) clamp(20px,5vw,40px) 0;}
  /* size follows the home page's "Straight prices, posted" (#posted-title in posted-prices.css):
     the shared clamp(40px,4.4vw,62px) holds down to 600px, then clamp(24px,6.6vw,39px) */
  .rc__head{position:static;margin-bottom:14px;white-space:normal;}
  .rc__head span{display:block;}
  .rc__head .script{display:block;}
  .rc__lead{position:static;width:auto;max-width:38ch;font-size:16px;line-height:1.62;
    margin-bottom:22px;}
  .rc__ctas{position:static;gap:10px;flex-wrap:wrap;}
  .rc__pill{height:48px;padding:0 22px;font-size:15px;}
  .rc__pill--solid,.rc__pill--ghost{width:auto;}
  .rc__frond-wrap{display:none;}
}
/* Match the home page's handover intro typography at every viewport width. */
.rc__lead{font:400 16px/1.6 var(--text);color:var(--ink-soft);}
@media(max-width:1150px){.rc__lead{font-size:15px;}}
@media (max-width:600px){.rc__head{font-size:clamp(24px,6.6vw,39px);}}