:root{--cream:#f7f7f2;--paper:#fff;--ink:#293f37;--muted:#59685f;--sage:#e9eee5;--line:#d4dcd0;--accent:#476651;--on-accent:#fff;--brand-dot:#617a63;color-scheme:light dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}main{min-height:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.site-header{width:100%;max-width:1320px;margin:0 auto;padding:clamp(10px,2dvh,24px) clamp(20px,3.4vw,48px);display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:11px;font-family:Georgia,"Times New Roman",serif;font-size:29px;letter-spacing:-1.4px}.wordmark img{border-radius:12px;width:clamp(28px,4dvh,38px);height:auto}.platforms{display:flex;align-items:center;gap:9px;font-size:.875rem;letter-spacing:.04em;padding:10px 15px;border:1px solid var(--line);border-radius:30px;background:var(--paper)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.showcase{width:100%;max-width:1320px;height:100%;min-height:0;margin:0 auto;padding:0 24px clamp(10px,2dvh,24px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:clamp(8px,1.4dvh,18px);text-align:center}.masthead{position:relative;z-index:4}.eyebrow{font-size:.875rem;letter-spacing:2.8px;color:var(--muted);margin:0 0 clamp(6px,1dvh,12px)}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(52px,min(10.6vw,10dvh),132px);letter-spacing:-.055em;line-height:1;margin:0}h1 span{color:var(--brand-dot)}.emotional-scale{display:flex;gap:clamp(6px,1vw,14px);justify-content:center;margin:clamp(4px,.7dvh,10px) auto 0;max-width:460px}.emotional-scale img{width:clamp(30px,4.5dvh,62px);height:auto;opacity:.9;transition:transform .3s}.emotional-scale img:hover{transform:translateY(-3px) rotate(-4deg)}
.gallery{position:relative;width:100%;height:100%;min-height:0;max-width:1000px;isolation:isolate;container-type:size}.gallery-halo{position:absolute;inset:10% 5% 8%;background:var(--sage);border-radius:50%;filter:blur(30px);opacity:.8;z-index:-1}.phone{position:absolute;left:50%;top:3%;width:min(316px,42cqh,31cqw);padding:clamp(2px,.9cqh,7px);background:#29372f;border:1px solid #7c8a7c;border-radius:15% / 7%;box-shadow:0 3px 2px #fff8 inset,0 0 0 2px #e0e3d9,0 12px 20px -12px #293f372b,0 25px 55px -25px #293f3740;transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .7s,box-shadow .4s;overflow:visible}.phone::before,.phone::after{content:"";position:absolute;width:3px;background:#7c8a7c}.phone::before{top:18%;left:-4px;height:14%;border-radius:3px 0 0 3px}.phone::after{right:-4px;top:25%;height:9%;border-radius:0 3px 3px 0}.phone-glass{display:block;border-radius:14% / 6.5%;overflow:hidden;background:var(--cream)}.phone img{display:block;width:100%;height:auto}.position-center{transform:translateX(-50%);z-index:3;filter:brightness(1)}.position-left{transform:translate(-133%,6cqh) rotate(-8deg) scale(.89);z-index:1;filter:brightness(.97)}.position-right{transform:translate(33%,6cqh) rotate(8deg) scale(.89);z-index:2;filter:brightness(.97)}.phone.position-center:hover{transform:translate(-50%,-3px);box-shadow:0 3px 2px #fff8 inset,0 0 0 2px #e0e3d9,0 18px 25px -12px #293f3730,0 30px 65px -25px #293f3750}
.screen-selector{position:relative;z-index:4;display:inline-flex;gap:5px;align-items:center;background:var(--paper);padding:5px;border:1px solid var(--line);border-radius:40px;box-shadow:0 5px 15px #293f3704}.screen-tab{border:0;background:transparent;border-radius:30px;padding:12px 21px;font-size:.875rem;min-height:44px;min-width:44px;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:background .2s,color .2s}.screen-tab svg{width:16px;height:16px}.screen-tab[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}.screen-tab:hover:not([aria-pressed="true"]){background:var(--sage)}
footer{border-top:1px solid var(--line);width:calc(100% - 64px);max-width:1224px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:clamp(8px,1.3dvh,16px) 6px;color:var(--muted);font-size:.875rem;letter-spacing:.02em}.footer-brand{font-family:Georgia,"Times New Roman",serif;font-size:22px;color:var(--ink);letter-spacing:-.8px}.privacy-mark{display:flex;align-items:center;gap:7px}.privacy-mark svg{width:16px;height:16px}
.screen-dialog{border:0;padding:0;background:var(--cream);width:min(460px,calc(100vw - 32px),40dvh);aspect-ratio:1320 / 2868;max-height:90dvh;border-radius:25px;box-shadow:0 20px 80px #0003;overflow:hidden}.screen-dialog::backdrop{background:#293f3770;backdrop-filter:blur(8px)}.expanded-screen{display:block;width:100%;height:100%;object-fit:contain}.dialog-close{position:absolute;display:grid;place-items:center;top:10px;right:10px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);box-shadow:0 3px 12px #293f3710;z-index:2}.dialog-close svg{width:20px;height:20px}.not-found{height:100%;display:grid;align-content:center;justify-items:center;gap:20px}.not-found a{border-radius:30px;padding:14px 24px;background:var(--accent);color:var(--on-accent);font-size:13px}
@media(max-width:720px){.site-header{padding-inline:20px}.wordmark{font-size:25px;gap:8px}.platforms{font-size:.875rem;padding:8px 11px}.showcase{padding-inline:16px}.eyebrow{font-size:.875rem;letter-spacing:2.8px}h1{font-size:clamp(52px,min(24vw,10dvh),96px)}.emotional-scale{gap:8px}.emotional-scale img{width:clamp(28px,4.5dvh,48px)}.gallery-halo{inset:8% 5%;filter:blur(25px)}.phone{width:min(300px,42cqh,84cqw)}.position-left,.position-right{visibility:hidden;pointer-events:none;transform:translateX(-50%) scale(.92);filter:none}.position-center{visibility:visible;transform:translateX(-50%)}.screen-selector{max-width:100%;gap:0;padding:4px}.screen-tab{padding:10px 14px;font-size:.875rem;gap:6px}.screen-tab svg{width:14px;height:14px}footer{width:calc(100% - 40px);padding-inline:0}footer>span:nth-child(2){display:none}}
@media(max-width:360px){.screen-tab{padding-inline:6px;gap:4px}.platforms{padding-inline:8px}}
@media(max-height:500px) and (min-width:500px){.site-header{padding-block:8px}.showcase{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);grid-template-rows:minmax(0,1fr) auto;max-width:1000px;padding-bottom:8px;gap:8px}.masthead{align-self:center;grid-column:1;grid-row:1}.gallery{grid-column:2;grid-row:1}.screen-selector{grid-column:1 / -1;grid-row:2}h1{font-size:clamp(48px,8vw,100px)}.eyebrow{font-size:.875rem;letter-spacing:2px}.emotional-scale{gap:2px}.emotional-scale img{width:clamp(22px,4vw,44px)}footer{padding-block:6px}.phone{width:min(316px,41cqh,31cqw)}}
@media(prefers-reduced-motion:no-preference){.masthead{animation:appear .8s both}.gallery{animation:appear 1s .15s both}.screen-selector{animation:appear .8s .3s both}@keyframes appear{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.footer-links{display:flex;gap:14px}.footer-links a{color:inherit;text-decoration:none}.footer-links a:hover{text-decoration:underline}

/* The controls keep their touch targets as the artwork adapts to the viewport. */
.wordmark,.site-header>a:not(.wordmark),.footer-links a,footer>a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.footer-links a{padding-inline:4px}
.site-header>a:not(.wordmark){font-size:.875rem;justify-content:center}
.screen-tab:active,.dialog-close:active{opacity:.75}
.selected-mark{display:none;width:16px;font-weight:700;line-height:1}
.screen-tab[aria-pressed="true"]{font-weight:600}
.screen-tab[aria-pressed="true"] .selected-mark{display:inline-block}
.screen-tab[aria-pressed="true"] svg{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.phone{min-width:44px;min-height:44px}
@media(max-width:480px){footer .footer-brand{display:none}.screen-tab{padding-inline:8px}}
@media(max-width:360px){.screen-tab{padding-inline:6px;gap:4px}}
@media(max-height:420px){
  .site-header{padding-block:0}.wordmark{font-size:24px}
  .emotional-scale,.eyebrow{display:none}
  .showcase{gap:6px;padding-bottom:6px}h1{font-size:40px}
  footer{padding-block:0;min-height:44px}
  .phone{top:0}
}
@media(prefers-color-scheme:dark){
  :root{--cream:#151e19;--paper:#202d25;--ink:#e8eee7;--muted:#b3bfb5;--sage:#293b2d;--line:#526456;--accent:#a8c79f;--on-accent:#17251d;--brand-dot:#a8c79f}
  .phone{border-color:#819483;box-shadow:0 3px 2px #ffffff18 inset,0 0 0 2px #526456,0 25px 55px -25px #0009}
  .emotional-scale img{filter:drop-shadow(0 1px 1px #a8c79f55)}
  .gallery-halo{opacity:.55}
  .screen-dialog::backdrop{background:#080f0ccc}
}
@media(prefers-contrast:more){
  :root{--muted:#293f37;--line:#59685f}
  button:focus-visible,a:focus-visible{outline-width:4px}
  .phone{filter:none}.screen-selector{border-width:2px}
}
@media(prefers-contrast:more) and (prefers-color-scheme:dark){:root{--muted:#e8eee7;--line:#b3bfb5}}
@media(forced-colors:active){
  .screen-tab[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-4px}
  .gallery-halo{display:none}.phone{border:2px solid ButtonText}
  .screen-selector,.dialog-close{border:1px solid ButtonText}
}
@media(max-width:360px){.site-header{padding-inline:16px}.wordmark{font-size:22px}.wordmark img{width:24px}}
main,.showcase{min-width:0}main{overflow:auto}
.screen-selector{flex-wrap:wrap;justify-content:center}
footer{flex-wrap:wrap;column-gap:12px}
.site-header,.platforms{min-width:0}
.wordmark{flex-shrink:0}
@media(max-width:360px){.screen-tab{padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.phone.position-center:hover{transform:translateX(-50%)}.emotional-scale img:hover{transform:none}}