/* Product photography, editorial hierarchy and restrained motion. */
body{background:radial-gradient(ellipse at 0 0,#f0eedf 0,transparent 600px),var(--paper)}
.site-header{position:relative;padding-top:25px;padding-bottom:25px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center;padding:65px 0 70px}
.hero h1{font-size:clamp(44px,4.9vw,70px);line-height:1.4}
.hero .eyebrow{letter-spacing:1.4px}
.hero-feature{display:block;background:#fff;border:1px solid #deded3;border-radius:25px;overflow:hidden;box-shadow:0 25px 60px -35px #39382860;transition:transform .4s,box-shadow .4s}
.feature-photo{height:340px;overflow:hidden;background:#137f9c}
.feature-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 43%;transition:transform .7s}
.hero-feature:hover .feature-photo img{transform:scale(1.035)}
.feature-caption{display:flex;justify-content:space-between;align-items:center;padding:26px 28px}
.feature-caption .eyebrow{font-size:9px;color:#65594e}
.feature-caption h2{font-size:21px;letter-spacing:-.5px;margin:9px 0}
.feature-caption p{font-size:12px}.feature-caption p span{color:#65695f}
.feature-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);font-size:24px;transition:transform .3s}
.hero-feature:hover .feature-arrow{transform:rotate(10deg)}
.intro-strip{background:#23271f;color:#f5f5eb;padding:23px 28px;border-radius:12px;border:0}
.intro-strip i{color:var(--lime)}
.section-heading h2{font-size:clamp(29px,3.1vw,43px)}
.category-heading{padding:24px 0}.category-heading h2{font-size:32px}
.product-grid{gap:30px}.product{border-radius:22px;box-shadow:0 10px 25px -22px #20271960}
.product:hover{box-shadow:0 22px 40px -25px #20271955}
.hero-feature .product-art.screen-art{height:340px;position:relative;padding:0}
.product-grid .product-art.screen-art{width:100%;height:auto;aspect-ratio:1 / 1;position:relative;padding:0}
.screen-art>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .65s}
.palette .screen-art>img{object-position:center 44%}
.timer .screen-art{padding:35px;background:#d9e1d9}
.timer .screen-art>img{height:auto;object-fit:contain;border-radius:15px;box-shadow:0 22px 35px -15px #121b2050;transform:rotate(3deg)}
.product:hover .screen-art>img,.hero-feature:hover .screen-art>img{transform:scale(1.025)}
.screen-label{position:absolute;left:20px;top:18px;background:#ffffffed;color:#293027;padding:7px 11px;border-radius:20px;font-size:8px;letter-spacing:1.4px;border:1px solid #00000010}
.product-info{padding:28px 32px 32px}.product-top{margin-bottom:23px}.product-top>b{border:1px solid var(--line);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:18px}
.product h3{font-size:27px}.product-link{border:0;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:25px}
.next-app{background:linear-gradient(115deg,#e8edde,#f6f5f0);border-style:solid;padding:32px}.next-app .plus{background:#fff;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;flex-shrink:0}
.about-section{position:relative;overflow:hidden;border:1px solid #d4dcc8;background:linear-gradient(120deg,#e8edde,#f0f2e9)}
.profile-mark{font-size:160px;color:#35492a;letter-spacing:-14px}
.developer-profile{margin-top:30px;padding-top:24px;border-top:1px solid #c6cdbb}
.developer-label{display:block;font-size:9px;font-weight:700;letter-spacing:1.6px;color:#6b7562}
.developer-heading{display:flex;align-items:baseline;gap:14px;margin-top:10px}
.developer-heading h3{font-size:20px;letter-spacing:-.03em}
.developer-heading>span{font-size:11px;color:#687061}
.about-section .developer-profile p{max-width:42em;margin-top:12px;line-height:1.9}
.notes-section .note-row{border-radius:0;transition:background .25s,padding .25s}
.note-row:hover{background:#ebede3;padding-left:15px;padding-right:15px}
.links-section{border-top:1px solid var(--line);padding-top:60px}
.external-links>a,.external-links>div{padding:22px 20px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}
.external-links>a{transition:background .2s,transform .2s}.external-links>a:hover{background:#e9efd9;transform:translateX(4px)}
.site-footer{padding-top:40px;padding-bottom:40px}.site-footer .brand{font-size:38px}
@media(max-width:1000px){.hero{gap:32px}.hero h1{font-size:46px}.feature-photo{height:280px}.feature-caption{padding:20px}.feature-caption h2{font-size:17px}.hero-feature .product-art.screen-art{height:280px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:35px;padding-top:42px}.hero-copy{max-width:none}.hero h1{font-size:54px}.hero-feature{display:grid;grid-template-columns:1fr 1fr}.feature-photo{height:250px}.feature-caption{align-items:flex-start;justify-content:center;flex-direction:column;gap:20px}.feature-caption h2{font-size:19px}.product-grid{gap:20px}}
@media(max-width:680px){.hero{padding-bottom:35px}.hero h1{font-size:clamp(40px,10vw,60px)}.hero-feature{display:block}.feature-photo{height:260px}.feature-caption{flex-direction:row;align-items:center;justify-content:space-between;padding:22px}.feature-caption h2{font-size:19px}.intro-strip{padding:20px 14px}.hero-feature .product-art.screen-art{height:270px}.product-info{padding:24px}.product h3{font-size:24px}.timer .screen-art{padding:25px}.next-app{padding:22px}.profile-mark{font-size:68px;letter-spacing:-5px}.developer-heading{display:block}.developer-heading>span{display:block;margin-top:4px}.external-links small{font-size:10px}.site-footer .brand{font-size:30px}}
.feature-landscape .feature-photo{display:flex;align-items:center;padding:32px;background:#dde4dd}
.feature-landscape .feature-photo img{height:auto;object-fit:contain;border-radius:14px;box-shadow:0 15px 25px -12px #18251e55}
.future-note{margin-top:46px;padding:25px 0 0;border-top:1px solid var(--line);color:var(--muted)}
.future-note .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:12px}
.future-note h3{font-size:18px;font-weight:500;color:var(--ink);margin-bottom:7px}
.future-note>p:last-child{font-size:13px}
@media(max-width:680px){.feature-landscape .feature-photo{padding:24px;height:220px}.future-note{margin-top:30px}.future-note>p:last-child{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
