/* Case study page — open, editorial layout in the style of the Framer cases. Built on mayara-ds. */

.case-page{padding-bottom:160px}
.case-col{max-width:760px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}

/* Top bar */
.case-nav{max-width:1120px;margin:0 auto;height:72px;padding:0 clamp(16px,4vw,32px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.case-back{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:500;color:var(--neutral-700);text-decoration:none;padding:8px 10px;margin-left:-10px;border-radius:var(--radius-sm)}
.case-back:hover{background:var(--color-border);color:var(--color-text)}
.case-name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--color-text);text-decoration:none}
.case-name:hover{color:var(--color-text)}

/* Hero */
.case-hero{padding:clamp(40px,8vh,88px) 0 40px;display:flex;flex-direction:column;gap:24px}
.case-kicker{text-align:center}
.case-title{margin:0 auto;max-width:900px;text-align:center;font-family:var(--font-display);font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.06;text-wrap:balance;padding:0 clamp(16px,4vw,32px)}
.case-intro{display:flex;flex-direction:column;gap:14px}
.case-intro p,.case-sec p{margin:0;font-size:17px;line-height:1.65;color:var(--color-text);text-wrap:pretty}
.case-intro strong,.case-sec strong{font-weight:700}
.case-facts{display:flex;flex-wrap:wrap;gap:12px 40px;padding-top:8px}
.case-fact{display:flex;flex-direction:column;gap:4px}
.case-fact b{font-size:var(--text-sm);font-weight:500}

/* Screens band: the sky moves from morning to night across the four phones */
.case-band{max-width:1200px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px)}
.case-band-inner{border-radius:var(--radius-lg);overflow:hidden;padding:clamp(28px,5vw,56px) clamp(16px,4vw,48px);
  background:linear-gradient(100deg,#9CC8E4 0%,#E8C66A 40%,#3A2E6E 72%,#16123A 100%);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,28px);align-items:center}
.case-phone{margin:0;border-radius:clamp(18px,2.6vw,32px);padding:clamp(4px,.5vw,7px);background:#141217;box-shadow:0 2px 4px rgba(20,18,23,.2),0 18px 40px -16px rgba(20,18,23,.55)}
.case-phone img{display:block;width:100%;aspect-ratio:1056/2250;object-fit:cover;object-position:top;border-radius:clamp(14px,2.2vw,26px)}
.case-phone:nth-child(even){transform:translateY(clamp(10px,2vw,28px))}
.case-caption{margin-top:12px;text-align:center;font-size:13px;color:var(--color-text-subtle)}

/* Living day: the Ritual home screen moving through 24 hours */
.day-band{position:relative;max-width:1200px;margin:24px auto 0;padding:clamp(36px,6vw,64px) clamp(16px,4vw,48px) 24px;border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:24px}
.day-bg{position:absolute;inset:0;opacity:.55;filter:saturate(.9)}
.day-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,246,244,.35),rgba(247,246,244,0) 40%)}
.day-phone{position:relative;margin:0;width:min(320px,72vw);aspect-ratio:360/760;border-radius:44px;padding:8px;background:#141217;
  box-shadow:0 2px 4px rgba(20,18,23,.2),0 30px 60px -24px rgba(20,18,23,.6)}
