/* Rabbit Tape Launch case study – story sections (site language: Manrope, navy, near-white) */
.rl-wrap{max-width:1320px;margin:0 auto;padding:clamp(56px,6vw,96px) clamp(20px,5vw,64px)}
.rl-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin:0 auto clamp(40px,4.5vw,56px);max-width:1000px}
.rl-label{font:600 12px/16px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#56657A}
html.site-typography body .rl-head h2.ty-stitle{margin:0;color:#111111}
html.site-typography body .rl-sub{margin:0;max-width:640px;font-size:18px!important;line-height:1.6!important;color:#4D5B70}
.rl-cap{display:block;font:600 12px/16px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#56657A}
html.site-typography body .rl-desc{margin:0;font-size:16px!important;line-height:1.6!important;color:#4D5B70}
.rl-card{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--site-shadow-md,0 5px 18px rgba(23,52,92,.055))}
.rl-card img{display:block;width:100%;height:100%;object-fit:cover}
.rl-section figure{margin:0}
.rl-fig{display:flex;flex-direction:column;gap:16px}
.rl-fig figcaption{display:flex;flex-direction:column;gap:10px}

/* 01 received -> made */
.rl-made{display:grid;grid-template-columns:1fr 48px 1fr;grid-template-rows:auto auto;column-gap:24px;row-gap:16px}
.rl-made>.rl-fig{display:contents}
.rl-made>.rl-fig:first-child>.rl-card{grid-column:1;grid-row:1}
.rl-made>.rl-fig:first-child>figcaption{grid-column:1;grid-row:2}
.rl-made>.rl-fig:last-child>.rl-card{grid-column:3;grid-row:1}
.rl-made>.rl-fig:last-child>figcaption{grid-column:3;grid-row:2}
.rl-made__mid{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:center}
.rl-made .rl-card{aspect-ratio:1920/1000}
.rl-received{background:#F1F4F8;display:grid;grid-template-columns:38% 1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:10px;padding:14px 18px 18px;box-sizing:border-box}
.rl-received__logo{grid-column:1/-1;width:52px!important;height:auto!important;object-fit:contain!important}
.rl-received__render{grid-column:1;grid-row:2/4;border-radius:8px}
.rl-received img:not(.rl-received__logo){border-radius:8px;min-height:0;min-width:0}
.rl-arrow{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:#fff;border:1px solid rgba(23,52,92,.18);color:#17345C}

/* 02 identity */
.rl-four{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.rl-four .rl-card{aspect-ratio:274/460;background:#F4F6F9;box-shadow:none}
.rl-grid{display:grid;gap:12px;padding:16px;height:100%;box-sizing:border-box}
.rl-grid--2x3{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
.rl-grid--2x2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.rl-grid img{border-radius:8px;min-height:0;object-fit:contain}
.rl-tile{position:relative;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}
.rl-tile img{object-fit:contain;width:82%;height:70%}
.rl-tile--cover img{object-fit:cover;width:100%;height:100%}
.rl-tile span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.9);font:600 11px/1.2 'Manrope',sans-serif;color:#17345C}
.rl-system{display:flex;align-items:center;gap:40px;margin-top:56px;padding:28px 32px;border-radius:16px;background:var(--site-bg,#FAFBFD);border:1px solid #E1E8F1}
.rl-swatches{display:flex;gap:16px;flex-wrap:wrap}
.rl-swatch{display:flex;flex-direction:column;gap:6px;font:600 13px/1.3 'Manrope',sans-serif;color:#111}
.rl-swatch i{display:block;width:72px;height:48px;border-radius:10px;border:1px solid rgba(17,17,17,.08)}
.rl-swatch small{font-weight:400;font-size:12px;color:#56657A}
.rl-divider{width:1px;align-self:stretch;background:#E1E8F1}
.rl-type{display:flex;flex-direction:column;gap:12px}
.rl-type div{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
html.site-typography body .rl-type .rl-oswald{font-family:'Oswald',sans-serif!important;font-weight:700;font-size:30px;line-height:1.1;color:#89100D;letter-spacing:.01em}
html.site-typography body .rl-type .rl-opensans{font-family:'Open Sans',sans-serif!important;font-size:22px;line-height:1.3;color:#3B0200}
.rl-type small{font:400 13px/1.3 'Manrope',sans-serif;color:#56657A}

/* 03 timeline */
.rl-timeline{display:flex;flex-direction:column}
.rl-phase{display:grid;grid-template-columns:20px 210px minmax(0,1fr);gap:32px}
.rl-phase__marker{position:relative;display:flex;justify-content:center}
.rl-phase__marker::before{content:"";width:16px;height:16px;border-radius:50%;background:#17345C;position:relative;z-index:1}
.rl-phase__marker::after{content:"";position:absolute;top:16px;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:rgba(23,52,92,.18)}
.rl-phase:last-child .rl-phase__marker::after{display:none}
.rl-phase__text{display:flex;flex-direction:column;gap:10px}
.rl-phase__when{font:600 12px/16px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#CC140B}
html.site-typography body .rl-phase__text h3{margin:0;font-size:28px!important;line-height:1.2!important;letter-spacing:-.02em!important}
.rl-assets{display:flex;flex-wrap:wrap;gap:20px;padding-bottom:72px;align-items:flex-start;min-width:0}
.rl-phase:last-child .rl-assets{padding-bottom:0}
.rl-asset{display:flex;flex-direction:column;gap:12px;flex:0 1 auto;max-width:100%;min-width:0}
.rl-asset .rl-card{max-width:100%;box-sizing:border-box}
.rl-asset .rl-card{height:400px}
.rl-asset--45 .rl-card{width:320px}
.rl-asset--916 .rl-card{width:225px}
.rl-asset--email .rl-card{width:210px;background:#F1EEEA}
.rl-asset--desk .rl-card{width:380px;background:#F1EEEA}
.rl-asset--mob .rl-card{width:190px;background:#F1EEEA}
.rl-asset--email .rl-card,.rl-asset--desk .rl-card,.rl-asset--mob .rl-card{overflow-y:auto;scrollbar-width:thin}
.rl-asset--email img,.rl-asset--desk img,.rl-asset--mob img{height:auto;object-fit:contain;object-position:top}
.rl-asset .rl-cap{font-size:12px}
.rl-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#EEF2F7;border:1.5px dashed #9AA8BC;box-shadow:none;text-align:center;padding:0 20px}
.rl-placeholder b{font:600 12px/16px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#56657A}
.rl-placeholder span{font:400 14px/1.5 'Manrope',sans-serif;color:#56657A}

/* 04 landing page */
.rl-flow{display:grid;grid-template-columns:1fr 560px;gap:72px;align-items:start}
.rl-list{list-style:none;margin:0;padding:0}
.rl-list li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px 0;border-top:1px solid #E1E8F1}
.rl-list li:last-child{border-bottom:1px solid #E1E8F1}
.rl-num{font:600 12px/2 'Manrope',sans-serif;letter-spacing:.12em;color:#56657A}
.rl-list .rl-kicker{display:block;font:600 12px/16px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#CC140B;margin-bottom:6px}
html.site-typography body .rl-list h3{margin:0 0 6px;font-size:24px!important;line-height:1.28!important}
.rl-page{position:relative;height:1000px;border-radius:16px;overflow:hidden;box-shadow:var(--site-shadow-lg,0 8px 26px rgba(23,52,92,.075));background:#FFE5CB}
.rl-page img{width:100%;height:auto;display:block}
.rl-page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}
.rl-page__btn{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 20px;border-radius:999px;background:#fff;border:1px solid rgba(23,52,92,.28);font:600 14px/1 'Manrope',sans-serif;color:#17345C;cursor:pointer}
.rl-page__btn:hover{background:#17345C;color:#fff}
.rl-controls{display:grid;grid-template-columns:560px 1fr;gap:72px;align-items:center;margin-top:96px}
.rl-controls .rl-card{aspect-ratio:560/566}
html.site-typography body .rl-controls h3.rl-controls__title{margin:0 0 10px;font-size:32px!important;line-height:1.2!important;letter-spacing:-.02em!important}
.rl-controls .rl-list{margin-top:24px}
.rl-controls .rl-list li{padding:20px 0}
.rl-controls .rl-num{color:#CC140B}
html.site-typography body .rl-controls .rl-list h3{font-size:22px!important;margin:0 0 4px}

/* closing */
.rl-closing{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
html.site-typography body .rl-closing h2{margin:0}
.rl-closing p{max-width:640px}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .rl-four{grid-template-columns:repeat(2,1fr);gap:32px 24px}
  .rl-four .rl-card{aspect-ratio:4/5}
  .rl-phase{grid-template-columns:20px 1fr;gap:16px 24px}
  .rl-phase__text{grid-column:2}
  .rl-assets{grid-column:2;padding-bottom:64px}
  .rl-phase__marker{grid-row:1/3}
  .rl-flow,.rl-controls{grid-template-columns:1fr;gap:48px}
  .rl-page{height:720px;max-width:560px;width:100%;margin:0 auto}
  .rl-controls .rl-card{max-width:560px;width:100%;margin:0 auto}
  .rl-system{flex-direction:column;align-items:flex-start;gap:24px}
  .rl-divider{display:none}
}

/* Preserve the complete artwork and keep short final lines together. */
html.site-typography body:has(.rl-section) :is(h1,h2,h3){text-wrap:balance}
html.site-typography body:has(.rl-section) p{text-wrap:pretty}
html.site-typography body .rl-list p{text-wrap:balance}
html.site-typography body .rl-phase__text h3{font-size:24px!important}
.rl-received__render{object-fit:contain!important}
.rl-four>.rl-fig:last-child>.rl-card>img{object-fit:contain}
.rl-four .rl-grid{min-width:0;min-height:0}
.rl-phase__text{min-width:0}
.rl-asset--45 .rl-card{height:auto;aspect-ratio:4/5}
.rl-asset--916 .rl-card{height:auto;aspect-ratio:9/16}
@media (min-width:1200px){
  html.site-typography.marketing-case body:has(.rl-section) [data-r="cs-herotext"] h1.ty-hero{font-size:62px!important;white-space:nowrap!important}
  body:has(.rl-section) [data-r="cs-herotext"] .ty-hero br{display:none!important}
}
@media (max-width:767px){
  .rl-made{display:flex;flex-direction:column;gap:20px}
  .rl-made>.rl-fig{display:flex}
  .rl-made__mid .rl-arrow{transform:rotate(90deg)}
  .rl-four{grid-template-columns:1fr}
  .rl-four .rl-card{aspect-ratio:4/5}
  .rl-asset .rl-card{height:320px}
  .rl-asset--45 .rl-card{width:256px}
  .rl-asset--916 .rl-card{width:180px}
  .rl-asset--email .rl-card{width:170px}
  .rl-asset--desk .rl-card{width:300px}
  .rl-asset--mob .rl-card{width:152px}
  .rl-page{height:560px}
  html.site-typography body .rl-phase__text h3{font-size:24px!important}
  .rl-asset--45 .rl-card,.rl-asset--916 .rl-card{height:auto}
}

/* Match Figma: images fill their grid cells, phase labels on one line */
.rl-four>.rl-fig:nth-child(1) .rl-grid img{object-fit:cover;width:100%;height:100%}
.rl-four>.rl-fig:nth-child(2) .rl-grid{grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch}
.rl-four>.rl-fig:nth-child(2) .rl-grid img{width:100%;height:100%;object-fit:cover}
@media (min-width:1200px){.rl-phase{grid-template-columns:20px 250px minmax(0,1fr)}}
.rl-tile--ribbon img{width:175%!important;height:auto!important;max-width:none;flex:none;transform:rotate(-58deg);object-fit:contain}
/* 04 page preview: fade the whole card out, no visible bottom edge, less dead space */
.rl-page-wrap{display:flex;flex-direction:column;align-items:center}
.rl-page{height:780px;width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.rl-page::after{display:none}
.rl-page-wrap .rl-page__btn{position:relative;left:auto;bottom:auto;transform:none;margin-top:-56px}
.rl-controls{margin-top:72px}
@media (max-width:1199px){.rl-page-wrap{max-width:560px;width:100%;margin:0 auto}.rl-page{height:640px}}
@media (max-width:767px){.rl-page{height:520px}}
/* separate the page preview from the controls block */
.rl-controls{margin-top:clamp(56px,6vw,88px);padding-top:clamp(56px,6vw,88px);border-top:1px solid #E1E8F1}
.rl-asset[hidden]{display:none!important}
.rl-asset--hidden{display:none!important}