/* ROLLI v0.9.6 — Approved Design Direction #1: Playful Film Memories.
   Product UI remains live HTML and accessible buttons; the visual is not a flattened mockup.
   Brand yellow approved by product owner: #FAEFCB. */
:root {
  --butter:#FAEFCB;
  --rolli-pastel-yellow:#FAEFCB;
  --rolli-pink:#F8CED6;
  --rolli-ink:#243447;
  --rolli-red:#BD4939;
}
html,body{background:#fffefa;color:var(--rolli-ink)}
.app-topbar.site-nav{
  background:#fffefa;
  box-shadow:0 4px 22px #442f2112;
  border-bottom:1px solid #f3e9dd;
  min-height:76px;
  gap:20px;
  padding-inline:clamp(16px,4.4vw,72px);
}
.app-topbar .wordmark{font-size:clamp(33px,3vw,41px)}
.app-topbar-label{font-size:9px;letter-spacing:1.2px;color:#a0888a}
.rolli-discover-nav{display:flex;align-items:center;gap:clamp(13px,1.8vw,30px);margin-left:auto;white-space:nowrap}
.rolli-discover-nav a{font:750 13px/1.3 Arial,sans-serif;color:#314154;text-decoration:none;padding:9px 3px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.rolli-discover-nav a:hover,.rolli-discover-nav a:focus-visible{color:var(--rolli-red);border-bottom-color:#f0a2a7}
.app-topbar .nav-actions{gap:clamp(5px,.9vw,12px)}
.app-topbar .nav-link{font-weight:750;font-size:12px}
.app-topbar .nav-create{background:var(--rolli-red);border-radius:19px;min-height:47px;padding:12px 17px}
.app-preview-tag{font-size:9px}
.rolli-featured{
  max-width:1510px;
  grid-template-columns:48% 52%;
  min-height:630px;
  padding:0 20px;
  margin:23px auto 21px;
}
.feature-copy{
  background:#FAEFCB;
  padding:clamp(37px,4.9vw,78px) clamp(30px,5.6vw,90px);
  border-radius:30px 0 0 30px;
}
.feature-copy::before{color:#e3b975;opacity:.28}
.feature-eyebrow,.feature-label{color:#b55348;letter-spacing:1.5px}
.feature-eyebrow{font-size:12px}
.feature-copy h1{
  max-width:620px;
  font-size:clamp(51px,5.2vw,84px);
  line-height:1.018;
  letter-spacing:-3.4px;
  margin:24px 0 24px;
  color:#213042;
}
.feature-copy h1 em{color:#bb4439}
.feature-copy>p{font-size:clamp(15px,1.2vw,18px);line-height:1.64;color:#526071;max-width:480px}
.feature-actions{gap:13px;margin-top:26px}
.feature-actions .btn{min-height:57px;padding:15px 23px;font-size:14px}
.btn.btn-coral{border-radius:18px;box-shadow:0 10px 25px #bd493924}
.btn.btn-outline{border-radius:18px;border:1px solid #c6bdac;background:#fffefa}
.feature-proof{color:#464654;gap:10px 19px;margin-top:25px;font-size:12px}
.feature-note{margin-top:43px;padding-top:20px;border-color:#d9b7a0;color:#a77562}
.feature-art{
  background:#F8CED6;
  border-radius:0 30px 30px 0;
  min-height:630px;
}
.feature-art::before{background:#f2b6c2;opacity:.48}
.feature-art::after{background:#d7e1e3;opacity:.8}
.art-phone{
  left:29%;top:9%;height:80%;width:46%;max-width:327px;
  transform:rotate(-5deg);
  border:8px solid #223343;
  border-radius:41px;
  box-shadow:10px 13px 0 #dba6b0,0 29px 38px #40303c3b;
}
.art-phone-bar{height:51px;padding:0 14px}
.art-phone-bar strong{font-size:25px}
.art-phone-view img{filter:saturate(1.05) contrast(1.05)}
.art-phone-bottom{height:75px}
.art-polaroid{max-width:228px;width:34%;padding:11px 11px 13px;box-shadow:0 18px 28px #62445647}
.art-photo-left{left:7%;top:7%;transform:rotate(-13deg)}
.art-photo-right{right:0%;bottom:4%;transform:rotate(12deg)}
.art-polaroid span{font-size:17px}
.art-doodle{right:7%;top:6%;font-size:26px;font-style:italic}
.art-sticker{top:38%;right:3%;background:#b7e1cd;border-color:#ffffff}
.art-tape{top:3%;left:17%;background:#f2e1e9c9;mask-image:repeating-linear-gradient(95deg,#000 0 7px,#0008 7px 12px)}
.art-star{font-size:108px;bottom:4%;left:12%;color:#fff2a5}
.art-heart,.art-sparkle,.art-flower,.art-smile{position:absolute;pointer-events:none;user-select:none;z-index:3}
.art-heart{color:#cf5d6d;font:58px Georgia,serif;left:5%;top:47%;transform:rotate(-12deg)}
.art-sparkle{color:#f4c76a;font:70px Georgia,serif;left:10%;top:12%;transform:rotate(13deg)}
.art-flower{color:#e890a5;font:62px Georgia,serif;left:19%;bottom:8%;transform:rotate(-18deg)}
.art-smile{color:#c77845;font:61px Georgia,serif;left:4%;bottom:8%;transform:rotate(-10deg)}
.rolli-ribbon{max-width:1430px;color:#b65360;border-top-color:#e8d8c9;border-bottom-color:#e8d8c9}
.rolli-how,.rolli-film-gallery{max-width:1410px}
.card-yellow .step-art{background:#FAEFCB}
.rolli-step-card{border-radius:25px;box-shadow:0 12px 29px #6d554214}
.rolli-step-card:hover{transform:translateY(-3px);box-shadow:0 17px 30px #6d55421a}
.rolli-film-gallery .film-look-card{border:1px solid #f0e6df}
.rolli-last-cta{max-width:1360px;background:#ffe6eb}
/* Legibility and usable input sizes on all actual in-app screens. */
body:not(.rolli-camera-mode) .app-screen .surface,
body:not(.rolli-camera-mode) .app-screen .event-card{border:1px solid #e7deda}
body:not(.rolli-camera-mode) .app-screen input,
body:not(.rolli-camera-mode) .app-screen select,
body:not(.rolli-camera-mode) .app-screen textarea{max-width:100%;min-width:0}
.app-topbar a:focus-visible,.app-topbar button:focus-visible,
.feature-actions button:focus-visible,.rolli-last-cta button:focus-visible{outline:3px solid #ba5148;outline-offset:3px}
@media(max-width:1360px){
  .rolli-discover-nav{gap:12px}
  .app-topbar-label{display:none}
  .feature-copy h1{font-size:clamp(50px,5.5vw,72px)}
}
@media(max-width:1070px){
  .rolli-discover-nav{display:none}
  .rolli-featured{min-height:540px}
  .feature-art{min-height:540px}
  .feature-copy h1{font-size:clamp(45px,5.5vw,63px)}
  .art-phone{max-width:268px}
}
@media(max-width:800px){
  .rolli-featured{display:flex;flex-direction:column;min-height:0;padding-inline:15px;margin-top:13px}
  .feature-copy{border-radius:27px 27px 0 0;padding:34px 29px 30px}
  .feature-art{border-radius:0 0 27px 27px;min-height:460px}
  .feature-copy h1{font-size:clamp(44px,8.4vw,65px)}
  .art-phone{height:78%;top:10%;max-width:230px}
  .rolli-step-card:hover{transform:none}
}
@media(max-width:600px){
  .app-topbar.site-nav{padding-inline:13px;min-height:62px}
  .feature-copy{padding:31px 24px 25px}
  .feature-copy h1{font-size:clamp(39px,10.5vw,59px);letter-spacing:-1.9px;margin:16px 0 17px}
  .feature-copy>p{font-size:13px;line-height:1.62}
  .feature-actions{gap:8px;margin-top:21px}
  .feature-actions .btn{font-size:11px;min-height:49px;padding:12px 7px}
  .feature-proof{margin-top:20px;gap:8px 12px;font-size:10px}
  .feature-note{margin-top:23px;padding-top:13px}
  .feature-art{height:370px;min-height:370px}
  .art-phone{width:44%;max-width:195px;min-width:150px;height:321px;left:29%;top:7%;border-width:5px;border-radius:25px}
  .art-phone-bar{height:34px;padding:0 7px}
  .art-phone-bar strong{font-size:19px}
  .art-phone-bottom{height:53px}
  .art-polaroid{width:35%;padding:6px 6px 11px}
  .art-polaroid span{font-size:11px;margin-top:5px}
  .art-photo-left{left:1%;top:8%}
  .art-photo-right{right:0;bottom:9%}
  .art-doodle{font-size:15px;right:4%}
  .art-heart{font-size:34px}
  .art-sparkle{font-size:42px;top:10%;left:7%}
  .art-flower{font-size:37px;bottom:6%;left:13%}
  .art-smile{font-size:38px;bottom:3%;left:2%}
  .art-star{font-size:50px;bottom:7%}
  .art-sticker{width:64px;height:64px;font-size:10px;right:1%;top:38%}
  .art-tape{width:75px;height:18px}
  .rolli-ribbon{margin-bottom:33px}
}
@media(prefers-reduced-motion:reduce){.rolli-discover-nav a,.rolli-step-card{transition:none!important}}

/* Keep the illustration disclosure fully readable on desktop and mobile. */
.art-disclaimer{z-index:8;right:auto;left:14px;bottom:12px;background:#fff7e6cf;color:#754c54;padding:5px 7px;border-radius:6px;letter-spacing:.2px}
@media(max-width:600px){.art-disclaimer{left:7px;bottom:6px;font-size:6px;padding:3px 5px}}