.day-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;container-type:inline-size;color:#1a1410;font-family:'DM Sans',sans-serif;transition:color .6s ease}
.day-screen.is-dark{color:#f4eef8}
.day-sky,.day-stars{position:absolute;inset:0}
.day-stars{pointer-events:none;transition:opacity 1s linear}
.day-stars i{position:absolute;border-radius:50%;background:#fff;opacity:var(--base);animation:star-twinkle ease-in-out infinite}
@keyframes star-twinkle{0%,100%{opacity:var(--base);transform:scale(1)}50%{opacity:calc(var(--base) * .2);transform:scale(.65)}}
.day-ui{position:relative;height:100%;display:flex;flex-direction:column;padding:0 5cqw}
.day-status{display:flex;justify-content:space-between;align-items:center;height:9cqw;font-size:3.4cqw;font-weight:500;opacity:.85}
.day-icons{display:flex;gap:1.2cqw}.day-icons i{width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:currentColor;opacity:.8}
.day-top{display:flex;justify-content:space-between;align-items:center;margin-top:3cqw;font-size:3.6cqw;opacity:.62}
.day-menu{display:flex;flex-direction:column;gap:1.6cqw}.day-menu i{width:5.6cqw;height:.45cqw;border-radius:1cqw;background:currentColor}
.day-greet{margin:6cqw 0 6cqw;font-family:'Syne',sans-serif;font-weight:700;font-size:12.2cqw;line-height:1.04;letter-spacing:-.02em;min-height:2.08em}
.day-greet.is-in{animation:greet-in .6s ease-out both}
@keyframes greet-in{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}
.day-row{display:flex;align-items:center;gap:4cqw;margin-bottom:3.3cqw;padding:3.9cqw 5cqw;border-radius:3.9cqw;background:rgba(255,255,255,.40);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .6s ease}
.day-screen.is-dark .day-row{background:rgba(255,255,255,.07)}
.day-row>div{flex:1;min-width:0;line-height:1.3}
.day-row b{font-size:4.4cqw;font-weight:700}
.day-row span{font-size:3.9cqw;opacity:.62}
.day-row small{display:block;margin-top:.8cqw;font-size:3.6cqw;opacity:.62}
.day-arrow{font-size:5cqw}
.day-notes{margin:4cqw 0 0;font-size:4.4cqw;font-weight:700}
.day-fab{position:absolute;right:5cqw;bottom:7cqw;width:15cqw;height:15cqw;border-radius:50%;display:grid;place-items:center;font-size:7cqw;background:#221814;color:#fff;transition:background .6s,color .6s}
.day-screen.is-dark .day-fab{background:#fff;color:#221814}
.day-controls{position:relative;display:flex;align-items:center;gap:12px;width:min(420px,100%);padding:8px 14px 8px 8px;background:rgba(251,250,249,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.day-play{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:var(--radius-md);background:var(--color-border);color:var(--color-text);cursor:pointer}
.day-play:hover{background:var(--neutral-300)}
.day-slider{flex:1;accent-color:var(--color-primary)}
.day-clock{flex:none;width:44px;text-align:right;font-size:var(--text-sm);font-weight:500}
@media (prefers-reduced-motion:reduce){.day-stars i,.day-greet.is-in{animation:none}}

/* Sections */
.case-sec{padding-top:72px;display:flex;flex-direction:column;gap:16px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sec-head h2{margin:0;font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.sec-dots{display:flex;align-items:center;gap:5px;flex:none}
.sec-dots i{width:6px;height:6px;border-radius:3px;background:var(--neutral-300)}
.sec-dots i.on{width:22px;background:var(--color-primary)}

/* Decisions: an open list, no cards */
.decisions{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.decisions li{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--color-border-strong)}
.decisions .num{font-size:13px;font-weight:500;color:var(--color-text-subtle);font-variant-numeric:tabular-nums}
.decisions b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.decisions p{font-size:15px !important;line-height:1.6 !important;color:var(--color-text-muted) !important}

/* One callout, like the Framer cases */
.callout{display:flex;gap:16px;margin-top:8px;padding:22px 24px;border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface)}
.callout svg{flex:none;color:var(--color-primary);margin-top:3px}
.callout p{font-size:17px !important;font-weight:500}

.case-link{display:inline-flex;align-items:center;gap:6px;font-weight:500;text-decoration:none}

/* Screens band: a row of phones on the case's own backdrop (set --band on the element) */
.shots-band{max-width:1200px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px)}
.shots-inner{border-radius:var(--radius-lg);overflow:hidden;padding:clamp(28px,5vw,56px) clamp(16px,4vw,48px);background:var(--band);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,28px);align-items:center}
.shot{margin:0;border-radius:clamp(18px,2.6vw,32px);padding:clamp(4px,.5vw,7px);background:#141217;box-shadow:0 2px 4px rgba(20,18,23,.2),0 18px 40px -16px rgba(20,18,23,.55)}
.shot img{display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:clamp(14px,2.2vw,26px)}
.shot:nth-child(even){transform:translateY(clamp(10px,2vw,28px))}

/* Research numbers: an open row, no cards */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:8px}
.stat{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--color-border-strong)}
.stat-num{font-family:var(--font-display);font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--color-text)}
.stat p{font-size:15px !important;line-height:1.55 !important;color:var(--color-text-muted) !important}
.quote{margin:8px 0 0;padding:4px 0 4px 20px;border-left:2px solid var(--color-primary);font-size:20px;line-height:1.5;font-style:italic;color:var(--color-text)}
.quote span{display:block;margin-top:6px;font-size:14px;font-style:normal;color:var(--color-text-subtle)}

/* Flow stepper: one phone, a step list and prev/next */
.flow{max-width:1040px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px);display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.flow-phone{margin:0;border-radius:36px;padding:7px;background:#141217;box-shadow:0 2px 4px rgba(20,18,23,.2),0 24px 48px -20px rgba(20,18,23,.5)}
.flow-phone img{display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:30px}
.flow-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.flow-step{display:flex;gap:16px;width:100%;padding:16px 0;border:0;border-top:1px solid var(--color-border-strong);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.flow-step .num{flex:none;width:28px;font-size:13px;font-weight:500;color:var(--color-text-subtle);font-variant-numeric:tabular-nums;padding-top:2px}
.flow-step b{display:block;font-size:17px;font-weight:700}
.flow-step span.why{display:block;margin-top:4px;font-size:15px;line-height:1.55;color:var(--color-text-muted)}
.flow-step:not([aria-current="true"]) b{color:var(--color-text-muted);font-weight:500}
.flow-step:not([aria-current="true"]) span.why{display:none}
.flow-step[aria-current="true"] .num{color:var(--color-primary-text)}
.flow-nav{display:flex;gap:8px;margin-top:16px}

/* Live prototype in a phone: the 390×844 screen is scaled to fit the bezel */
.proto-phone{position:relative;width:min(320px,80vw);aspect-ratio:390/844;border-radius:40px;padding:7px;background:#141217;box-shadow:0 2px 4px rgba(20,18,23,.2),0 24px 48px -20px rgba(20,18,23,.5);overflow:hidden}
.proto-phone iframe{position:absolute;left:7px;top:7px;width:390px;height:844px;border:0;border-radius:42px;transform-origin:0 0} /* scale set by proto-steps.js */

@media (max-width:760px){
  .shots-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot:nth-child(even){transform:none}
  .stats{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr);justify-items:center}
  .flow-phone{width:min(280px,80vw)}
}

/* Interactive prototype from Claude Design, embedded at the end */
.proto-band{max-width:1200px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px);display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.proto-frame{display:block;width:100%;aspect-ratio:4/3;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#faf7f3;box-shadow:var(--shadow-sm)}
.proto-open{font-size:var(--text-sm)}

.contact-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ---- Ask Íris: a small launcher in the corner; the chat window opens only on click ---- */
.ask-dock{position:fixed;right:24px;bottom:24px;z-index:30}
.ask-launcher{display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.ask-launcher[hidden]{display:none}
.ask-bubble{position:relative;padding:9px 14px;background:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  font-size:var(--text-sm);font-weight:500;color:var(--color-text);white-space:nowrap;transition:transform var(--dur-base) var(--ease-out)}
.ask-bubble::after{content:"";position:absolute;right:22px;bottom:-6px;width:10px;height:10px;background:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-left:0;border-top:0;transform:rotate(45deg)} /* tail points down at Íris */
.ask-launcher:hover .ask-bubble,.ask-launcher:focus-visible .ask-bubble{transform:translateY(-2px)}
.ask-launcher:focus-visible{outline:none}
.ask-launcher:focus-visible .iris-face{box-shadow:var(--focus-ring),var(--shadow-md)}

.iris-face{flex:none;position:relative;width:40px;height:40px;border-radius:var(--radius-md);overflow:hidden;background:#F2B48C}
.iris-face video,.iris-face img{position:absolute;width:186px;height:auto;left:-40px;top:-14px;max-width:none} /* centered on her face */
.iris-face-lg{width:56px;height:56px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.iris-face-lg video{width:260px;left:-56px;top:-19px}

.ask-window{width:min(380px,calc(100vw - 32px));height:min(520px,calc(100vh - 48px));display:flex;flex-direction:column;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  transform-origin:100% 100%;animation:window-in .22s var(--ease-out) both}
.ask-window[hidden]{display:none}
@keyframes window-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ask-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-bottom:1px solid var(--color-border)}
.ask-head-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ask-head-copy b{font-size:15px;font-weight:700}
.ask-head-copy span{font-size:12px;color:var(--color-text-subtle)}
.ask-close{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:var(--radius-sm);background:none;color:var(--neutral-700);cursor:pointer}
.ask-close:hover{background:var(--color-border);color:var(--color-text)}
.ask-panel{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:16px}
.ask-chips{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ask-chip{font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--neutral-700);min-height:32px;padding:6px 12px;text-align:left;background:transparent;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer}
.ask-chip:hover{background:var(--color-surface-raised);color:var(--color-text)}
.ask-q{align-self:flex-end;max-width:85%;margin:0;padding:8px 12px;background:var(--color-border);border-radius:12px 12px 4px 12px;font-size:14px;line-height:1.5}
.ask-a{margin:0;font-size:15px;line-height:1.6;color:var(--color-text);white-space:pre-wrap}
.ask-a.is-thinking{color:var(--color-text-subtle)}
.ask-bar{display:flex;align-items:center;gap:8px;margin:0 12px 12px;height:52px;padding:0 8px 0 14px;background:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);transition:border-color var(--dur-fast),box-shadow var(--dur-base)}
.ask-bar:focus-within{border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.ask-input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:15px var(--font-sans);color:var(--color-text);padding:0}
.ask-input::placeholder{color:var(--color-placeholder)}

@media (max-width:760px){
  .case-band-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-phone:nth-child(even){transform:none}
  .decisions{grid-template-columns:minmax(0,1fr)}
  .ask-dock{right:16px;bottom:16px}
  .ask-bubble{display:none}
}
@media (prefers-reduced-motion:reduce){.ask-window{animation:none}.ask-bubble{transition:none}}

/* One wide image on a colored band (a row of screens, a character) */
.wide-band{max-width:1200px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px)}
.wide-band figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--band)}
.wide-band img{display:block;width:100%;height:auto}
.case-figure{margin:8px 0 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--band,var(--color-surface));border:1px solid var(--color-border)}
.case-figure img{display:block;width:100%;height:auto}

/* Before/after switch next to a prototype */
.mode-switch{display:inline-flex;gap:4px;padding:4px;margin-bottom:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.mode-switch button{min-height:36px;padding:0 14px;border:0;border-radius:var(--radius-md);background:none;font:500 var(--text-sm) var(--font-sans);color:var(--color-text-muted);cursor:pointer}
.mode-switch button[aria-pressed="true"]{background:var(--color-text);color:var(--color-surface)}
.mode-switch button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.mode-note{margin:0 0 8px;font-size:var(--text-sm);color:var(--color-text-subtle)}
.flow[data-mode="before"] .when-after,.flow:not([data-mode="before"]) .when-before{display:none}
.case-figure.is-narrow{max-width:420px;margin-inline:auto}
.case-figure figcaption{padding:10px 14px;font-size:13px;color:var(--color-text-subtle);background:var(--color-surface);border-top:1px solid var(--color-border)}

/* Flow demo: one centered phone that walks through the journey on its own (cases/flow-demo.js).
   Screens push in like iOS, a soft ring marks each tap, and the steps below follow along. */
.demo-inner{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:clamp(36px,6vw,64px) 16px clamp(28px,4vw,40px);background:var(--band);
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,28px)}
.demo-phone{margin:0;width:min(280px,64vw);border-radius:40px;padding:7px;background:#141217;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.3),0 30px 60px -24px rgba(0,0,0,.7)}
.demo-screen{position:relative;aspect-ratio:390/844;border-radius:33px;overflow:hidden;background:#0B0B0C;isolation:isolate}
.demo-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:translateX(100%);
  transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s cubic-bezier(.32,.72,0,1)}
.demo-shot.is-on{transform:none;z-index:1}
.demo-shot.is-out{transform:translateX(-26%);filter:brightness(.55)}
.demo-tap{position:absolute;z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.22);box-shadow:0 0 0 1.5px rgba(255,255,255,.7);opacity:0;transform:scale(.4)}
.demo-tap.is-on{animation:demo-tap .5s ease-out forwards}
@keyframes demo-tap{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.25)}}
.demo-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(520px,100%)}
.demo-step{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.5);transition:color .3s ease}
.demo-step::before{content:"";height:2px;border-radius:1px;background:linear-gradient(90deg,rgba(255,255,255,.85) var(--fill,0%),rgba(255,255,255,.16) var(--fill,0%))}
.demo-step.is-on{color:rgba(255,255,255,.92)}
.demo-toggle{position:absolute;right:16px;top:16px;width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:var(--radius-md);cursor:pointer;
  color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.demo-toggle:hover{background:rgba(255,255,255,.14);color:#fff}
.demo-toggle .i-play{display:none}
.demo-inner.is-paused .demo-toggle .i-play{display:block}
.demo-inner.is-paused .demo-toggle .i-pause{display:none}
@media (max-width:760px){
  .demo-steps{gap:8px}
  .demo-step{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .demo-shot,.demo-step{transition:none}
  .demo-toggle,.demo-tap{display:none}
}