:root {
    --red:#d11221;
    --ink:#1a1a1a;
    --blue:#0044cc;
    --mono:'Space Mono',monospace;
    --cream:#f5f4f0;
    --muted:#756e67;
    --gold:#d1b473;
    --serif:'DM Serif Display',Georgia,serif;
    --sans:'Space Grotesk',Arial,sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:94px
}

body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit;
    cursor:pointer
}

button,a {
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent
}

img {
    display:block;
    max-width:100%;
    object-fit:cover
}

figure,h1,h2,h3,p {
    margin:0
}

h2 {
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(42px,5vw,72px);
    line-height:1.08;
    letter-spacing:-1.8px
}

em {
    font-family:var(--serif);
    font-weight:400
}

p {
    line-height:1.65
}

a:focus-visible,button:focus-visible {
    outline:3px solid #cf982e;
    outline-offset:6px
}

[hidden] {
    display:none!important
}

.icon-library {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}

.icon {
    width:22px;
    height:22px;
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round
}

.wrap {
    width:min(1180px,calc(100% - 96px));
    margin-inline:auto
}

.section-space {
    padding-block:116px
}

.eyebrow {
    font-size:13px;
    font-weight:600;
    letter-spacing:2.6px;
    line-height:1.5;
    margin-bottom:22px
}

.skip-link {
    position:fixed;
    left:16px;
    top:-100px;
    padding:14px;
    background:white;
    z-index:100
}

.skip-link:focus {
    top:12px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:54px;
    padding:15px 26px;
    border:1px solid transparent;
    border-radius:100px;
    font-size:16px;
    font-weight:600;
    transition:transform .2s,background .2s,box-shadow .2s
}

.button:hover {
    transform:translateY(-2px)
}

.button-red {
    background:var(--red);
    color:white;
    box-shadow:0 6px 22px #d1122126
}

.button-red:hover {
    background:#e12331;
    box-shadow:0 9px 28px #d1122140
}

.button-dark {
    background:var(--ink);
    color:white
}

.button-dark:hover {
    background:#44352d
}

.button-gold {
    color:#211c19;
    background:var(--gold)
}

.button-small {
    min-height:40px;
    padding:9px 18px;
    font-size:14px;
    gap:10px
}

.button-small .icon {
    width:16px;
    height:16px
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:16px;
    font-weight:500;
    padding:12px 0
}

.text-link:hover {
    color:#df6756
}

.text-link>span {
    font-size:22px
}

.text-dark {
    color:var(--ink)
}

/* The order action stays visible while the visitor explores. */
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:#141211ed;
    backdrop-filter:blur(18px);
    border-bottom:1px solid #ffffff14;
    color:#eee9e2
}

.nav-shell {
    width:min(1380px,calc(100% - 80px));
    height:76px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:30px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:12px;
    flex-shrink:0
}

.brand img {
    background:#f8f5f0;
    border-radius:50%;
    width:42px;
    height:42px
}

.brand>span {
    font-family:var(--serif);
    font-size:22px;
    line-height:1
}

.brand small {
    display:block;
    font:8px var(--sans);
    letter-spacing:2px;
    margin-top:7px;
    opacity:.6
}

.nav-links {
    display:flex;
    align-items:center;
    gap:28px;
    margin-left:auto;
    font-size:14px;
    color:#c9c1b8
}

.nav-links a:hover {
    color:white
}

.nav-links a {
    white-space:nowrap
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0
}

.nav-actions a {
    min-height:44px;
    white-space:nowrap;
    font-size:14px
}

.nav-download {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
    padding:9px 13px;
    color:var(--red);
    background:#d112210a;
    border:1px solid #d112214d;
    border-radius:9px;
    font-weight:600
}

.nav-download .icon {
    width:18px;
    height:18px
}

.nav-download:hover {
    background:#d1122117;
    color:var(--red)
}

.menu-toggle {
    display:none
}

.hero {
    position:relative;
    isolation:isolate;
    background:#141211;
    color:#f8f4ef;
    overflow:hidden;
    padding-top:68px
}

