/* Within's product identity, scoped to its showcase and portfolio entry. */
.within-page{background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif}
.within-page h1,.within-page h2,.within-page h3{font-family:Sora,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}
.within-page a{text-underline-offset:5px}
.within-page :focus-visible{outline:2px solid var(--purple);outline-offset:5px}
.within-gallery :focus-visible{outline-color:#50665b}
.within-page .wrap{max-width:1240px}
.within-skip{position:fixed;top:10px;left:20px;padding:10px 18px;background:var(--paper);z-index:30;transform:translateY(-150%)}
.within-skip:focus{transform:none}
.within-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.within-hero{text-align:center;max-width:900px;margin:auto;padding:clamp(54px,7vw,88px) 24px 48px}
.within-label{display:inline-flex;align-items:center;gap:12px;color:var(--purple);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.within-label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.within-hero h1{font-size:clamp(38px,6vw,64px);font-weight:800;line-height:1.08;margin:22px 0}
.within-hero h1 span{display:block;background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent}
.within-hero p{font-size:20px;line-height:1.7;color:var(--ink-soft);max-width:650px;margin:0 auto}
.within-hero .hero-cta{justify-content:center;margin-top:28px}
.within-gallery-wrap{padding-bottom:clamp(64px,8vw,100px)}
.within-gallery{color:#30374b;border:1px solid #d4dbe2;border-radius:22px;overflow:hidden;background:#e7ebef;box-shadow:0 28px 64px -30px rgba(57,69,89,.2);scroll-margin-top:90px}
.within-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 28px}
.within-gallery-brand{display:flex;align-items:center;gap:18px}
.within-mark{width:40px;height:38px;flex-shrink:0;color:#e8bd8a}
.within-gallery-brand .within-mark{color:#88735c}
.within-gallery-brand strong{font-family:Sora,system-ui,sans-serif;font-size:23px;font-weight:700;display:block;line-height:1.15}
.within-gallery-brand small{color:#535d6d;font-size:13px}
.within-status{padding:6px 13px;border:1px solid #d2c8b9;border-radius:99px;background:#f3eee5;color:#71614c;font-size:12px}
.within-slide{margin:0}
.within-gallery.is-enhanced .within-slide:not(.active){display:none}
.within-stage{height:600px;background:#f7f2ea;color:#33302b;display:flex;align-items:center;justify-content:center;padding:48px;position:relative;isolation:isolate;overflow:hidden}
.within-stage::before,.within-stage::after{content:'';position:absolute;z-index:-1;border-radius:50%;aspect-ratio:1;pointer-events:none}
.within-stage::before{width:65%;left:-15%;top:-40%;background:#e2ece5}
.within-stage::after{width:46%;right:-12%;bottom:-40%;background:#f7e9da}
.within-stage-unfolded::before{background:#f7e9da}.within-stage-unfolded::after{background:#e4edf5}
.within-stage-back::before{background:#e4edf5}.within-stage-back::after{background:#e2ece5}
.within-stage-lifestyle{padding:0}
.within-lifestyle{display:block;width:100%;height:100%;object-fit:cover}
.within-kit{position:relative;width:100%;max-width:720px;aspect-ratio:1.45}
.within-kit img{position:absolute;height:auto;background:#fff;box-shadow:0 16px 32px #33302b26}
.within-kit-notes{width:24%;left:2%;top:14%;transform:rotate(-8deg)}
.within-kit-box{width:32%;left:30%;top:0;transform:rotate(-3deg)}
.within-kit-cover{width:25%;right:5%;top:14%;transform:rotate(7deg)}
.within-kit .within-kit-note{width:25%;left:15%;bottom:0;transform:rotate(-5deg)}
.within-pen{position:absolute;left:59%;top:18%;width:2.8%;height:79%;transform:rotate(13deg);background:linear-gradient(90deg,#1c1c1e,#555 45%,#222);border-radius:5px 5px 1px 1px;box-shadow:3px 5px 6px #33302b33}
.within-pen::before{content:'';position:absolute;left:0;right:0;top:0;height:14%;border-left:6px solid #b34f4c;border-right:6px solid #171719;background:#c7c5be;border-radius:4px 4px 0 0}
.within-pen::after{content:'';position:absolute;bottom:-6%;width:100%;height:7%;background:#aaa79f;clip-path:polygon(0 0,100% 0,50% 100%)}
.within-pen i{position:absolute;top:18%;right:-25%;height:22%;width:25%;border-radius:0 3px 3px 0;background:#d0cdc5}
.within-cover{background:#fff;display:block;width:auto;height:500px;max-width:100%;object-fit:contain;box-shadow:2px 2px 0 #ede6da,4px 4px 0 #e4dbcd,0 25px 50px rgba(51,48,43,.16)}
.within-unfolded{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 24px rgba(51,48,43,.14))}
.within-caption{padding:24px 28px;border-top:1px solid #d4dbe2}
.within-caption h3{font-size:22px;margin:0 0 8px;line-height:1.25}
.within-caption p{margin:0;max-width:75ch;color:#535d6d;font-size:16px;line-height:1.65}
.within-controls{padding:0 28px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.within-controls[hidden]{display:none}
.within-arrow,.within-dot{width:44px;height:44px;background:transparent;color:#30374b;border:1px solid #9aa7b6;border-radius:50%;cursor:pointer;font-size:19px}
.within-arrow:hover{border-color:#677e72;background:#dbe4df;color:#374f43}
.within-dots{display:flex;gap:2px;margin:0 4px}
.within-dot{border:0;position:relative}
.within-dot::after{content:'';position:absolute;top:18px;left:18px;width:8px;height:8px;border-radius:99px;background:#70798a;transition:width .2s,left .2s}
.within-dot[aria-current=true]::after{width:26px;left:9px;background:#677e72}
.within-counter{font-size:13px;color:#535d6d;margin-left:auto;font-variant-numeric:tabular-nums}
.within-routine{padding:0 0 clamp(64px,8vw,100px)}
.within-routine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.within-routine-grid>div{border-top:1px solid var(--line);padding-top:22px}
.within-routine span{color:var(--purple);text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.within-routine h2{font-size:clamp(22px,2.5vw,29px);line-height:1.3;margin:12px 0}
.within-routine p{color:var(--ink-soft);line-height:1.7;margin:0}
.within-details{padding:0 0 clamp(64px,8vw,100px)}
.within-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.within-details h2{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:15px 0 24px}
.within-details p{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0 0 20px}
.within-specs{margin:0;border-top:1px solid var(--line)}
.within-specs>div{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)}
.within-specs dt{color:var(--purple);font-weight:600}.within-specs dd{margin:0;color:var(--ink)}
.within-cta{text-align:center;padding:clamp(50px,7vw,88px) 24px;background:var(--paper-2);border-top:1px solid var(--line)}
.within-cta h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:15px 0 20px}
.within-cta p{color:var(--ink-soft);font-size:18px;max-width:600px;margin:0 auto 26px}
.within-related{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:30px;font-size:14px}
.within-page footer.site{border-top:1px solid var(--line)}
.within-page footer.site .wrap{font-family:Manrope,system-ui,sans-serif}

.within-portfolio-feature::before{background:radial-gradient(circle at 12% 0%,rgba(232,189,138,.13),transparent 65%)}
.within-portfolio-feature .within-portfolio-visual{background:#f7f2ea;min-height:420px;padding:48px 30px}
.within-portfolio-visual img{background:#fff;width:190px;height:auto;max-width:75%;display:block;box-shadow:2px 2px 0 #ede6da,4px 4px 0 #e4dbcd,0 24px 48px rgba(51,48,43,.18)}
.within-portfolio-feature .within-portfolio-status{color:#e8bd8a;display:block}
.within-portfolio-feature .btn-ghost{background:transparent;color:#f3f1ec;border-color:rgba(243,241,236,.3)}

@media(max-width:760px){
  .within-stage{height:480px;padding:28px 20px}.within-stage-lifestyle{padding:0}.within-routine-grid{grid-template-columns:1fr;gap:24px}
  .within-cover{height:400px}
  .within-details-grid{grid-template-columns:1fr;gap:26px}
  .within-gallery-head,.within-caption{padding:20px}
  .within-controls{padding:0 20px 20px}
}
@media(max-width:480px){
  .within-page .wrap{padding:0 16px}
  .within-gallery{border-radius:16px}
  .within-hero{padding-left:20px;padding-right:20px}
  .within-hero p{font-size:18px}
  .within-stage{height:440px;padding:24px 16px}.within-stage-lifestyle{padding:0}
  .within-cover{height:360px}
  .within-dots{gap:0;margin:0}
  .within-dot{width:38px}.within-dot::after{left:15px}.within-dot[aria-current=true]::after{left:6px}
  .within-controls{gap:6px;padding-left:16px;padding-right:16px}
  .within-specs>div{grid-template-columns:1fr 1.3fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.within-page .orb{animation:none}.within-dot::after{transition:none}}