/* Self-initiated interface studies. Component styles are kept separate from the shared site system. */
.studies-page { overflow-x: clip; }
.study-device .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.studies-page .page-intro { padding-bottom: 52px; }
.studies-page .page-intro h1 { max-width: 17ch; }
.study-disclosure { border-block: 1px solid var(--champagne); background: #f3eee5; }
.study-disclosure p { padding: 16px 0; color: var(--muted); font-size: 14px; }
.study-disclosure strong { color: var(--ink); font-weight: 600; }
.studies-page .studies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px clamp(28px, 5vw, 72px); padding-block: clamp(48px, 7vw, 88px) clamp(72px, 10vw, 128px); }
.study-device .study { min-width: 0; }
.study-device .study-head { min-height: 116px; padding-bottom: 20px; border-bottom: 1px solid var(--champagne); }
.study-device .number { display: block; margin-bottom: 12px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.study-device .study h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: -.045em; }
.study-device .study-type { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.study-device .caption { min-height: 88px; padding-top: 16px; border-top: 1px solid var(--champagne); color: var(--muted); font-size: 13px; }
.study-device .caption strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.study-device .stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.8vw, 20px); align-items: center; min-width: 0; min-height: 532px; padding: 28px 0; }
.study-device .phone { position: relative; container-type: inline-size; width: 100%; max-width: 260px; justify-self: center; height: 508px; padding: 8px; border: 2px solid #1c1c1e; border-radius: 38px; background: linear-gradient(108deg, #151518 0%, #404044 18%, #222226 46%, #4a4a4e 76%, #1c1c1f 100%); box-shadow: 0 18px 30px rgba(24,23,20,.18), 0 5px 10px rgba(24,23,20,.13); overflow: visible; }
.study-device .phone::before { content: ""; position: absolute; z-index: 2; top: 12px; left: 50%; width: 54px; height: 15px; border-radius: 999px; background: #050505; box-shadow: inset 0 1px 1px rgba(255,255,255,.08); transform: translateX(-50%); }
.study-device .phone::after { content: ""; position: absolute; z-index: 1; top: 101px; left: -4px; width: 3px; height: 24px; border-radius: 3px 0 0 3px; background: #2d2d30; box-shadow: 0 32px #2d2d30, calc(100cqw + 18px) 45px #2d2d30; }
.study-device .app { height: 100%; border: 1px solid rgba(0,0,0,.28); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.study-device .status { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 12px; font: 700 9px/1 "Avenir Next", Avenir, sans-serif; letter-spacing: .04em; }
.study-device .right { display: flex; align-items: center; gap: 4px; }
.study-device .signal { display: flex; align-items: end; gap: 1px; height: 8px; }
.study-device .signal i { display: block; width: 2px; background: currentColor; }
.study-device .signal i:nth-child(1) { height: 3px; }.study-device .signal i:nth-child(2) { height: 5px; }.study-device .signal i:nth-child(3) { height: 7px; }
.study-device .battery { width: 13px; height: 7px; border: 1px solid currentColor; border-radius: 2px; position: relative; }.study-device .battery::after { content: ""; position: absolute; inset: 1px 2px; background: currentColor; }
.study-device .top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 12px; }
.study-device .icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.study-device .ib { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.study-device .tabs { display: grid; grid-template-columns: repeat(4, 1fr); height: 52px; margin-top: auto; border-top: 1px solid currentColor; }
.study-device .tab { display: grid; place-content: center; gap: 2px; text-align: center; color: inherit; font: 700 8px/1 "Avenir Next", Avenir, sans-serif; opacity: .5; }.study-device .tab.active { opacity: 1; }.study-device .tab .icon { margin-inline: auto; width: 16px; height: 16px; }
.study-device .photo { overflow: hidden; background: linear-gradient(135deg, #c75b42, #f2b273 50%, #755a37); }.study-device .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }.study-device .objects { background: linear-gradient(135deg, #dad7ce, #8a96c7 50%, #1f295a); }.study-device .motion { background: linear-gradient(135deg, #14394b, #f38f6e 50%, #f3c16f); }
/* Morrow Table */
.study-device .morrow-phone { color: #351b19; }.study-device .morrow { --red: #b94a35; --pale: #f4dfca; color: #351b19; background: #fff8ef; }.study-device .morrow .status { color: #745e50; }.study-device .morrow .top { border-bottom: 1px solid #eed9c7; }.study-device .morrow .ib { background: #f2e0ce; }.study-device .morrow-brand { font-family: Georgia, serif; font-size: 19px; font-weight: 700; letter-spacing: -.08em; }.study-device .mbody { padding: 8px 12px 0; }.study-device .kicker { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.study-device .morrow h3 { font-family: Georgia, serif; letter-spacing: -.06em; }.study-device .m-title { margin-top: 4px; font-size: 26px; line-height: .94; }.study-device .mhero { position: relative; height: 124px; margin-top: 12px; border-radius: 16px; }.study-device .mhero::after { content: "TODAY'S TABLE"; position: absolute; left: 8px; bottom: 8px; padding: 4px 6px; background: #fff8ef; color: var(--red); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.study-device .msection { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; border-bottom: 1px solid #edd8c8; }.study-device .msection b { font-family: Georgia, serif; font-size: 16px; }.study-device .msection span { color: var(--red); font-size: 9px; font-weight: 800; }.study-device .dish { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #edd8c8; }.study-device .dish-photo { width: 44px; height: 40px; border-radius: 10px; }.study-device .dish b { display: block; font-size: 10px; line-height: 1.2; }.study-device .dish small { display: block; margin-top: 2px; color: #7b6258; font-size: 8px; }.study-device .dish em { font-size: 10px; font-style: normal; font-weight: 800; }.study-device .morrow .tabs { border-color: #ead6c5; }.study-device .morrow .active { color: var(--red); }.study-device .mdetail { padding: 0 12px 12px; }.study-device .mdetail > .photo { height: 190px; margin: 0 -12px 16px; }.study-device .mdetail .kicker { margin-top: 8px; }.study-device .mdetail h3 { margin-top: 4px; font-size: 27px; line-height: .94; }.study-device .copy { margin-top: 8px; color: #745e50; font-size: 9px; line-height: 1.45; }.study-device .choice-label { display: block; margin-top: 12px; font-size: 9px; font-weight: 800; }.study-device .choices { display: flex; gap: 4px; margin-top: 8px; }.study-device .choices span { padding: 6px 7px; border: 1px solid #ddc0ac; border-radius: 99px; font-size: 8px; }.study-device .choices .selected { border-color: var(--red); background: var(--red); color: #fff; }.study-device .booking { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 8px; border-radius: 10px; background: var(--pale); font-size: 9px; }.study-device .booking b { color: var(--red); }.study-device .add { display: flex; gap: 8px; margin-top: 12px; }.study-device .add span { display: grid; width: 36px; place-items: center; border: 1px solid #ddc0ac; border-radius: 10px; font-weight: 800; }.study-device .add b { display: grid; flex: 1; place-items: center; border-radius: 10px; background: var(--red); color: #fff; font-size: 10px; }
/* FORMA Objects */
.study-device .forma-phone { color: #17181f; }.study-device .forma { --blue: #3454f5; color: #17181f; background: #f6f2ea; font-family: "Iowan Old Style", Baskerville, Georgia, serif; }.study-device .forma .status, .study-device .forma .top { border-bottom: 1px solid #17181f; }.study-device .forma .ib { border: 1px solid #17181f; }.study-device .forma-brand { font-size: 16px; font-weight: 700; letter-spacing: .1em; }.study-device .fbody { padding: 12px 12px 0; }.study-device .frow { display: flex; justify-content: space-between; font: 700 8px/1 "Avenir Next", Avenir, sans-serif; letter-spacing: .1em; }.study-device .frow span:last-child { color: var(--blue); }.study-device .f-title { max-width: 9ch; margin-top: 12px; font-size: 28px; line-height: .85; letter-spacing: -.08em; }.study-device .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }.study-device .product:nth-child(even) { margin-top: 20px; }.study-device .object-photo { height: 128px; }.study-device .meta { padding-top: 6px; font-family: "Avenir Next", Avenir, sans-serif; }.study-device .meta b { display: block; font-size: 9px; line-height: 1.2; }.study-device .meta span { display: block; margin-top: 2px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: -.03em; }.study-device .fnote { margin-top: 12px; padding-top: 8px; border-top: 1px solid #c7c2b8; font: 9px/1.4 "Avenir Next", Avenir, sans-serif; color: #55565b; }.study-device .forma .tabs { border-color: #17181f; }.study-device .forma .active { color: var(--blue); }.study-device .fdetail { padding: 0 12px 12px; }.study-device .fdetail .object-photo { height: 202px; margin: 0 -12px 16px; }.study-device .code { color: #77746e; font: 700 8px/1 "Avenir Next", Avenir, sans-serif; letter-spacing: .13em; }.study-device .product-title { margin-top: 6px; font-size: 26px; line-height: .88; letter-spacing: -.08em; }.study-device .price { margin-top: 8px; color: var(--blue); font: 800 28px/.9 "Avenir Next", Avenir, sans-serif; letter-spacing: -.07em; }.study-device .finishes { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 8px; border-top: 1px solid #c7c2b8; font: 700 8px/1 "Avenir Next", Avenir, sans-serif; letter-spacing: .1em; }.study-device .swatches { display: flex; gap: 6px; }.study-device .swatches i { width: 16px; height: 16px; border: 1px solid #17181f; border-radius: 50%; background: #b9b9b5; }.study-device .swatches i:nth-child(2) { background: #25262c; }.study-device .swatches i:nth-child(3) { background: #eae5dc; }.study-device .swatches i.active { outline: 2px solid var(--blue); outline-offset: 2px; }.study-device .delivery { display: flex; gap: 8px; align-items: center; margin-top: 12px; color: #55565b; font: 8px/1.3 "Avenir Next", Avenir, sans-serif; }.study-device .delivery .icon { color: var(--blue); }.study-device .cta { display: grid; place-items: center; min-height: 40px; margin-top: 16px; background: #17181f; color: #fff; font: 700 9px/1 "Avenir Next", Avenir, sans-serif; letter-spacing: .1em; }
/* Forge Floor */
.study-device .forge-phone { color: #101923; }.study-device .forge { --bg: #101923; --panel: #172431; --line: #354a5b; --text: #ecf0f2; --muted: #9aabb7; --yellow: #f4ca45; --green: #5cd69a; --red: #ff6d62; --blue: #60b7ee; color: var(--text); background: var(--bg); }.study-device .forge .status { background: #0b1219; color: var(--muted); }.study-device .forge .top { background: var(--yellow); color: var(--bg); }.study-device .forge .ib { background: #dfb62c; }.study-device .forge-brand { font-size: 10px; font-weight: 800; letter-spacing: .12em; }.study-device .obody { padding: 12px 12px 0; }.study-device .okicker { color: var(--yellow); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.study-device .otitle { margin-top: 4px; font-size: 24px; font-weight: 800; line-height: .94; letter-spacing: -.06em; }.study-device .shift { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 8px; }.study-device .live { display: flex; align-items: center; gap: 4px; color: var(--green); font-weight: 800; }.study-device .live i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.study-device .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }.study-device .summary div { padding: 8px; border-left: 3px solid var(--blue); background: var(--panel); }.study-device .summary div:nth-child(2) { border-color: var(--yellow); }.study-device .summary div:nth-child(3) { border-color: var(--red); }.study-device .summary strong { display: block; font-size: 17px; line-height: 1; }.study-device .summary span { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; }.study-device .work-head { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.study-device .work { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }.study-device .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.study-device .dot.warn { background: var(--yellow); }.study-device .dot.hold { background: var(--red); }.study-device .work b { display: block; font-size: 9px; line-height: 1.2; }.study-device .work small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }.study-device .work span { color: var(--yellow); font-size: 9px; font-weight: 800; }.study-device .forge .tabs { border-color: var(--line); background: #0b1219; }.study-device .forge .active { color: var(--yellow); }.study-device .order-head { padding: 12px; border-bottom: 1px solid var(--line); }.study-device .order-meta { display: flex; gap: 4px; margin-top: 12px; }.study-device .order-meta span { padding: 4px; border: 1px solid var(--line); color: var(--muted); font-size: 7px; font-weight: 800; }.study-device .order-meta .active { border-color: var(--yellow); color: var(--yellow); }.study-device .progress { margin: 12px; padding: 12px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 8px 16px rgba(0,0,0,.18); }.study-device .progress h3 { font-size: 14px; line-height: 1.1; }.study-device .progress p { margin-top: 4px; color: var(--muted); font-size: 8px; }.study-device .meter { height: 8px; margin-top: 12px; background: #0b1219; }.study-device .meter i { display: block; width: 69%; height: 100%; background: var(--green); }.study-device .steps { margin-top: 12px; }.study-device .step { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; min-height: 32px; font-size: 9px; }.study-device .step i { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 8px; font-style: normal; }.study-device .step.done i { border-color: var(--green); background: var(--green); color: var(--bg); }.study-device .step.current i { border-color: var(--yellow); color: var(--yellow); }.study-device .step span { color: var(--muted); font-size: 8px; }.study-device .forge-cta { display: grid; place-items: center; min-height: 36px; margin-top: 12px; background: var(--yellow); color: var(--bg); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
/* Pulse Day */
.study-device .pulse-phone { color: #123d39; }.study-device .pulse { --paper: #f4f8f1; --ink: #123d39; --mint: #9be2c3; --deep: #1d7668; --orange: #ff996d; --pale: #dcebe2; color: var(--ink); background: var(--paper); }.study-device .pulse .status, .study-device .pulse .top { background: var(--ink); color: var(--paper); }.study-device .pulse .ib { background: #2a5a55; }.study-device .pulse-brand { font-size: 13px; font-weight: 800; letter-spacing: -.05em; }.study-device .pbody { padding: 12px 12px 0; }.study-device .greeting { color: #547771; font-size: 9px; font-weight: 700; }.study-device .p-title { margin-top: 4px; font-size: 26px; font-weight: 800; line-height: .92; letter-spacing: -.08em; }.study-device .activity { position: relative; height: 132px; margin-top: 12px; border-radius: 16px; box-shadow: 0 8px 20px rgba(18,61,57,.15); }.study-device .activity::after { content: "DAWN RUN · 6.2 KM"; position: absolute; left: 8px; bottom: 8px; padding: 4px 6px; background: rgba(244,248,241,.9); font-size: 8px; font-weight: 800; letter-spacing: .08em; }.study-device .goals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }.study-device .goal { padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(18,61,57,.08); }.study-device .goal svg { display: block; width: 42px; height: 42px; float: right; margin-left: 4px; }.study-device .goal b { display: block; font-size: 9px; }.study-device .goal strong { display: block; margin-top: 12px; font-size: 17px; line-height: 1; letter-spacing: -.06em; }.study-device .goal span { display: block; margin-top: 3px; color: #547771; font-size: 8px; }.study-device .pulse .tabs { border-color: #cadbd1; background: var(--paper); }.study-device .pulse .active { color: var(--deep); }.study-device .psummary { margin: 0 12px; padding: 12px; border-radius: 16px; background: var(--mint); box-shadow: 0 8px 20px rgba(18,61,57,.1); }.study-device .psummary h3 { font-size: 22px; font-weight: 800; line-height: .94; letter-spacing: -.07em; }.study-device .psummary p { margin-top: 6px; font-size: 9px; }.study-device .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }.study-device .stats div { padding: 8px; border-radius: 8px; background: rgba(255,255,255,.65); }.study-device .stats b { display: block; font-size: 14px; letter-spacing: -.06em; }.study-device .stats span { display: block; margin-top: 2px; font-size: 7px; font-weight: 800; letter-spacing: .05em; }.study-device .week-title { display: flex; justify-content: space-between; align-items: center; margin: 12px 12px 0; font-size: 10px; }.study-device .week-title span { color: var(--deep); font-size: 8px; font-weight: 800; }.study-device .bars { display: flex; align-items: end; justify-content: space-between; height: 84px; margin: 8px 12px; }.study-device .bars div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; color: #66847d; font-size: 7px; }.study-device .bars i { display: block; flex: none; min-height: 3px; width: 20px; border-radius: 10px 10px 3px 3px; background: var(--pale); }.study-device .bars div:nth-child(2) i, .study-device .bars div:nth-child(5) i { background: var(--mint); }.study-device .bars div:nth-child(6) i { background: var(--deep); }.study-device .bars div:nth-child(7) i { background: var(--orange); }.study-device .callout { display: flex; gap: 8px; align-items: center; margin: 12px; padding: 10px; border-radius: 12px; background: var(--orange); box-shadow: 0 8px 16px rgba(255,153,109,.2); }.study-device .callout .icon { width: 20px; height: 20px; }.study-device .callout b { display: block; font-size: 9px; }.study-device .callout span { display: block; margin-top: 2px; font-size: 8px; }.study-device .plist { margin: 12px; }.study-device .prow { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--pale); font-size: 9px; }.study-device .prow div { display: flex; align-items: center; gap: 8px; }.study-device .prow .icon { color: var(--deep); }.study-device .prow b { font-size: 10px; }
/* The seven approved study animations stay on the complete studies page only. */
@keyframes study-choice-settle { from { transform: scale(.9); background: #f4dfca; color: var(--red); } to { transform: scale(1); background: var(--red); color: #fff; } }
@keyframes study-confirmation-sweep { from { transform: translateX(-150%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes study-price-settle { from { transform: scale(.93); color: #77746e; } to { transform: scale(1); color: var(--blue); } }
@keyframes study-meter-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes study-live-pulse { 0%,100% { transform: scale(1); opacity: 1; } 12%,36%,60% { transform: scale(1.45); opacity: .35; } 24%,48%,72% { transform: scale(1); opacity: 1; } }
@keyframes study-ring-draw { from { stroke-dashoffset: 113; } to { stroke-dashoffset: var(--ring-offset); } }
@keyframes study-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@supports (animation-timeline: view()) {
  .studies-page .morrow .selected { animation: study-choice-settle .65s both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  .studies-page .booking { position: relative; overflow: hidden; }.studies-page .booking::after { content: ""; position: absolute; inset: -40% auto -40% -35%; width: 24%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); opacity: .8; animation: study-confirmation-sweep .85s both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  .studies-page .forma .price { transform-origin: left center; animation: study-price-settle .6s both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .studies-page .meter i { transform-origin: left center; animation: study-meter-fill .7s both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  .studies-page .live i { animation: study-live-pulse .9s both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  .studies-page .goal svg circle:nth-child(2) { --ring-offset: 22; animation: study-ring-draw .8s both; animation-timeline: view(); animation-range: entry 0% cover 42%; }.studies-page .goal:nth-child(2) svg circle:nth-child(2) { --ring-offset: 37; animation-delay: .08s; }
  .studies-page .bars i { transform-origin: center bottom; animation: study-bar-grow .58s both; animation-timeline: view(); animation-range: entry 0% cover 42%; }.studies-page .bars div:nth-child(2) i { animation-delay: .05s; }.studies-page .bars div:nth-child(3) i { animation-delay: .1s; }.studies-page .bars div:nth-child(4) i { animation-delay: .15s; }.studies-page .bars div:nth-child(5) i { animation-delay: .2s; }.studies-page .bars div:nth-child(6) i { animation-delay: .25s; }.studies-page .bars div:nth-child(7) i { animation-delay: .3s; }
}
.studies-teaser { padding: 0 0 72px; }.studies-teaser-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 28px; }.studies-teaser-head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.12; }.studies-teaser-head p { max-width: 44rem; margin-top: 10px; color: var(--muted); }.studies-teaser-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }.studies-teaser-grid .card { display: grid; place-items: center stretch; min-width: 0; padding: 20px 10px; overflow: hidden; }.studies-teaser .stage { display: block; width: 100%; min-height: 0; padding: 0; } /* .stage is block-level with no explicit width, sized inside a grid cell whose place-items:center leaves it shrink-to-fit. .phone's width:min(100%,180px) then reads its 100% against that shrinking parent - a circular dependency the browser resolved to ~20px. An explicit width here breaks the cycle. */.studies-teaser .phone { width: min(100%, 180px); height: 352px; }.studies-teaser .caption { min-height: 0; margin-top: 14px; padding-top: 10px; width: 100%; font-size: 12px; }.studies-teaser .caption strong { margin: 0; }.studies-teaser .study { display: contents; }
@media (max-width: 900px) { .studies-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.studies-teaser .phone { width: min(100%, 200px); height: 390px; } }
@media (max-width: 760px) { .studies-page .studies { grid-template-columns: 1fr; gap: 64px; }.study-device .study-head { min-height: 0; }.study-device .stage { min-height: 0; padding: 24px 0; }.study-device .phone { height: clamp(388px, 123vw, 508px); border-radius: 28px; padding: 6px; }.study-device .phone::before { top: 10px; width: 42px; height: 12px; }.study-device .phone::after { top: 80px; left: -4px; height: 20px; box-shadow: 0 27px #2d2d30, calc(100cqw + 14px) 38px #2d2d30; }.study-device .app { border-radius: 22px; }.study-device .status { height: 20px; padding: 0 8px; font-size: 7px; }.study-device .top { min-height: 28px; padding: 0 8px; }.study-device .ib { width: 22px; height: 22px; }.study-device .icon { width: 12px; height: 12px; }.study-device .morrow-brand { font-size: 14px; }.study-device .mbody, .study-device .fbody, .study-device .obody, .study-device .pbody { padding-inline: 8px; }.study-device .m-title, .study-device .f-title, .study-device .p-title { font-size: clamp(18px, 6.4vw, 26px); }.study-device .mhero { height: clamp(86px, 30vw, 124px); margin-top: 8px; }.study-device .msection { margin-top: 12px; padding-bottom: 4px; }.study-device .dish { grid-template-columns: 32px 1fr auto; gap: 4px; padding: 5px 0; }.study-device .dish-photo { width: 32px; height: 28px; }.study-device .dish b, .study-device .work b { font-size: 8px; }.study-device .dish small, .study-device .work small { font-size: 7px; }.study-device .mdetail { padding-inline: 8px; }.study-device .mdetail > .photo { height: clamp(128px, 45vw, 190px); margin-inline: -8px; margin-bottom: 8px; }.study-device .mdetail h3 { font-size: clamp(18px, 6.8vw, 27px); }.study-device .copy { font-size: 7px; }.study-device .choices span { padding: 4px; font-size: 7px; }.study-device .add { margin-top: 8px; }.study-device .add span { width: 28px; }.study-device .add b { font-size: 8px; }.study-device .booking { margin-top: 8px; padding: 6px; font-size: 7px; }.study-device .fdetail { padding-inline: 8px; }.study-device .fdetail .object-photo { height: clamp(132px, 46vw, 202px); margin-inline: -8px; margin-bottom: 10px; }.study-device .object-photo { height: clamp(88px, 31vw, 128px); }.study-device .grid { gap: 4px; margin-top: 10px; }.study-device .product:nth-child(even) { margin-top: 12px; }.study-device .meta b { font-size: 8px; }.study-device .meta span { font-size: 9px; }.study-device .fnote { margin-top: 8px; font-size: 7px; }.study-device .product-title { font-size: clamp(18px, 6.5vw, 26px); }.study-device .price { font-size: clamp(19px, 7vw, 28px); }.study-device .finishes { margin-top: 10px; }.study-device .cta { min-height: 32px; margin-top: 10px; font-size: 7px; }.study-device .delivery { font-size: 7px; }.study-device .otitle { font-size: clamp(17px, 6vw, 24px); }.study-device .shift { margin-top: 8px; padding: 5px; font-size: 7px; }.study-device .summary { margin-top: 4px; }.study-device .summary div { padding: 5px; }.study-device .summary strong { font-size: 13px; }.study-device .summary span { font-size: 6px; }.study-device .work-head { margin-top: 8px; font-size: 7px; }.study-device .work { gap: 4px; padding: 5px 0; }.study-device .order-head { padding: 8px; }.study-device .order-meta { margin-top: 8px; }.study-device .progress { margin: 8px; padding: 8px; }.study-device .progress h3 { font-size: 11px; }.study-device .progress p, .study-device .step span { font-size: 7px; }.study-device .meter { margin-top: 8px; }.study-device .step { gap: 4px; min-height: 25px; font-size: 8px; }.study-device .step i { width: 15px; height: 15px; font-size: 7px; }.study-device .forge-cta { min-height: 28px; margin-top: 8px; font-size: 7px; }.study-device .activity { height: clamp(88px, 31vw, 132px); margin-top: 8px; border-radius: 10px; }.study-device .goals { gap: 4px; margin-top: 8px; }.study-device .goal { padding: 5px; border-radius: 8px; }.study-device .goal svg { width: 30px; height: 30px; }.study-device .goal b { font-size: 7px; }.study-device .goal strong { margin-top: 8px; font-size: 12px; }.study-device .goal span { font-size: 6px; }.study-device .psummary, .study-device .callout, .study-device .plist { margin-inline: 8px; }.study-device .psummary { padding: 8px; }.study-device .psummary h3 { font-size: 18px; }.study-device .stats { margin-top: 8px; }.study-device .stats div { padding: 5px; }.study-device .stats b { font-size: 11px; }.study-device .week-title { margin: 8px 8px 0; }.study-device .bars { height: 112px; margin: 10px 12px 6px; }.study-device .bars i { width: 10px; }.study-device .callout { padding: 7px; }.study-device .prow { padding: 5px 0; font-size: 8px; }.study-device .tabs { height: 40px; }.study-device .tab { font-size: 6px; }.study-device .tab .icon { width: 12px; height: 12px; }.studies-teaser-head { grid-template-columns: 1fr; align-items: start; }.studies-teaser-head .btn { justify-self: start; }.studies-teaser .phone { width: min(100%, 160px); height: 312px; }.studies-teaser-grid .card { padding: 16px 8px; } }
@media (max-width: 375px) { .study-device .stage { gap: 8px; }.study-device .phone { height: 388px; }.study-device .caption { min-height: 0; }.studies-teaser .phone { width: min(100%, 136px); height: 266px; } }
@media (prefers-reduced-motion: reduce) { .studies-page .morrow .selected, .studies-page .forma .price, .studies-page .meter i, .studies-page .live i, .studies-page .goal svg circle:nth-child(2), .studies-page .bars i { animation: none !important; }.studies-page .booking::after { display: none; } }