.hero-glow {
    position:absolute;
    inset:260px -10% 0;
    z-index:-1;
    background:radial-gradient(ellipse at 50% 45%,#85312250,transparent 55%)
}

.hero-copy {
    text-align:center;
    position:relative;
    z-index:3
}

.hero-eyebrow {
    color:#d2b9a7;
    font-size:12px;
    letter-spacing:3.5px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px
}

.hero-eyebrow>span {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#ed5e51;
    box-shadow:0 0 14px #f75b48
}

.hero h1 {
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(58px,6.8vw,102px);
    line-height:.99;
    letter-spacing:-3.5px
}

.hero h1 em {
    color:#e5675b
}

.hero-description {
    color:#ced0d8;
    font-size:18px;
    margin-top:26px;
    line-height:1.7
}

.hero-actions {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    margin-top:30px
}

.hero-actions .text-link {
    color:#d5c9bd
}

/* CSS device shells and responsive HTML screen illustrations, without live iframes. */
.device-stage {
    position:relative;
    isolation:isolate;
    pointer-events:none;
    width:min(1150px,94%);
    height:600px;
    margin:52px auto 0;
    perspective:1400px
}

.stage-halo {
    position:absolute;
    inset:5% 0 -8%;
    background:radial-gradient(ellipse at 55% 55%,#af3d293a,transparent 68%);
    border-bottom:1px solid #b56c4730;
    border-radius:50%;
    filter:blur(4px);
    pointer-events:none;
    transition:transform .95s cubic-bezier(.22,.8,.24,1),opacity .8s
}

.laptop-device {
    position:absolute;
    left:8%;
    top:10%;
    width:77%;
    transform:rotateY(7deg) rotateX(5deg) rotateZ(-2deg);
    transform-origin:60% 70%;
    z-index:2;
    transition:transform .95s cubic-bezier(.22,.8,.24,1),opacity .7s,z-index 0s .35s;
    filter:drop-shadow(0 25px 30px #0008)
}

.laptop-lid {
    padding:20px 13px 25px;
    border:2px solid #64605d;
    border-radius:23px 23px 9px 9px;
    background:linear-gradient(135deg,#292728,#0c0c0d 45%,#272326);
    position:relative;
    box-shadow:inset 0 0 0 3px #111,0 0 2px 1px #d5c9b744
}

.camera-dot {
    position:absolute;
    width:5px;
    height:5px;
    background:#333743;
    border:1px solid #50464c;
    border-radius:50%;
    top:8px;
    left:50%
}

.laptop-screen {
    overflow:hidden;
    aspect-ratio:1.71;
    background:#f5f3ee;
    border-radius:5px;
    color:#1b1714;
    container-type:inline-size
}

.device-signature {
    position:absolute;
    bottom:8px;
    left:0;
    width:100%;
    text-align:center;
    font-size:6px;
    color:#8b8682;
    letter-spacing:3px
}

.laptop-base {
    position:relative;
    width:114%;
    left:-7%;
    height:19px;
    background:linear-gradient(#a59c95,#625f5c 30%,#c3b8aa 45%,#625b56 90%);
    border-radius:3px 3px 45% 45%/2px 2px 80% 80%;
    box-shadow:0 9px 6px #0006
}

.laptop-base>span {
    position:absolute;
    width:15%;
    height:8px;
    left:42.5%;
    background:linear-gradient(#2a2523,#90857e);
    border-radius:0 0 10px 10px
}

.phone-device {
    position:absolute;
    width:23.5%;
    aspect-ratio:.478;
    right:7%;
    top:5%;
    background:linear-gradient(130deg,#bab1a7,#403934 25%,#b1a498 55%,#3b3431);
    padding:7px;
    border-radius:41px;
    box-shadow:0 0 0 1px #191411,1px 1px 0 2px #8d797366,0 35px 45px #0009;
    transform:rotateY(-12deg) rotateZ(7deg);
    transition:transform .95s cubic-bezier(.22,.8,.24,1),opacity .7s,z-index 0s .35s;
    z-index:4
}

.phone-screen {
    border:4px solid #090807;
    border-radius:34px;
    background:#f5f3ee;
    height:100%;
    position:relative;
    overflow:hidden;
    color:#241d18;
    container-type:inline-size
}

.phone-island {
    position:absolute;
    top:4cqw;
    width:30%;
    height:6cqw;
    left:35%;
    background:#090807;
    border-radius:20px
}

.phone-buttons:before,.phone-buttons:after {
    content:'';
    position:absolute;
    background:#6f635b;
    width:3px;
    height:42px;
    top:24%;
    left:-3px;
    border-radius:3px
}

.phone-buttons:after {
    top:40%;
    height:27px;
    right:-3px;
    left:auto
}

.phone-status {
    height:15.5cqw;
    padding:5.5cqw 7cqw 0;
    font-size:4cqw;
    font-weight:700;
    display:flex;
    justify-content:space-between
}

.phone-status>span {
    font-size:3cqw;
    letter-spacing:2px
}

.phone-home-bar {
    position:absolute;
    bottom:5px;
    left:34%;
    width:32%;
    height:3px;
    border-radius:9px;
    background:#171411
}

.device-note {
    position:absolute;
    z-index:6;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 18px;
    border-radius:12px;
    background:#312320bd;
    backdrop-filter:blur(18px);
    border:1px solid #c3a39430;
    box-shadow:0 8px 40px #0003;
    font-size:13px;
    transition:opacity .6s,transform .95s cubic-bezier(.22,.8,.24,1)
}

.device-note small {
    display:block;
    color:#c1c9dc;
    font-size:11px;
    margin-top:4px
}

.device-note .icon {
    color:#e59980
}

.note-web {
    left:0;
    bottom:12%;
    transform:rotate(-3deg)
}

.note-app {
    right:0;
    top:0;
    transform:rotate(3deg)
}

.stage-controls {
    position:relative;
    z-index:10;
    isolation:isolate;
    display:flex;
    justify-content:center;
    gap:4px;
    padding:5px;
    background:#151c2ded;
    border:1px solid #7790be66;
    border-radius:40px;
    width:min(380px,calc(100% - 40px));
    margin:20px auto 0
}

.stage-controls::before {
    content:'';
    position:absolute;
    inset:5px auto 5px 5px;
    width:calc(50% - 7px);
    border-radius:30px;
    background:linear-gradient(120deg,var(--blue),#175ee8);
    box-shadow:0 4px 18px #0044cc45,inset 0 1px #ffffff30;
    opacity:0;
    pointer-events:none;
    transition:transform .6s cubic-bezier(.22,.8,.24,1),opacity .3s
}

.stage-controls[data-focus=app]::before,.stage-controls[data-focus=web]::before {
    opacity:1
}

.stage-controls[data-focus=web]::before {
    transform:translateX(calc(100% + 4px))
}

.stage-controls button {
    position:relative;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:30px;
    color:#d1d9eb;
    background:transparent;
    padding:13px 16px;
    font-size:15px;
    font-weight:500;
    min-height:48px;
    transition:background .3s,color .3s
}

.stage-controls button:hover {
    background:#ffffff0c;
    color:white
}

.stage-controls button[aria-pressed=true] {
    color:white
}

.stage-controls .icon {
    width:20px;
    height:20px
}

.device-caption {
    text-align:center;
    color:#e0e4ee;
    font-size:16px;
    margin:20px auto 0;
    max-width:540px;
    min-height:3.3em;
    padding-inline:20px;
    text-wrap:balance
}

.demo-disclaimer {
    text-align:center;
    font-size:12px;
    color:#88786c;
    margin-top:7px
}

.device-stage[data-focus=app] .phone-device {
    transform:translate(-70px,-12px) rotateY(0) rotateZ(0) scale(1.1)
}

.device-stage[data-focus=app] .laptop-device {
    transform:translate(-45px,0) rotateY(14deg) rotateZ(-4deg) scale(.88);
    opacity:.5
}

.device-stage[data-focus=web] .laptop-device {
    transform:translate(25px,-6px) rotateY(0) rotateX(0) rotateZ(0) scale(1.02);
    z-index:4
}

.device-stage[data-focus=web] .phone-device {
    transform:translate(82px,30px) rotateY(-16deg) rotateZ(10deg) scale(.8);
    opacity:.6;
    z-index:2
}

.device-stage[data-focus=app] .stage-halo {
    transform:translateX(12%) scale(.92)
}

.device-stage[data-focus=web] .stage-halo {
    transform:translateX(-8%) scale(1.05)
}

.device-stage[data-focus=app] .note-web,.device-stage[data-focus=web] .note-app {
    opacity:.35;
    transform:translateY(8px)
}

.device-stage[data-focus=app] .note-app,.device-stage[data-focus=web] .note-web {
    transform:translateY(-5px) rotate(0)
}

.hero-bottom {
    width:calc(100% - 96px);
    margin:54px auto 0;
    padding:23px 0;
    border-top:1px solid #ffffff10;
    display:flex;
    justify-content:space-between;
    color:#88796e;
    font-size:11px;
    letter-spacing:2px
}

.hero-bottom a {
    display:flex;
    gap:20px;
    color:#bca795
}

.hero-bottom a span {
    font-size:17px;
    line-height:10px
}

.section-heading {
    text-align:center;
    margin-bottom:56px
}

.section-heading .eyebrow {
    color:#9a7766
}

.section-heading h2>span {
    color:#a7998d
}

.section-heading>p:last-child {
    margin-top:25px;
    color:var(--muted);
    font-size:18px
}

.experience-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.feature-card {
    border-radius:24px;
    background:#eeebe4;
    position:relative;
    overflow:hidden;
    min-width:0;
    display:flex;
    flex-direction:column;
    min-height:508px;
    border:1px solid #e8e2d9
}

.feature-heading {
    padding:32px 30px 0;
    position:relative;
    z-index:2
}

.step {
    font-size:11px;
    letter-spacing:1.8px;
    color:#8a6e5b
}

.feature-heading h3 {
    font:35px/1.12 var(--serif);
    margin-top:17px;
    letter-spacing:-.5px
}

.feature-card>p {
    padding:23px 30px 30px;
    color:#776b60;
    font-size:16px;
    margin-top:auto;
    line-height:1.65
}

.feature-food {
    background:#241a14;
    color:#fff4e5;
    border-color:#241a14
}

.feature-food .step {
    color:#c09c7f
}

.feature-food picture {
    height:235px;
    margin-top:24px;
    overflow:hidden;
    transform:rotate(-6deg) scale(1.05)
}

.feature-food img {
    width:100%;
    height:100%
}

.feature-food>p {
    color:#d0bfb0;
    background:#241a14;
    z-index:1
}

.custom-demo {
    padding:23px 20px;
    background:#fffcf7;
    border:1px solid #e4ddd3;
    border-radius:15px;
    box-shadow:0 12px 25px #7252310b;
    margin:25px 25px 0;
    transform:rotate(3deg)
}

.custom-demo-label {
    font-size:10px;
    color:#a89986;
    letter-spacing:1.5px;
    margin-bottom:17px
}

.custom-demo>div:not(.custom-demo-label) {
    display:flex;
    gap:10px;
    font-size:13px;
    align-items:center;
    margin-top:12px
}

.demo-check {
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    background:var(--red);
    color:white;
    border-radius:5px
}

.demo-check .icon {
    width:13px;
    height:13px;
    stroke-width:2
}

.custom-demo .custom-note {
    display:block!important;
    border-top:1px dashed #dcd2c3;
    padding-top:17px;
    color:#6d6258;
    font-size:12px!important
}

.custom-note span {
    display:block;
    background:#f3eee6;
    border:1px solid #e6dccd;
    border-radius:6px;
    padding:10px;
    margin-top:9px;
    color:#b1a28e;
    font-size:12px
}

.feature-cart {
    background:#e8ede4
}

.pairing-demo {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:34px 20px 30px;
    min-height:180px
}

.pairing-main {
    width:55%;
    background:#fffdf6;
    padding:7px 7px 12px;
    border-radius:15px;
    box-shadow:0 12px 20px #4c61491a;
    transform:rotate(-7deg)
}

.pairing-main img {
    width:100%;
    height:130px;
    border-radius:10px
}

.pairing-main>span {
    display:block;
    font-size:12px;
    text-align:center;
    margin-top:10px
}

.pairing-plus {
    font-size:21px;
    color:#7a8e70
}

.pairing-drink {
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:12px;
    transform:rotate(9deg);
    font-size:12px
}

.section-action {
    text-align:center;
    margin-top:40px
}

.section-action>span {
    display:block;
    color:#8c7e73;
    font-size:14px;
    margin-top:15px
}

.club-section {
    overflow:hidden;
    background:#171614;
    color:#f4eee1;
    padding:100px 0 0;
    position:relative
}

.club-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center
}

.club-copy .eyebrow {
    color:#a78958
}

.club-copy h2 {
    font-size:clamp(44px,5vw,70px)
}

.club-copy h2 em {
    color:var(--gold)
}

.club-copy>p:not(.eyebrow) {
    color:#b0a697;
    max-width:425px;
    font-size:16px;
    margin:26px 0 30px
}

.membership-scene {
    position:relative;
    perspective:900px;
    padding:70px 0;
    isolation:isolate
}

.membership-orbit {
    position:absolute;
    inset:-50px -60px;
    background:radial-gradient(ellipse at center,#97704426,transparent 65%);
    z-index:-1
}

.membership-orbit:before,.membership-orbit:after {
    content:'';
    position:absolute;
    inset:13% -2%;
    border:1px solid #bb926c15;
    border-radius:50%;
    transform:rotate(-28deg)
}

.membership-orbit:after {
    inset:3% 17%;
    transform:rotate(38deg)
}

.membership-card {
    aspect-ratio:1.6;
    border:1px solid #b7986782;
    background:radial-gradient(at 0 0,#6f563d66,transparent 65%),linear-gradient(135deg,#34291e,#1c1915 50%,#3b2e1e);
    border-radius:22px;
    box-shadow:0 28px 40px #0007,inset 0 1px 1px #e6d4b936;
    transform:rotateY(-14deg) rotateZ(-9deg);
    padding:26px 29px;
    color:#dfc398;
    position:relative;
    overflow:hidden
}

.membership-card:after {
    content:'NC';
    position:absolute;
    right:-16px;
    bottom:-70px;
    font:240px var(--serif);
    color:#ecd0a70b;
    pointer-events:none
}

.membership-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font:20px var(--serif)
}

.membership-top .icon {
    width:29px;
    height:29px
}

.membership-title {
    font:47px var(--serif);
    letter-spacing:-1px;
    padding-block:25px 24px
}

.membership-title em {
    color:#fce6be
}

.membership-bottom {
    display:flex;
    justify-content:space-between;
    font-size:7px;
    line-height:1.8;
    letter-spacing:1.7px
}

.membership-bottom>span:last-child {
    text-align:right
}

.club-benefits {
    display:flex;
    justify-content:space-between;
    gap:30px;
    margin-top:65px;
    border-top:1px solid #ffffff12;
    padding-block:27px 35px
}

.club-benefits>div {
    display:flex;
    gap:13px;
    align-items:center;
    color:#aa9e8c;
    font-size:14px
}

.club-benefits .icon {
    color:#bea06b;
    width:20px;
    height:20px
}

.history-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:95px;
    align-items:center
}

.history-photo {
    position:relative
}

.history-photo picture {
    display:block;
    border-radius:22px;
    overflow:hidden
}

.history-photo img {
    width:100%;
    height:580px
}

.history-stamp {
    position:absolute;
    bottom:30px;
    right:-25px;
    width:132px;
    height:132px;
    background:#e5d7c0;
    border-radius:50%;
    border:6px solid var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    font-size:9px;
    letter-spacing:1px;
    transform:rotate(8deg)
}

.history-stamp strong {
    font:37px var(--serif);
    letter-spacing:-1px
}

.history-copy .eyebrow {
    color:#9f725b;
    font-size:11px;
    letter-spacing:1.7px
}

.history-copy h2 {
    font-size:53px
}

.history-copy h2 em {
    color:var(--red)
}

.history-copy>p:not(.eyebrow) {
    font-size:16px;
    color:var(--muted);
    margin-top:23px
}

.history-copy blockquote {
    margin:28px 0 18px;
    font:23px var(--serif);
    padding-left:20px;
    border-left:2px solid #c69378
}

.history-copy cite {
    display:block;
    font:10px var(--sans);
    color:#9d8a7a;
    margin-top:12px
}

.store-section {
    padding-bottom:110px
}

.store-title {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:36px
}

.store-title h2 {
    font-size:49px
}

.store-title .eyebrow {
    color:#9d7c65;
    margin-bottom:15px
}

.store-film {
    height:470px;
    background:#1e1b17;
    border-radius:22px;
    overflow:hidden;
    position:relative
}

.store-film video {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover
}

.store-film:not(.is-playing):after {
    content:'';
    position:absolute;
    inset:0;
    background:#17130f44;
    pointer-events:none
}

.film-play {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:#f5eee2eb;
    backdrop-filter:blur(12px);
    border:1px solid #fff6;
    color:#211911;
    z-index:2;
    border-radius:100px;
    padding:20px 26px;
    display:flex;
    align-items:center;
    gap:16px;
    white-space:nowrap;
    text-align:left
}

.film-play .icon {
    width:32px;
    height:32px;
    color:var(--red)
}

.film-play>span {
    font-size:14px;
    font-weight:600
}

.film-play small {
    display:block;
    font-size:10px;
    font-weight:400;
    color:#998570;
    margin-top:5px
}

.video-message {
    position:absolute;
    bottom:16px;
    left:16px;
    right:16px;
    background:#fff3dc;
    padding:12px;
    border-radius:8px;
    color:#291e11;
    font-size:12px;
    z-index:3
}

.store-address {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:24px;
    color:#807365;
    font-size:14px
}

.store-address>span {
    display:flex;
    gap:9px;
    align-items:center
}

.store-address .icon {
    width:17px;
    height:17px
}

.store-address a {
    color:#31251b;
    text-decoration:underline;
    text-underline-offset:4px;
    white-space:nowrap
}

.final-call {
    position:relative;
    text-align:center;
    background:#171211;
    color:#f8eee2;
    isolation:isolate;
    overflow:hidden
}

.final-glow {
    position:absolute;
    inset:20% 15% -70%;
    background:radial-gradient(ellipse at center,#ad342b55,transparent 65%);
    z-index:-1
}

.final-call .eyebrow {
    color:#b68b70
}

.final-call h2 {
    font-size:clamp(65px,7vw,102px);
    letter-spacing:-3px
}

.final-call h2 em {
    color:#e77c67
}

.final-call .button {
    margin-top:30px
}

.download-heading {
    font-size:15px;
    color:#b69785;
    margin-top:38px
}

.store-badges {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:17px
}

.hero-downloads {
    width:min(420px,calc(100% - 32px));
    margin:30px auto 0;
    text-align:center
}

.hero-downloads>p {
    color:#d4d8e2;
    font-size:15px
}

.store-badge-link {
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#fff;
    width:160px;
    height:52px;
    border:1px solid #75645a
}

.store-badge-link img {
    width:auto;
    height:44px;
    max-width:100%;
    object-fit:contain
}

.site-footer {
    background:#141211;
    color:#b8a999
}

.footer-top {
    display:flex;
    justify-content:space-between;
    gap:40px;
    padding-block:52px 38px
}

.footer-top .brand {
    color:#f1e7da;
    align-self:flex-start
}

.footer-top p {
    font-size:14px;
    color:#817267
}

.footer-top>div {
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:13px
}

.footer-bottom {
    border-top:1px solid #ffffff10;
    padding-block:20px 27px;
    display:flex;
    justify-content:space-between;
    gap:25px;
    font-size:12px;
    color:#817267
}

.footer-bottom>div {
    display:flex;
    gap:25px
}

.footer-bottom a:hover {
    color:#f1e7da
}

.whatsapp-link,.back-to-top {
    position:fixed;
    z-index:30;
    right:22px;
    bottom:22px;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    background:#f4efe6;
    color:#26523c;
    border:1px solid #ddd1c2;
    border-radius:50%;
    box-shadow:0 3px 20px #0002;
    transition:transform .2s
}

.whatsapp-link:hover,.back-to-top:hover {
    transform:translateY(-3px)
}

.whatsapp-link .icon,.back-to-top .icon {
    width:25px;
    height:25px
}

.back-to-top {
    bottom:80px;
    background:var(--blue);
    color:white;
    border-color:#588aff
}

.back-to-top .icon {
    transform:rotate(-90deg)
}

/* Progressive enhancement: readable without scripting, with reduced-motion support. */
@media(prefers-reduced-motion:no-preference) {
    .reveal.is-prepared {
        opacity:0;
        transform:translateY(26px);
        transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)
    }

    .reveal.is-prepared.is-visible {
        opacity:1;
        transform:none
    }

}

@media(max-width:1080px) {
    .nav-shell {
        width:calc(100% - 48px);
        gap:18px
    }

    .nav-links {
        gap:18px
    }

    .wrap {
        width:calc(100% - 64px)
    }

    .device-stage {
        height:54vw;
        max-height:580px
    }

    .laptop-device {
        top:10%;
        left:7%;
        width:78%
    }

    .phone-device {
        width:24%;
        border-radius:34px;
        padding:6px
    }

    .phone-screen {
        border-radius:28px
    }

    .device-note {
        font-size:13px;
        padding:10px 13px;
        gap:8px
    }

    .device-note small {
        font-size:11px
    }

    .note-web {
        bottom:8%;
        left:2%
    }

    .hero-bottom {
        width:calc(100% - 64px)
    }

    .feature-heading {
        padding:26px 23px 0
    }

    .feature-heading h3 {
        font-size:31px
    }

    .feature-card>p {
        padding-inline:23px
    }

    .feature-card {
        min-height:486px
    }

    .custom-demo {
        margin-inline:18px;
        padding:18px 14px
    }

    .custom-demo>div:not(.custom-demo-label) {
        font-size:13px
    }

    .pairing-demo {
        gap:7px;
        margin-inline:15px
    }

    .pairing-main img {
        height:108px
    }

    .club-inner {
        gap:40px
    }

    .membership-card {
        padding:23px
    }

    .membership-title {
        font-size:40px;
        padding-block:20px
    }

    .membership-bottom {
        font-size:6px
    }

    .history-section {
        gap:65px
    }

    .history-photo img {
        height:530px
    }

    .history-copy h2 {
        font-size:43px
    }

    .store-title h2 {
        font-size:43px
    }

}

@media(max-width:760px) {
    .wrap {
        width:calc(100% - 40px)
    }

    .section-space {
        padding-block:76px
    }

}

@media(max-width:1100px) {
    html {
        scroll-padding-top:130px
    }

    .site-header {
        backdrop-filter:blur(12px)
    }

    .nav-shell {
        height:66px;
        width:calc(100% - 32px);
        gap:15px
    }

    .brand {
        gap:8px
    }

    .brand>span {
        font-size:19px
    }

    .brand img {
        width:34px;
        height:34px
    }

    .brand small {
        font-size:6px;
        letter-spacing:1.6px
    }

    .nav-actions {
        margin-left:auto;
        gap:10px
    }

    .nav-actions>.button {
        padding:8px 13px;
        font-size:14px
    }

    .menu-toggle {
        display:flex;
        width:28px;
        height:40px;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        background:none;
        border:0;
        padding:4px;
        color:white
    }

    .menu-toggle span {
        display:block;
        height:1px;
        width:20px;
        background:#d7c6b9;
        transition:transform .2s
    }

    .menu-toggle[aria-expanded=true] span:first-child {
        transform:translateY(3.5px) rotate(45deg)
    }

    .menu-toggle[aria-expanded=true] span:last-child {
        transform:translateY(-3.5px) rotate(-45deg)
    }

    .nav-links {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#1f1916;
        border-bottom:1px solid #ffffff1a;
        padding:20px 25px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        font-size:16px
    }

    .nav-links a {
        padding:13px 0
    }

    .nav-links.is-open {
        display:flex
    }

}

@media(max-width:550px) {
    .nav-shell {
        height:auto;
        flex-wrap:wrap;
        padding-block:12px;
        gap:10px
    }

    .menu-toggle {
        margin-left:auto
    }

    .nav-actions {
        order:1;
        flex-basis:100%
    }

    .nav-actions a {
        flex:1
    }
}

@media(max-width:760px) {
    .hero {
        padding-top:50px
    }

    .hero-eyebrow {
        font-size:12px;
        letter-spacing:2.2px;
        margin-bottom:23px
    }

    .hero h1 {
        font-size:clamp(44px,8vw,64px);
        letter-spacing:-1.8px
    }

    .hero-description {
        font-size:16px;
        padding-inline:20px;
        margin-top:22px;
        line-height:1.7
    }

    .hero-actions {
        gap:17px;
        margin-top:26px
    }

    .hero-actions .button {
        padding:13px 20px;
        font-size:15px;
        min-height:46px
    }

    .hero-actions .text-link {
        font-size:14px;
        gap:8px
    }

    .hero-actions .icon {
        width:17px;
        height:17px
    }

    .device-stage {
        width:100%;
        height:70vw;
        max-height:510px;
        margin-top:48px
    }

    .laptop-device {
        width:85%;
        left:-3%;
        top:13%;
        transform:rotateY(7deg) rotateZ(-3deg)
    }

    .laptop-lid {
        padding:12px 7px 15px;
        border-radius:13px 13px 5px 5px;
        border-width:1px
    }

    .camera-dot {
        top:5px;
        width:3px;
        height:3px
    }

    .device-signature {
        bottom:5px;
        font-size:4px;
        letter-spacing:1.5px
    }

    .laptop-base {
        height:12px
    }

    .laptop-base>span {
        height:5px
    }

    .phone-device {
        width:29%;
        right:6%;
        top:2%;
        padding:4px;
        border-radius:27px;
        transform:rotateY(-10deg) rotateZ(8deg)
    }

    .phone-screen {
        border-width:3px;
        border-radius:23px
    }

    .phone-buttons:before,.phone-buttons:after {
        width:2px;
        height:25px;
        left:-2px
    }

    .phone-buttons:after {
        left:auto;
        right:-2px;
        height:16px
    }

    .device-note {
        display:none
    }

    .device-stage[data-focus=app] .phone-device {
        transform:translate(-42px,-2px) rotate(0) scale(1.12)
    }

    .device-stage[data-focus=app] .laptop-device {
        transform:translate(-12px,18px) rotateZ(-4deg) scale(.9)
    }

    .device-stage[data-focus=web] .laptop-device {
        transform:translate(22px,28px) rotate(0) scale(1)
    }

    .device-stage[data-focus=web] .phone-device {
        transform:translate(20px,-16px) rotate(8deg) scale(.8)
    }

    .stage-controls {
        margin-top:8px
    }

    .stage-controls button {
        padding-inline:10px;
        font-size:14px
    }

    .device-caption {
        font-size:15px;
        padding-inline:20px
    }

    .demo-disclaimer {
        font-size:11px;
        padding-inline:20px
    }

    .hero-bottom {
        width:calc(100% - 40px);
        margin-top:35px;
        font-size:9px;
        letter-spacing:1.3px;
        padding-block:20px
    }

    .hero-bottom a {
        gap:10px
    }

    .hero-bottom a span {
        font-size:12px
    }

    .section-heading {
        margin-bottom:35px
    }

    .section-heading h2 {
        font-size:40px;
        letter-spacing:-1.2px
    }

    .section-heading .eyebrow {
        font-size:11px;
        letter-spacing:1.7px;
        margin-bottom:18px
    }

    .section-heading>p:last-child {
        font-size:16px;
        margin-top:20px
    }

    .desktop-break {
        display:none
    }

    .experience-grid {
        gap:14px;
        grid-template-columns:repeat(3,minmax(260px,1fr));
        overflow-x:auto;
        scroll-snap-type:x proximity;
        padding-bottom:18px;
        width:calc(100% - 20px);
        margin-left:20px;
        padding-right:20px
    }

    .feature-card {
        scroll-snap-align:start;
        min-height:476px;
        border-radius:21px
    }

    .feature-heading {
        padding:28px 24px 0
    }

    .feature-heading h3 {
        font-size:32px
    }

    .feature-card>p {
        font-size:16px;
        padding:22px 24px
    }

    .feature-food picture {
        height:215px
    }

    .custom-demo {
        margin:27px 20px 0;
        padding:22px 18px
    }

    .pairing-demo {
        min-height:190px;
        margin:30px 18px
    }

    .pairing-main img {
        height:120px
    }

    .section-action {
        margin-top:24px;
        padding-inline:20px
    }

    .section-action>span {
        font-size:14px
    }

    .club-section {
        padding-top:70px
    }

    .club-inner {
        grid-template-columns:1fr;
        gap:10px
    }

    .club-copy {
        text-align:center
    }

    .club-copy .eyebrow {
        font-size:11px
    }

    .club-copy h2 {
        font-size:46px;
        letter-spacing:-1.5px
    }

    .club-copy>p:not(.eyebrow) {
        margin:23px auto 28px;
        font-size:16px;
        max-width:340px
    }

    .membership-scene {
        width:min(400px,90%);
        margin:10px auto 0;
        padding:35px 0 45px
    }

    .membership-card {
        padding:23px 25px;
        border-radius:18px
    }

    .membership-top {
        font-size:19px
    }

    .membership-title {
        font-size:40px;
        padding-block:24px
    }

    .membership-bottom {
        font-size:6px
    }

    .club-benefits {
        margin-top:15px;
        gap:17px;
        padding:25px 0 32px;
        flex-direction:column;
        align-items:center
    }

    .club-benefits>div {
        font-size:14px;
        gap:10px
    }

    .club-benefits .icon {
        width:17px;
        height:17px
    }

    .history-section {
        grid-template-columns:1fr;
        gap:48px
    }

    .history-photo {
        width:calc(100% - 20px)
    }

    .history-photo img {
        height:440px
    }

    .history-stamp {
        right:-20px;
        width:118px;
        height:118px;
        font-size:8px
    }

    .history-stamp strong {
        font-size:32px
    }

    .history-copy .eyebrow {
        font-size:11px
    }

    .history-copy h2 {
        font-size:46px
    }

    .history-copy>p:not(.eyebrow) {
        font-size:16px
    }

    .history-copy blockquote {
        font-size:23px
    }

    .store-section {
        padding-bottom:74px
    }

    .store-title {
        display:block;
        margin-bottom:26px
    }

    .store-title h2 {
        font-size:39px
    }

    .store-title .eyebrow {
        font-size:11px
    }

    .store-title>.text-link {
        font-size:15px;
        margin-top:9px
    }

    .store-film {
        height:390px
    }

    .film-play {
        padding:16px 20px;
        gap:11px
    }

    .film-play>span {
        font-size:12px
    }

    .film-play small {
        font-size:9px
    }

    .film-play .icon {
        width:26px;
        height:26px
    }

    .store-address {
        flex-direction:column;
        gap:12px;
        padding-top:20px;
        font-size:14px
    }

    .store-address a {
        align-self:flex-start;
        padding-left:26px
    }

    .final-call h2 {
        font-size:64px;
        letter-spacing:-2px
    }

    .final-call .eyebrow {
        font-size:11px
    }

    .final-call .button {
        margin-top:28px
    }

    .download-heading {
        margin-top:32px;
        font-size:15px
    }

    .store-badges {
        gap:10px
    }

    .store-badge-link {
        width:144px;
        height:48px
    }

    .store-badge-link img {
        height:40px
    }

    .footer-top {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:25px;
        padding-block:40px 30px
    }

    .footer-top>.brand {
        grid-column:1/-1
    }

    .footer-top p {
        font-size:14px
    }

    .footer-top>div {
        font-size:13px;
        gap:12px
    }

    .footer-bottom {
        flex-direction:column;
        gap:18px;
        font-size:12px;
        padding-bottom:65px
    }

    .footer-bottom>div {
        gap:20px;
        flex-wrap:wrap
    }

    .whatsapp-link,.back-to-top {
        width:42px;
        height:42px;
        bottom:16px;
        right:16px
    }

    .back-to-top {
        bottom:70px
    }

    .whatsapp-link .icon,.back-to-top .icon {
        width:23px;
        height:23px
    }

}

@media(max-width:380px) {
    .nav-shell {
        gap:10px
    }

    .brand>span {
        font-size:17px
    }

    .brand img {
        width:30px;
        height:30px
    }

    .brand small {
        font-size:5px
    }

    .hero h1 {
        font-size:42px
    }

    .hero-actions {
        gap:14px
    }

    .hero-actions .button {
        padding:12px 15px;
        font-size:15px
    }

    .hero-actions .text-link {
        font-size:14px
    }

    .phone-device {
        border-radius:23px
    }

    .phone-screen {
        border-radius:19px
    }

    .hero-bottom {
        font-size:9px;
        letter-spacing:.8px
    }

    .section-heading h2 {
        font-size:35px
    }

    .history-copy h2 {
        font-size:41px
    }

    .store-badge-link {
        width:133px
    }

}

/* Keep the full device composition clear of its controls. */
@media(min-width:1081px) {
    .hero {
        padding-top:48px
    }

    .hero h1 {
        font-size:clamp(70px,6.3vw,92px)
    }

    .hero-description {
        margin-top:20px
    }

    .hero-actions {
        margin-top:24px
    }

    .device-stage {
        height:650px;
        margin-top:30px
    }

}

.section-heading h2>span {
    color:#8c7c6f
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }

    .reveal.is-prepared {
        opacity:1!important;
        transform:none!important
    }

}