.mac-demo main{--bar:var(--studio-bar);--bar-soft:var(--studio-bar-soft);--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace}.mac-demo main .demo-chrome{background:var(--paper);border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:9px 12px;display:flex}.mac-demo main .demo-chrome i{background:var(--bar);border-radius:50%;flex:none;width:8px;height:8px}.mac-demo main .demo-address{background:var(--cream);min-width:0;min-height:1.4em;color:var(--muted);font:500 .72rem/1.4 var(--mono);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;flex:1;margin-left:8px;padding:3px 10px;overflow:hidden}.mac-demo main .demo-fan{height:clamp(300px,34vw,420px);position:relative}.mac-demo main .demo-fan:before{content:"";background:var(--field);border-radius:58% 42% 55% 45%/48% 56% 44% 52%;position:absolute;inset:6% -6% -4% 4%}.mac-demo main .demo-frame{border:1px solid var(--border);background:#fff;border-radius:14px;display:block;position:absolute;overflow:hidden;box-shadow:0 24px 50px -24px #232a1c59}.mac-demo main .demo-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;height:auto;display:block}.mac-demo main .demo-frame.back{width:72%;top:0;right:0;transform:rotate(3deg)}.mac-demo main .demo-frame.front{width:74%;bottom:4%;left:0;transform:rotate(-3deg)}@media (max-width:1023px){.mac-demo main .demo-fan{width:100%;height:360px}}@media (max-width:520px){.mac-demo main .demo-fan{height:260px}}.mac-demo main .demo-trying,.mac-demo main .demo-sites{padding:72px 0 96px;scroll-margin-top:64px}.mac-demo main .demo-jump{flex-wrap:wrap;gap:10px;margin:-6px 0 clamp(40px,5vw,64px);display:flex}.mac-demo main .demo-jump a{border:1px solid var(--border);background:#fff;border-radius:999px;padding:9px 16px;font-size:.95rem;font-weight:500;text-decoration:none;transition:border-color .16s,color .16s}.mac-demo main .demo-jump a:hover{border-color:var(--olive);color:var(--olive)}.mac-demo main .demo-jump a span{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px;font-weight:400}.mac-demo main .demo-vertical{scroll-margin-top:88px}.mac-demo main .demo-vertical+.demo-vertical{margin-top:clamp(56px,6vw,80px)}.mac-demo main .demo-vertical-head{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding-bottom:14px;display:flex}.mac-demo main .demo-vertical-head h3{letter-spacing:-.01em;margin:0;font-size:1.6rem;font-weight:700;line-height:1.2}.mac-demo main .demo-vertical-head p{color:var(--muted);margin:0;font-size:1rem;line-height:1.55}.mac-demo main .demo-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(20px,2.6vw,32px);margin-top:26px;display:grid}.mac-demo main .demo-card{border:1px solid var(--border);background:#fff;border-radius:18px;grid-template-rows:auto 1fr;display:grid;overflow:hidden}@media (prefers-reduced-motion:no-preference){.mac-demo main .demo-card{transition:box-shadow .2s,transform .2s}.mac-demo main .demo-card:hover{transform:translateY(-2px);box-shadow:0 22px 44px -28px #232a1c73}}.mac-demo main .demo-card-frame{border-bottom:1px solid var(--border);min-width:0}.mac-demo main .demo-shot{aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--bar-soft);width:100%;height:auto;display:block}.mac-demo main .demo-card-body{grid-template-rows:auto auto 1fr auto;gap:12px;min-width:0;padding:20px 22px 22px;display:grid}.mac-demo main .demo-card-title{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.mac-demo main .demo-card-title h4{letter-spacing:normal;margin:0;font-size:1.22rem;font-weight:700;line-height:1.3}.mac-demo main .demo-card-desc{color:var(--muted);margin:0;font-size:1rem;line-height:1.6}.mac-demo main .demo-card-looks{flex-wrap:wrap;align-self:start;gap:6px 16px;display:flex}.mac-demo main .demo-card-looks li{align-items:center;font-size:.9rem}.mac-demo main .demo-card-looks li svg{width:14px;height:14px;margin-top:0}.mac-demo main .demo-card-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;padding-top:6px;display:flex}.mac-demo main .demo-card-actions .mac-btn{padding:11px 20px;font-size:.95rem}.mac-demo main .demo-card-actions .mac-btn:only-child{margin-left:auto}@media (min-width:820px){.mac-demo main .demo-cards.is-single{grid-template-columns:minmax(0,1fr)}.mac-demo main .demo-cards.is-single .demo-card{grid-template-rows:none;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.mac-demo main .demo-cards.is-single .demo-card-frame{border-bottom:0;border-right:1px solid var(--border)}.mac-demo main .demo-cards.is-single .demo-card-body{grid-template-rows:none;align-content:center;padding:28px 30px}}.mac-demo main .demo-placeholder{--ph-bg:var(--bar-soft);--ph-hero:var(--bar);--ph-accent:var(--leaf);aspect-ratio:16/10;background:var(--ph-bg);grid-template-rows:22% 1fr;gap:6%;width:100%;padding:7% 8%;display:grid}.mac-demo main .demo-placeholder[data-site=isobel-studio]{--ph-bg:#f1ede6;--ph-hero:#c9b8a6;--ph-accent:#8d6f8a}.mac-demo main .demo-placeholder[data-site=healing-hands]{--ph-bg:#eef1ee;--ph-hero:#b9c8bd;--ph-accent:#5f7f6b}.mac-demo main .demo-placeholder[data-site=clayfield]{--ph-bg:#f3ece2;--ph-hero:#d9b99b;--ph-accent:#b07a52}.mac-demo main .demo-placeholder-hero{background:var(--ph-hero);border-radius:8px}.mac-demo main .demo-placeholder-row{grid-template-columns:repeat(3,1fr);gap:6%;display:grid}.mac-demo main .demo-placeholder-card{background:#fff;border-radius:8px;align-content:start;gap:10%;padding:10%;display:grid}.mac-demo main .demo-placeholder-card i{background:var(--bar);border-radius:3px;height:6px;display:block}.mac-demo main .demo-placeholder-card i:first-child{background:var(--ph-accent);width:70%}.mac-demo main .demo-placeholder-card i:nth-child(3){width:55%}.mac-demo main .demo-claim,.mac-demo main .demo-claim-sent{background:var(--field);border-radius:14px;gap:10px;margin-top:2px;padding:16px;display:grid}.mac-demo main .demo-claim label{color:var(--text);font-size:.92rem;font-weight:600}.mac-demo main .demo-claim-row{flex-wrap:wrap;gap:8px;display:flex}.mac-demo main .demo-claim-row input{background:#fff;flex:180px;width:auto;min-width:0}.mac-demo main .demo-claim-row .mac-btn{padding:11px 20px;font-size:.95rem}.mac-demo main .demo-claim-cancel{cursor:pointer;font:600 .9rem var(--studio-font);color:var(--muted);text-underline-offset:4px;background:0 0;border:0;justify-self:start;padding:0;text-decoration:underline}.mac-demo main .demo-claim-cancel:hover{color:var(--text)}.mac-demo main .demo-claim-sent strong{color:var(--text);font-weight:600}.mac-demo main .demo-claim-sent p{color:var(--muted);overflow-wrap:anywhere;margin:0;font-size:.92rem;line-height:1.55}.mac-demo main .demo-good{padding:72px 0 104px}.mac-demo main .demo-notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;margin:0;padding:0;list-style:none;display:grid}.mac-demo main .demo-notes li{grid-template-columns:28px minmax(0,1fr);align-items:start;gap:12px;display:grid}.mac-demo main .demo-notes svg{width:26px;height:26px;color:var(--olive);margin-top:1px}.mac-demo main .demo-notes svg .shape{fill:var(--field);stroke:currentColor;stroke-width:1.6px}.mac-demo main .demo-notes svg .bar{fill:currentColor}.mac-demo main .demo-notes svg .line{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.mac-demo main .demo-notes p{color:var(--muted);margin:0;font-size:1.02rem;line-height:1.6}.mac-demo main .demo-notes strong{color:var(--text);font-weight:600}.mac-demo main .demo-test-card{font-family:var(--mono);color:var(--text);white-space:nowrap;font-size:.92em}@media (max-width:760px){.mac-demo main .demo-notes{grid-template-columns:minmax(0,1fr)}}@media (max-width:640px){.mac-demo main .demo-trying,.mac-demo main .demo-sites{padding:56px 0 72px}.mac-demo main .demo-good{padding:56px 0 80px}}
