/* ==========================================================
   Ricardo case study extras (utility/ricardo.html)
   Builds on case-study.css · behaviour: js/ricardo.js
   ========================================================== */
.cs{--rc-orange:#e07a35;--rc-teal:#3f938e;--rc-red:#c62828}

/* scroll reveal (only when JS + motion allowed) */
.rc-anim .rc-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rc-anim .rc-reveal.in{opacity:1;transform:none}

/* phone-sized before/after sliders */
.cs-ba.rc-ba-phone{max-width:340px;border-radius:28px;background:#f5f5f5}
.rc-ba-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:2rem;align-items:start}
.rc-ba-row .cs-ba{margin-top:0}
.rc-ba-row h4{text-align:center;margin:0 0 .75rem}
.rc-ba-row .cs-link{text-align:center}

/* device figures: keep phones phone-sized */
.rc-phones .cs-fig .frame{background:#f5f5f5;max-width:340px;margin:0 auto}
.rc-phones .cs-fig figcaption{max-width:340px;margin-left:auto;margin-right:auto}
.rc-phones.cs-figs.three,.rc-phones.cs-figs{align-items:start}
.cs-figs.rc-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.cs-figs.rc-five .cs-fig{margin-top:0}

/* critique cards */
.rc-crit .cs-card h4{font-size:1.2rem}
.rc-crit .cs-chips span{background:#fbeee4;color:#9a4d1a}

/* questions */
.rc-q .cs-card{padding:1.5rem}
.rc-q .cs-card p{font-size:1rem}

/* ---------- auto-scrolling "today" phone ---------- */
.rc-duo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:3rem;align-items:center;margin:2.5rem 0}
.rc-duo ol{counter-reset:none;padding-left:1.4rem;margin:0}
.rc-duo ol li{font-size:1.05rem}
.rc-duo ol li b{color:var(--cs-ink);font-weight:600}

.rc-phone{position:relative;width:324px;max-width:100%;margin:0 auto;padding:12px;border-radius:44px;background:#22292c;box-shadow:0 40px 70px -40px rgba(22,14,8,.55),inset 0 0 0 2px #3b4448}
.rc-phone::before{content:"";position:absolute;left:50%;top:5px;width:70px;height:4px;margin-left:-35px;border-radius:4px;background:#11171a}
.rc-screen{position:relative;width:300px;max-width:100%;height:651px;border-radius:30px;overflow:hidden;background:#f5f5f5;font-family:Roboto,"DM Sans",Arial,sans-serif;color:#212121;-webkit-font-smoothing:antialiased}
.rc-long .rc-screen{height:600px}
.rc-long .rc-roll{position:absolute;left:0;top:0;width:100%}
.rc-long .rc-roll img{display:block;width:100%;height:auto}
.rc-long.run .rc-roll{animation:rc-roll 46s ease-in-out infinite alternate}
.rc-long:hover .rc-roll{animation-play-state:paused}
@keyframes rc-roll{0%,4%{transform:translateY(0)}96%,100%{transform:translateY(calc(-100% + 600px))}}
.rc-long.manual .rc-screen{overflow-y:auto}
.rc-meter{position:absolute;right:4px;top:10px;bottom:10px;width:4px;border-radius:4px;background:rgba(0,0,0,.08);z-index:3}
.rc-meter i{position:absolute;left:0;right:0;top:0;height:22%;border-radius:4px;background:rgba(0,0,0,.35)}
.rc-long.run .rc-meter i{animation:rc-meter 46s ease-in-out infinite alternate}
.rc-long:hover .rc-meter i{animation-play-state:paused}
@keyframes rc-meter{0%,4%{top:0}96%,100%{top:78%}}
.rc-cap{display:block;text-align:center;font-size:.9rem;color:var(--cs-gray);margin-top:1rem}

/* ---------- interactive prototype ---------- */
.rc-proto{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:3rem;align-items:start;margin-top:2.5rem;padding:2.5rem;border-radius:28px;background:linear-gradient(150deg,#fbeee4 0%,#f6f5f2 55%,#e7f1ef 100%)}
.rc-view{position:absolute;left:0;right:0;top:19px;bottom:0;display:none;flex-direction:column;background:#f5f5f5}
.rc-view.on{display:flex;animation:rc-in .35s ease}
.rc-view.back.on{animation-name:rc-in-back}
@keyframes rc-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes rc-in-back{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.rc-sb{position:absolute;left:0;right:0;top:0;height:19px;z-index:6;background:#e0e0e0;display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:0 10px;font-size:10px;color:#424242}
.rc-sb svg{width:10px;height:10px;fill:#424242}
.rc-bar{flex:0 0 45px;display:flex;align-items:center;gap:6px;padding:0 4px;background:#fff;box-shadow:0 1px 0 #e0e0e0;position:relative;z-index:2}
.rc-bar h5{flex:1;margin:0 0 0 6px;font:500 16px/1 Roboto,"DM Sans",Arial,sans-serif;color:#212121;letter-spacing:.01em}
.rc-ico{width:36px;height:36px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;color:#616161;padding:0}
.rc-ico:hover{background:rgba(0,0,0,.06)}
.rc-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.rc-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin}
.rc-scroll>img{display:block;width:100%;height:auto}
.rc-foot{flex:0 0 auto;background:#fff;box-shadow:0 -1px 0 #e0e0e0;padding:10px 12px 12px;position:relative;z-index:2}
.rc-btns{display:flex;gap:10px}
.rc-btn{flex:1;height:34px;border-radius:3px;border:1px solid var(--rc-orange);background:var(--rc-orange);color:#fff;font:500 11px/1 Roboto,"DM Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:filter .2s,transform .1s}
.rc-btn:hover{filter:brightness(1.06)}
.rc-btn:active{transform:scale(.98)}
.rc-btn.ghost{background:#fff;color:var(--rc-orange)}
.rc-legal{font-size:8.5px;line-height:1.45;color:#616161;margin:8px 0 0}
.rc-legal a{color:var(--rc-teal)}
.rc-err{display:none;gap:7px;align-items:flex-start;margin-top:9px;font-size:9.5px;line-height:1.45;color:#424242}
.rc-err.show{display:flex;animation:rc-shake .4s}
.rc-err b{color:var(--rc-red);font-weight:600}
.rc-err svg{flex:0 0 14px;width:14px;height:14px}
@keyframes rc-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.rc-fill{position:absolute;left:4%;right:4%;top:2%;height:40%;border:0;background:transparent;cursor:pointer;border-radius:8px}
.rc-fill span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;background:rgba(33,33,33,.82);color:#fff;font-size:10px;padding:5px 9px;border-radius:999px}

/* hotspots over Figma screens */
.rc-shot{position:relative}
.rc-shot>img{display:block;width:100%;height:auto}
.rc-hot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:4px;padding:0}
.rc-hot:focus-visible{outline:2px solid var(--rc-teal);outline-offset:1px}
.rc-hints .rc-hot{box-shadow:0 0 0 2px rgba(224,122,53,.75);animation:rc-pulse 1.6s ease-in-out infinite}
@keyframes rc-pulse{0%,100%{box-shadow:0 0 0 2px rgba(224,122,53,.85)}50%{box-shadow:0 0 0 5px rgba(224,122,53,.25)}}
.rc-boost-card.sel{box-shadow:0 0 0 2px var(--rc-teal),0 6px 16px -6px rgba(63,147,142,.6)}
.rc-buy{border-radius:3px;font:500 11px/1 Roboto,"DM Sans",Arial,sans-serif;letter-spacing:.06em;color:#fff;background:transparent}
.rc-buy.on{background:var(--rc-teal)}
.rc-tabs{position:absolute;left:0;right:0;bottom:0;height:48px;background:#fff;box-shadow:0 -1px 0 #e0e0e0;display:flex;z-index:2}
.rc-tabs span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;color:#757575}
.rc-tabs span.on{color:var(--rc-orange)}
.rc-tabs svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.rc-left{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:12px;background:#fff}
.rc-left h6{margin:0;font:500 16px/1.3 Roboto,"DM Sans",Arial,sans-serif;color:#212121}
.rc-left p{margin:0;font-size:12px;line-height:1.5;color:#757575}
.rc-left .rc-btn{flex:0 0 auto;width:180px}

/* menu, toast, dialogs */
.rc-menu{position:absolute;right:8px;top:24px;z-index:8;width:170px;background:#fff;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.22);padding:6px 0;transform-origin:top right;transform:scale(.85);opacity:0;pointer-events:none;transition:transform .16s ease,opacity .16s ease}
.rc-menu.open{transform:none;opacity:1;pointer-events:auto}
.rc-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;border:0;background:transparent;font:400 13px/1 Roboto,"DM Sans",Arial,sans-serif;color:#212121;cursor:pointer;text-align:left}
.rc-menu button:hover{background:#f5f5f5}
.rc-menu button:disabled{color:#bdbdbd;cursor:not-allowed;background:transparent}
.rc-menu svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 16px}
.rc-toast{position:absolute;left:50%;bottom:92px;z-index:9;transform:translate(-50%,16px);opacity:0;background:#323232;color:#fff;font-size:12px;padding:10px 16px;border-radius:20px;white-space:nowrap;pointer-events:none;transition:opacity .25s,transform .25s}
.rc-toast.show{opacity:1;transform:translate(-50%,0)}
.rc-scrim{position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.42);display:none;align-items:center;justify-content:center;padding:22px}
.rc-scrim.open{display:flex;animation:rc-fade .2s ease}
@keyframes rc-fade{from{opacity:0}to{opacity:1}}
.rc-dialog{background:#fff;border-radius:4px;padding:20px 20px 10px;box-shadow:0 18px 40px rgba(0,0,0,.3);animation:rc-pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes rc-pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.rc-dialog h6{margin:0 0 10px;font:500 17px/1.3 Roboto,"DM Sans",Arial,sans-serif;color:#212121}
.rc-dialog p{margin:0;font-size:13px;line-height:1.6;color:#616161}
.rc-dialog p b{color:#424242}
.rc-dialog .act{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
.rc-dialog .act button{border:0;background:transparent;color:var(--rc-orange);font:500 12px/1 Roboto,"DM Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:10px 8px;cursor:pointer;border-radius:3px}
.rc-dialog .act button:hover{background:#fbeee4}

/* prototype side panel */
.rc-panel h3{margin-bottom:.5rem}
.rc-panel>p{font-size:1rem}
.rc-tasks{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.6rem}
.rc-tasks li{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border-radius:16px;padding:.9rem 1rem;margin:0;font-size:1rem;line-height:1.45;border:1px solid var(--cs-line);transition:border-color .25s,background .25s}
.rc-tasks li i{font-style:normal;flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--cs-soft);color:var(--cs-ink);font-size:.75rem;font-weight:700;transition:background .25s,color .25s}
.rc-tasks li b{display:block;color:var(--cs-ink);font-weight:600}
.rc-tasks li.done{border-color:#cfe5e0;background:#f3faf8}
.rc-tasks li.done i{background:var(--cs-green);color:#fff}
.rc-progress{display:flex;gap:6px;margin:1.5rem 0 .5rem}
.rc-progress span{flex:1;height:6px;border-radius:6px;background:#e3dfd9;transition:background .3s}
.rc-progress span.on{background:var(--rc-orange)}
.rc-where{font-size:.9rem;color:var(--cs-gray)}
.rc-where b{color:var(--cs-ink)}
.rc-ctrl{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.rc-ctrl button,.rc-ctrl a{font:500 .9rem/1 "DM Sans",Raleway,sans-serif;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--cs-ink);background:#fff;color:var(--cs-ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.rc-ctrl button:hover,.rc-ctrl a:hover{background:var(--cs-ink);color:#fff}
.rc-ctrl button[aria-pressed="true"]{background:var(--cs-ink);color:#fff}

/* metrics */
.rc-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0 0}
.rc-metrics>div{border:1px dashed #cfcac3;border-radius:18px;padding:1.25rem 1.4rem}
.rc-metrics h4{margin-bottom:.3rem}
.rc-metrics p{font-size:1rem;margin:0}

/* related work: three cards */
.rc-port{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-column-gap:1.5rem}
.rc-port>div{grid-area:auto!important}

@media (max-width:991px){
  .rc-duo,.rc-proto{grid-template-columns:1fr}
  .rc-proto{padding:1.5rem}
  .rc-port{grid-template-columns:1fr!important}
  .cs-figs.rc-five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .rc-ba-row,.rc-metrics{grid-template-columns:1fr}
  .cs-figs.rc-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rc-proto{padding:1rem;border-radius:22px}
  .rc-phone{padding:10px;border-radius:40px}
}
@media (prefers-reduced-motion:reduce){
  .rc-view.on,.rc-dialog,.rc-scrim.open,.rc-err.show{animation:none}
  .rc-hints .rc-hot{animation:none}
}

.rc-proto [hidden]{display:none!important}

/* ---------- hero device mockup ---------- */
.image-wrapper.start:has(.rc-hero){height:auto;overflow:visible}
.rc-hero{--mx:0;--my:0;position:relative;width:100%;height:clamp(420px,46vw,640px);border-radius:1.75rem;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 85% 10%,#2c7c76 0%,rgba(44,124,118,0) 55%),radial-gradient(80% 70% at 10% 100%,#164a47 0%,rgba(22,74,71,0) 60%),linear-gradient(160deg,#0e2f2d 0%,#0a1f1e 100%);
  box-shadow:0 30px 80px -30px rgba(10,31,30,.55)}
.rc-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
.rc-hero-glow{position:absolute;width:46%;aspect-ratio:1;left:30%;top:28%;border-radius:50%;background:radial-gradient(circle,rgba(224,122,53,.55),rgba(224,122,53,0) 65%);filter:blur(30px);z-index:-1}
.rc-hero-tilt{position:absolute;inset:0;perspective:2200px;display:flex;align-items:center;justify-content:center}
.rc-hero-row{--w:clamp(150px,13.5vw,195px);display:flex;align-items:flex-start;gap:calc(var(--w)*.22);transform-style:preserve-3d;
  transform:translateY(6%) rotateX(calc(26deg + var(--my)*-4deg)) rotateZ(-14deg) rotateY(calc(var(--mx)*5deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rc-dev{position:relative;width:var(--w);padding:calc(var(--w)*.045);border-radius:calc(var(--w)*.17);
  background:linear-gradient(145deg,#3a3f45 0%,#16191c 45%,#2a2e33 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 calc(var(--w)*.02) #0b0c0d,
    0 2px 0 1px rgba(0,0,0,.35),-14px 26px 40px -12px rgba(0,0,0,.45);
  animation:rcFloat 7s ease-in-out infinite}
.rc-dev img{display:block;width:100%;height:auto;aspect-ratio:532/1160;object-fit:cover;border-radius:calc(var(--w)*.13)}
.rc-dev::after{content:"";position:absolute;top:calc(var(--w)*.075);left:50%;width:calc(var(--w)*.055);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#050607;box-shadow:inset 0 0 0 1.5px #22262a}
.rc-dev::before{content:"";position:absolute;right:-3px;top:22%;width:3px;height:12%;border-radius:0 3px 3px 0;background:#2a2e33}
.rc-dev.d1{margin-top:-18%}
.rc-dev.d2{margin-top:6%;animation-delay:-1.8s}
.rc-dev.d3{margin-top:-6%;animation-delay:-3.6s}
.rc-dev.d4{margin-top:16%;animation-delay:-5.4s}
@keyframes rcFloat{0%,100%{transform:translateZ(0)}50%{transform:translateZ(26px) translateY(-8px)}}
.rc-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:999px;font:500 .95rem/1.2 "DM Sans",Raleway,sans-serif;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4);animation:rcBob 6s ease-in-out infinite;
  transform:translate(calc(var(--mx)*-10px),calc(var(--my)*-10px))}
.rc-chip b{color:#ffb27a;font-weight:700}
.rc-chip .ok{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#3f938e;font-style:normal;font-size:.8rem}
.rc-chip .ok.pub{background:#e07a35}
.rc-chip.c1{left:4%;bottom:8%}
.rc-chip.c2{right:5%;top:14%;animation-delay:-2s}
.rc-chip.c3{right:6%;bottom:12%;animation-delay:-4s}
@keyframes rcBob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:767px){
  .rc-hero{height:420px;border-radius:1.25rem}
  .rc-hero-row{--w:72px;transform:translateY(4%) rotateX(26deg) rotateZ(-14deg)}
  .rc-hero{height:380px}
  .rc-chip.c3{right:4%;bottom:4%}
  .rc-chip{font-size:.8rem;padding:.55rem .8rem}
  .rc-chip.c2{display:none}
  .rc-chip.c1{left:4%;top:4%;bottom:auto}
}
@media (prefers-reduced-motion:reduce){.rc-dev,.rc-chip{animation:none}.rc-hero-row{transition:none}}

/* Review fixes: legal line was overridden by the case-study paragraph rule (18px) */
.cs .rc-foot .rc-legal{font-size:11px;line-height:1.5;color:#616161;margin:8px 0 0}
/* Status bar: keep the clock off the screen edge */
.rc-sb{padding:0 14px 0 12px}