/* Nicely Dressed Code — a small, tailored layer over Quarto + Bootstrap. */
:root { --ndc-ink:#181919; --ndc-muted:#5d6060; --ndc-paper:#f4f5f3; --ndc-card:#ffffff; --ndc-line:#d6d9d6; --ndc-accent:#c8613e; --ndc-accent-dark:#934128; --ndc-wash:#e9ece9; --ndc-radius:1.5rem; --ndc-shadow:0 18px 44px rgba(28,31,30,.07); }
html { scroll-padding-top:6rem; }
body { color:var(--ndc-ink); background:var(--ndc-paper); font-size:1.03rem; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { text-underline-offset:.2em; }
a:focus-visible, button:focus-visible { outline:3px solid var(--ndc-accent); outline-offset:4px; }
h1,h2,h3,.navbar-brand { color:var(--ndc-ink); letter-spacing:-.035em; }
h1 { font-size:clamp(2.5rem,6vw,5.6rem); line-height:.98; }
h2 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.06; }
main h2 { padding-bottom:0; border-bottom:0; }
h3 { font-size:1.35rem; line-height:1.2; }
.navbar { background:rgba(244,245,243,.94)!important; border-bottom:1px solid rgba(24,25,25,.1); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.navbar .container-fluid { max-width:1180px; }
.navbar-brand { font-weight:750; }
.navbar-logo { max-height:2.35rem; }
.navbar-nav .nav-link { color:var(--ndc-ink)!important; font-weight:650; }
.navbar-nav .nav-link:hover { color:var(--ndc-accent-dark)!important; }
@media (min-width:768px) { .navbar .navbar-collapse{justify-content:flex-end}.navbar .navbar-nav{margin-left:auto!important;margin-right:0!important} }
#quarto-content { min-height:calc(100vh - 13rem); }
main.content { margin-top:0; margin-bottom:0; padding-top:4rem; padding-bottom:6rem; }
.page-layout-full main.content { padding-top:0; }
.quarto-title-block.default { border-bottom:1px solid var(--ndc-line); margin-bottom:3rem; padding-bottom:2rem; }
.quarto-title-block.default .description { display:none; }
.page-layout-full:has(.ndc-hero) .quarto-title-block, body:has(.product-hero) .quarto-title-block { display:none; }
.quarto-title-block.default .title { color:var(--ndc-ink); font-size:clamp(2.7rem,6vw,5rem); }
.quarto-title-block.default .subtitle { color:var(--ndc-muted); font-size:1.25rem; }
.eyebrow { color:var(--ndc-accent-dark); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.lede { color:var(--ndc-muted); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.5; max-width:42rem; }
.ndc-hero { min-height:min(650px,78vh); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr); align-items:center; gap:clamp(2rem,8vw,7rem); max-width:1180px; margin:0 auto; padding:5rem 1.5rem; }
.ndc-hero h1 { max-width:800px; margin:.4rem 0 1.5rem; }
.ndc-hero .hero-mark { text-align:center; }
.ndc-hero .hero-mark img { width:min(100%,320px); }
.button-row { margin-top:2rem; }
.button-row > p { display:flex; flex-wrap:wrap; gap:.8rem; margin:0; }
.ndc-button { display:inline-flex; align-items:center; justify-content:center; min-height:3.15rem; padding:.7rem 1.2rem; border:1px solid var(--ndc-ink); border-radius:999px; color:var(--ndc-paper); background:var(--ndc-ink); font-weight:750; text-decoration:none; transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease; }
.ndc-button:hover { color:#fff; background:var(--ndc-accent-dark); border-color:var(--ndc-accent-dark); }
.ndc-button.secondary { color:var(--ndc-ink); background:transparent; }
.ndc-button.secondary:hover { color:var(--ndc-accent-dark); background:var(--ndc-card); border-color:var(--ndc-accent-dark); }
.section-shell { max-width:1180px; margin:0 auto; padding:5rem 1.5rem; }
.section-shell.compact { max-width:900px; }
.section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.7fr); gap:3rem; align-items:end; margin-bottom:3rem; }
.section-heading h2 { margin:.35rem 0 0; }
.section-heading p { color:var(--ndc-muted); margin:0; }
.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:3rem; }
.app-card { position:relative; display:grid; grid-template-columns:92px 1fr; gap:1.25rem; align-items:center; min-height:165px; padding:1.6rem 0; border-top:1px solid var(--ndc-line); border-radius:0; background:transparent; }
.app-card img { width:92px; height:92px; border-radius:24%; object-fit:cover; }
.app-card h3 { margin:0 0 .35rem; font-size:1.65rem; }
.app-card h3 a { text-decoration:none; }
.app-card h3 a:hover { color:var(--ndc-accent-dark); }
.app-card p { color:var(--ndc-muted); line-height:1.45; margin:0; }
.app-card .platform { display:block; margin-top:.9rem; color:var(--ndc-accent-dark); font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.app-card h3 a::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.studio-strip { color:var(--ndc-ink); border-top:1px solid var(--ndc-line); border-bottom:1px solid var(--ndc-line); }
.studio-strip h2,.studio-strip h3 { color:var(--ndc-ink); }
.studio-strip .eyebrow { color:var(--ndc-accent-dark); }
.studio-values { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; }
.studio-values p { color:var(--ndc-muted); }
.value-icon { display:inline-block; margin-bottom:.75rem; color:var(--ndc-accent-dark); font-size:1.15rem; }
.ndc-button .bi { margin-right:.5rem; }
.product-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,360px); gap:clamp(2rem,8vw,7rem); align-items:center; padding:3rem 0 5rem; border-bottom:1px solid var(--ndc-line); }
.product-hero h1 { margin:.4rem 0 1rem; }
.product-hero .product-icon { text-align:center; }
.product-hero .product-icon img { width:min(100%,300px); border-radius:24%; box-shadow:0 12px 32px rgba(28,31,30,.06); }
.product-meta { display:flex; flex-wrap:wrap; gap:.35rem 0; margin-top:1.5rem; color:var(--ndc-muted); font-size:.86rem; font-weight:700; }
.product-meta span { padding:0; border:0; }
.product-meta span:not(:last-child)::after { content:"·"; margin:0 .65rem; color:#aaa598; }
.app-store-cta { margin:1.6rem 0 0; }
.app-store-cta img { display:block; width:162px; height:auto; }
.product-showcase.panel-tabset { margin:4rem 0 1rem; padding:clamp(2rem,5vw,4.5rem); border-radius:var(--ndc-radius); background:var(--ndc-wash); overflow:hidden; }
.product-showcase .nav-tabs { justify-content:center; gap:.45rem; margin:0 0 2.5rem; border:0; }
.product-showcase .nav-tabs .nav-link { padding:.55rem .9rem; border:0; border-radius:999px; color:var(--ndc-muted); font-weight:650; }
.product-showcase .nav-tabs .nav-link:hover { color:var(--ndc-ink); background:rgba(255,255,255,.55); }
.product-showcase .nav-tabs .nav-link.active { color:var(--ndc-ink); background:var(--ndc-card); box-shadow:0 1px 2px rgba(28,34,31,.08); }
.product-showcase .tab-content { padding:0; border:0; }
.product-showcase .showcase-copy { max-width:760px; margin:0 auto; text-align:center; }
.product-showcase .showcase-copy h3 { margin:.35rem 0 .8rem; font-size:clamp(1.8rem,4vw,2.7rem); }
.product-showcase .showcase-copy>p:last-child { max-width:650px; margin:0 auto; color:var(--ndc-muted); font-size:1.08rem; }
.watercal-showcase.panel-tabset { background:linear-gradient(135deg,#eaf2f5 0%,#f1efea 100%); }
.device-showcase { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(2rem,6vw,5rem); align-items:center; max-width:900px; margin:2.5rem auto 0; overflow:hidden; }
.device-showcase .device-shot { display:flex; align-items:center; justify-content:center; min-width:0; }
.device-showcase p { margin:0; }
.device-showcase img { display:block; width:auto; max-width:100%; max-height:34rem; margin:0 auto; }
.device-shot-phone img { max-height:30rem; }
.device-showcase-watch { grid-template-columns:minmax(0,.8fr) minmax(230px,.52fr); max-width:820px; }
.device-shot-watch img { max-height:30rem; }
.device-carousel { display:flex; gap:1.25rem; max-width:100%; margin:2.5rem auto 0; padding:.25rem .1rem 1rem; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-color:rgba(24,25,25,.22) transparent; }
.device-carousel-item { flex:0 0 88%; min-width:0; scroll-snap-align:center; text-align:center; }
.device-carousel-item p { margin:0; }
.device-carousel-item img { display:block; width:100%; max-height:36rem; margin:0 auto .75rem; object-fit:contain; }
.device-carousel-item span { color:var(--ndc-muted); font-size:.82rem; font-weight:750; letter-spacing:.04em; }
.device-carousel-watch .device-carousel-item { flex-basis:42%; }
.device-carousel-watch .device-carousel-item img { max-height:31rem; }
.glance-section { margin:5rem 0; }
.glance-heading { max-width:760px; margin-bottom:2.25rem; }
.glance-heading h2 { margin:.35rem 0 1rem; }
.glance-heading>p:last-child { color:var(--ndc-muted); font-size:1.08rem; }
.glance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.glance-panel { min-width:0; padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--ndc-radius); background:var(--ndc-wash); overflow:hidden; }
.glance-panel-copy { position:relative; z-index:2; max-width:31rem; }
.glance-panel-copy h3 { margin:0 0 .65rem; font-size:1.55rem; }
.glance-panel-copy p { margin:0; color:var(--ndc-muted); }
.glance-context { display:inline-flex; align-items:center; gap:.45rem; margin:1.4rem 0 .25rem; color:var(--ndc-accent-dark); font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.widget-device-stage { display:flex; align-items:center; justify-content:center; min-height:31rem; padding:1rem 0 0; }
.widget-device-stage p { margin:0; }
.widget-device-stage img { display:block; width:auto; max-width:92%; max-height:30rem; margin:0 auto; filter:drop-shadow(0 22px 26px rgba(18,24,27,.17)); }
.watch-variants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:1rem; }
.watch-variant { display:flex; flex-direction:column; align-items:center; min-width:0; padding:.85rem .45rem 1rem; border-radius:1rem; background:linear-gradient(155deg,#20272d 0%,#090b0d 100%); overflow:hidden; }
.watch-variant p { margin:0; }
.watch-variant img { display:block; width:100%; height:22rem; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.28)); }
.watch-variant span { margin-top:.4rem; color:#f4f5f3; font-size:.76rem; font-weight:750; letter-spacing:.04em; text-align:center; }
.feature-intro { max-width:760px; padding:3.75rem 0 1.5rem; }
.feature-intro h2 { margin:.35rem 0 1rem; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2.5rem; margin:2rem 0 5rem; }
.feature-card { padding:1.75rem 0; border-top:1px solid var(--ndc-line); border-radius:0; background:transparent; }
.feature-card h3 { margin-top:0; }
.feature-card p { color:var(--ndc-muted); margin-bottom:0; }
.platform-panel { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:clamp(2rem,7vw,6rem); align-items:center; margin:4rem 0; padding:3.5rem 0; border-top:1px solid var(--ndc-line); border-bottom:1px solid var(--ndc-line); }
.platform-panel h2 { margin:.35rem 0 1rem; }
.platform-panel>div:first-child>p:last-child { max-width:650px; color:var(--ndc-muted); }
.platform-list { display:grid; grid-template-columns:1fr; gap:.8rem; }
.platform-list span { display:flex; align-items:center; gap:.75rem; min-width:0; font-weight:750; white-space:nowrap; }
.platform-list .bi { display:inline-flex; flex:0 0 2.5rem; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:50%; color:var(--ndc-accent-dark); background:var(--ndc-card); font-size:1.15rem; }
.promise { display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:start; margin:4rem 0 1rem; padding:2rem 0; border-top:1px solid var(--ndc-line); border-bottom:1px solid var(--ndc-line); border-radius:0; background:transparent; }
.promise-icon { font-size:2rem; line-height:1; }
.promise h2 { margin:0 0 .5rem; font-size:1.65rem; }
.promise p { margin:0; color:var(--ndc-muted); }
.download-panel { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:4rem 0 2rem; }
.download-panel h2 { margin:0 0 .5rem; font-size:2rem; }
.download-panel p { margin:0; color:var(--ndc-muted); }
.download-panel .app-store-cta { flex:0 0 auto; margin:0; }
.apple-legal { margin:1.5rem 0 0; color:var(--ndc-muted); font-size:.72rem; line-height:1.45; }
.profile-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:3rem; }
.profile-card { padding:2rem 0; border:0; border-radius:0; background:transparent; }
.profile-card img { width:180px; height:220px; border-radius:1.35rem; object-fit:cover; }
.profile-card h2 { margin:1.5rem 0 .25rem; font-size:2rem; }
.profile-card .role { color:var(--ndc-accent-dark); font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.support-panel { padding:clamp(2rem,5vw,4rem) 0; border-bottom:1px solid var(--ndc-line); border-radius:0; background:transparent; color:var(--ndc-ink); }
.support-panel h2 { color:var(--ndc-ink); }
.support-panel p { color:var(--ndc-muted); max-width:40rem; }
.policy-nav { display:flex; flex-wrap:wrap; gap:.55rem 1.15rem; margin:2rem 0 3.5rem; }
.policy-nav a { padding:0; border:0; border-radius:0; color:var(--ndc-ink); font-size:.9rem; font-weight:700; text-decoration:underline; text-decoration-color:var(--ndc-line); text-underline-offset:.28em; }
.policy-nav a:hover { color:var(--ndc-accent-dark); text-decoration-color:currentColor; }
.policy-section { padding:2rem 0; border-top:1px solid var(--ndc-line); }
.policy-section h2 { font-size:2rem; }
.nav-footer { background:var(--ndc-paper); border-top:1px solid var(--ndc-line); }
.nav-footer a { color:var(--ndc-ink); }
@media (max-width:767px) { body{font-size:1rem} .navbar .navbar-brand-container{order:0;margin-left:0!important;margin-right:0!important}.navbar .navbar-toggler{order:1;margin-left:auto!important;margin-right:0!important}.navbar .navbar-collapse{order:2}.navbar-brand:not(.navbar-brand-logo){display:none} main.content{padding-top:2.25rem;padding-bottom:3.5rem}.ndc-hero{min-height:auto;grid-template-columns:1fr;gap:1.4rem;padding-top:2.5rem;padding-bottom:3rem}.ndc-hero .hero-mark{grid-row:1}.ndc-hero .hero-mark img{width:128px}.ndc-hero h1{margin-bottom:1rem}.button-row{margin-top:1.5rem}.button-row>p{gap:.65rem}.section-shell{padding-top:3.5rem;padding-bottom:3.5rem}.section-heading,.product-hero{grid-template-columns:1fr;gap:1.25rem}.section-heading{margin-bottom:2rem}.app-grid,.feature-grid,.profile-grid,.studio-values{grid-template-columns:1fr}.app-card{grid-template-columns:76px 1fr;min-height:142px;padding:1.2rem 0}.app-card img{width:76px;height:76px}.app-card h3{font-size:1.4rem}.product-hero{padding-top:.5rem;padding-bottom:3rem}.product-hero .product-icon{grid-row:1}.product-hero .product-icon img{width:150px}.product-showcase.panel-tabset{margin-top:3rem;padding:2rem 1.25rem}.product-showcase .nav-tabs{justify-content:flex-start;gap:.25rem;margin-bottom:2rem}.product-showcase .nav-tabs .nav-link{padding:.5rem .7rem;font-size:.88rem}.product-showcase .showcase-copy{text-align:left}.product-showcase .showcase-copy>p:last-child{font-size:1rem}.device-showcase{grid-template-columns:1fr;margin-top:2rem}.device-shot-phone img{max-height:28rem}.device-showcase .device-shot-tablet{display:none}.device-showcase-watch{gap:2.25rem}.device-shot-watch img{max-height:25rem}.feature-intro{padding:3rem 0 1rem}.feature-grid{margin-top:1rem;margin-bottom:3rem}.feature-card{padding:1.4rem 0}.platform-panel{grid-template-columns:1fr;gap:2rem;margin:3rem 0;padding:2.5rem 0}.platform-list{grid-template-columns:1fr}.promise{grid-template-columns:1fr;margin-top:3rem}.download-panel{align-items:flex-start;flex-direction:column;padding-top:3rem}.quarto-title-block.default{margin-bottom:2rem}.profile-grid{gap:1.5rem}.profile-card+.profile-card{border-top:1px solid var(--ndc-line)}.nav-footer{font-size:.9rem} }
@media (max-width:767px) { .product-showcase .nav-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.product-showcase .nav-tabs::-webkit-scrollbar{display:none}.product-showcase .nav-tabs .nav-item{flex:0 0 auto} }
@media (max-width:479px) { .button-row>p{flex-direction:column;align-items:stretch}.button-row .ndc-button{width:100%} }
@media (max-width:767px) { .device-carousel-item,.device-carousel-watch .device-carousel-item{flex-basis:86%}.device-carousel-item img{max-height:28rem}.device-carousel-watch .device-carousel-item img{max-height:25rem}.glance-section{margin:4rem 0}.glance-grid{grid-template-columns:1fr}.widget-device-stage{min-height:27rem}.widget-device-stage img{max-height:26rem}.watch-variant img{height:19rem} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important} }
