/* Product page. All brand values come from the public C.Nord design tokens. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-surface);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-body)}
h1,h2,h3,p,figure{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
a{color:var(--color-brand)}
button{font:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--color-brand-active);outline-offset:5px}
.ma-wrap{width:min(var(--container),calc(100% - 48px));margin:auto}
.ma-section{padding-top:var(--space-20);scroll-margin-top:var(--space-6)}
.ma-section:last-child{padding-bottom:var(--space-20)}
.ma-title{font-size:var(--text-h2);font-weight:var(--weight-bold);line-height:var(--lh-h2);max-width:940px;letter-spacing:-.025em;margin-bottom:var(--space-10)}
.ma-lead{font-size:var(--text-lead);line-height:var(--lh-lead)}
.ma-muted{color:var(--color-muted)}
.ma-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);min-height:54px;padding:var(--space-3) var(--space-8);border:0;border-radius:var(--radius-pill);background:var(--color-brand);color:var(--color-on-brand);font-size:20px;font-weight:var(--weight-bold);text-decoration:none;cursor:pointer;transition:background .15s}
.ma-btn:hover{background:var(--color-brand-hover)}
.ma-btn:active{background:var(--color-brand-active)}
.ma-btn svg{width:22px;height:22px}
.ma-small{font-size:var(--text-small);line-height:var(--lh-small)}
.ma-icon{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ma-skip{position:absolute;left:var(--space-6);top:-100px;z-index:1000;padding:var(--space-3);background:var(--color-surface)}
.ma-skip:focus{top:var(--space-3)}
.ma-hero{position:relative;isolation:isolate;margin-top:var(--space-8);background:var(--color-surface-3);border-radius:var(--radius-card);overflow:hidden}
.ma-hero-main{display:grid;grid-template-columns:1.1fr 1fr;min-height:600px}
.ma-hero-copy{padding:var(--space-15);align-self:center;min-width:0}
.ma-eyebrow{font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);line-height:var(--lh-small);color:var(--color-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-5)}
.ma-hero h1{font-size:clamp(40px,4.5vw,62px);line-height:1.02;font-weight:var(--weight-bold);letter-spacing:-.035em;margin-bottom:var(--space-6)}
.ma-hero h1 span{color:var(--color-brand);display:block;margin-bottom:var(--space-2)}
.ma-hero-copy>p+p{margin-top:var(--space-4)}
.ma-hero-cta{margin-top:var(--space-8)}
.ma-hero-cta .ma-small{max-width:350px;margin-top:var(--space-3)}
/* The enlarged case stays inside the card, cropped by its rounded bottom and right edges. */
.ma-product{position:relative;min-width:0;pointer-events:none}
.ma-product img{position:absolute;top:var(--space-8);right:-23%;display:block;width:123%;max-width:none;height:auto}
.ma-problem-intro{max-width:780px;color:var(--color-muted);margin-top:calc(-1 * var(--space-5));margin-bottom:var(--space-8)}
.ma-problems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);list-style:none;padding:0;margin:0}
.ma-problems li{border-top:1px solid var(--color-border);padding-top:var(--space-5)}
.ma-problem-number{display:block;font-size:40px;line-height:1;color:var(--color-brand);font-weight:var(--weight-bold);margin-bottom:var(--space-5)}
.ma-problem-answer{display:grid;grid-template-columns:.85fr 1.5fr;align-items:center;gap:var(--space-8);background:var(--color-surface-3);color:var(--color-ink);border-radius:var(--radius-card);padding:var(--space-8);margin-top:var(--space-8)}
.ma-problem-copy{min-width:0}
.ma-problem-image{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.ma-problem-answer p{font-size:var(--text-lead);line-height:var(--lh-lead)}
.ma-problem-answer p+p{margin-top:var(--space-5)}
.ma-task-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-5)}
.ma-task{padding:var(--space-8);border-radius:var(--radius-card);background:var(--color-surface-3)}
.ma-task:nth-child(2){background:var(--color-accent-teal)}
.ma-task:nth-child(3){background:var(--color-brand);color:var(--color-on-brand)}
.ma-task .ma-icon{width:44px;height:44px;margin-bottom:var(--space-6)}
.ma-task h3{font-size:26px;line-height:var(--lh-h3);margin-bottom:var(--space-4);font-weight:var(--weight-bold)}
.ma-task p{font-size:16px;line-height:var(--lh-body)}
.ma-comparison{margin-top:var(--space-5);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-8)}
.ma-comparison-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.ma-comparison-head h3{font-size:26px;line-height:var(--lh-h3)}
.ma-draft-label{color:var(--color-muted);font-size:var(--text-small)}
.ma-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.ma-compare-item{min-width:0}
.ma-compare-item>strong{display:block;margin-bottom:var(--space-3);color:var(--color-brand)}
.ma-map{display:block;width:100%;height:auto;border-radius:var(--radius-sm);background:var(--color-surface-3);color:var(--color-ink)}
.ma-map .ground{fill:var(--color-surface-3)}
.ma-map .building{fill:var(--color-surface);stroke:var(--color-muted-2);stroke-width:2}
.ma-map .road{fill:none;stroke:var(--color-muted-2);stroke-width:2;stroke-dasharray:8 7}
.ma-map .cone{fill:var(--color-brand);opacity:.12}
.ma-map .zone{fill:none;stroke:var(--color-brand);stroke-width:2;stroke-dasharray:6 5}
.ma-map .accent{fill:var(--color-brand)}
.ma-map .car{fill:var(--color-surface);stroke:var(--color-muted-2);stroke-width:2}
.ma-map .detection{fill:none;stroke:var(--color-accent-teal-ink);stroke-width:2}
.ma-map .map-icon{fill:none;stroke:var(--color-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ma-map text{font:16px var(--font-sans);fill:var(--color-muted)}
.ma-compare-item p{margin-top:var(--space-3);color:var(--color-muted)}
.ma-comparison>figcaption{max-width:880px;color:var(--color-muted);margin-top:var(--space-6)}
.ma-system{border-radius:var(--radius-card);background:var(--color-surface-3);color:var(--color-ink);overflow:hidden}
.ma-system-scene{position:relative}
.ma-system-visual{position:relative}
.ma-system-image{display:block;width:100%;height:auto}
.ma-system-notes{position:absolute;inset:0}
.ma-system-note{position:absolute;width:27%;padding:var(--space-4) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-surface) 96%,transparent);box-shadow:var(--shadow-card);scroll-margin-top:var(--space-6)}
.ma-system-note h3{display:flex;align-items:center;gap:var(--space-3);font-size:20px;line-height:1.2;font-weight:var(--weight-bold);margin-bottom:var(--space-2)}
.ma-system-step-number{display:grid;place-items:center;flex:0 0 28px;width:28px;min-width:28px;height:28px;border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-size:16px;line-height:1}
.ma-system-note p{font-size:16px;line-height:var(--lh-body);color:var(--color-muted)}
.ma-system-note--cameras{top:3%;left:3%}
.ma-system-note--agent{top:53%;left:29%;width:18%}
.ma-system-note--operator{top:3%;left:52%;width:17%}
.ma-system-note--agent h3,.ma-system-note--operator h3{flex-direction:column;align-items:flex-start}
.ma-system-note--response{top:76%;left:61%;width:27%;padding:var(--space-3) var(--space-4)}
.ma-system-note--agent::before{content:"";position:absolute;left:100%;top:var(--space-8);width:var(--space-6);border-top:1px solid var(--color-muted-2)}
.ma-system-markers{display:none}
.ma-system-marker{position:absolute;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--color-on-brand);border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-size:20px;font-weight:var(--weight-bold);line-height:1;text-decoration:none;box-shadow:var(--shadow-card);transform:translate(-50%,-50%)}
.ma-system-marker:hover{background:var(--color-brand-hover)}
.ma-system-marker--cameras{left:11%;top:34%}
.ma-system-marker--agent{left:52%;top:54%}
.ma-system-marker--operator{left:79%;top:30%}
.ma-system-marker--response{left:84%;top:70%}
.ma-system-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-5)}
.ma-system-facts article{padding:var(--space-8);background:var(--color-surface-3);border-radius:var(--radius-card)}
.ma-system-facts h3{font-size:24px;line-height:1.2;margin-bottom:var(--space-3)}
.ma-system-facts p{color:var(--color-muted)}
.ma-setup-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;list-style:none;padding:0;margin:0}
.ma-setup-step{position:relative;min-width:0}
.ma-setup-step:not(:last-child)::after{content:"→";position:absolute;top:0;right:-36px;width:24px;color:var(--color-brand);font-size:28px;line-height:36px;text-align:center}
.ma-setup-number{display:grid;place-items:center;width:36px;height:36px;margin-bottom:var(--space-5);border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-size:20px;font-weight:var(--weight-bold);line-height:1}
.ma-setup-gallery{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);align-items:start;gap:var(--space-6);margin-top:var(--space-10)}
.ma-setup-main{min-width:0}
.ma-setup-gallery a{display:block;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface)}
.ma-setup-main a{cursor:zoom-in}
.ma-setup-gallery img{display:block;width:100%;height:auto}
.ma-setup-thumbnails{display:grid;gap:var(--space-6)}
.ma-setup-thumbnails a{cursor:pointer;transition:opacity .15s}
.ma-setup-thumbnails a:hover{opacity:.75}
.ma-image-dialog-bar button{border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);background:var(--color-surface);color:var(--color-ink);cursor:pointer}
.ma-image-dialog{width:max-content;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);overflow:hidden}
.ma-image-dialog::backdrop{background:rgb(0 0 0 / .75)}
.ma-image-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-4);margin:0;border-bottom:1px solid var(--color-border)}
.ma-image-dialog-bar button{flex-shrink:0}
.ma-image-dialog-scroll{overflow:auto;max-height:calc(100dvh - 140px)}
.ma-image-dialog-scroll img{display:block;max-width:none;height:auto}
body:has(.ma-image-dialog[open]){overflow:hidden}
.ma-gallery-intro{color:var(--color-muted);margin-top:calc(-1 * var(--space-5));margin-bottom:var(--space-6)}
.ma-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) var(--space-8)}
.ma-gallery-item{min-width:0}
.ma-gallery-item figcaption{margin-top:var(--space-4)}
.ma-photo-toggle{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-ink);color:var(--color-on-brand);text-align:left;cursor:pointer}
.ma-photo-toggle img{display:block;width:100%;height:auto}
.ma-photo-toggle img[hidden]{display:none}
.ma-photo-state{position:absolute;top:var(--space-4);left:var(--space-4);max-width:calc(100% - var(--space-8));padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink);font-size:14px;font-weight:var(--weight-semibold);line-height:1.2}
.ma-photo-toggle[aria-pressed="true"] .ma-photo-state{background:var(--color-brand);color:var(--color-on-brand)}
.ma-photo-hint{position:absolute;right:var(--space-4);bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);background:var(--color-brand);color:var(--color-on-brand);font-size:14px;font-weight:var(--weight-semibold);line-height:1.2}
.ma-photo-hint::before{content:"↔";font-size:20px;line-height:1}
.ma-photo-toggle:hover .ma-photo-hint{background:var(--color-brand-hover)}
.ma-photo-dots{position:absolute;bottom:var(--space-6);left:var(--space-4);display:flex;gap:var(--space-2)}
.ma-photo-dots span{width:8px;height:8px;border:1px solid var(--color-on-brand);border-radius:50%;background:var(--color-on-brand);opacity:.45}
.ma-photo-dots span:first-child{opacity:1}
.ma-photo-toggle[aria-pressed="true"] .ma-photo-dots span:first-child{opacity:.45}
.ma-photo-toggle[aria-pressed="true"] .ma-photo-dots span:last-child{opacity:1}
.ma-feature-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-15)}
.ma-feature{padding:var(--space-8) 0;border-top:1px solid var(--color-border);display:grid;grid-template-columns:40px 1fr;gap:var(--space-5)}
.ma-feature>.ma-icon{color:var(--color-brand)}
.ma-feature h3{font-size:24px;line-height:1.2;margin-bottom:var(--space-3)}
.ma-feature p{color:var(--color-muted)}
.ma-feature p+p{margin-top:var(--space-3)}
.ma-feature:last-child{grid-column:1/-1;max-width:820px}
.ma-commerce{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-10)}
.ma-commerce h3{font-size:26px;line-height:1.2;margin-bottom:var(--space-5)}
.ma-commerce p+p{margin-top:var(--space-4)}
.ma-offer{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface-3)}
.ma-price{padding:var(--space-10);background:var(--color-brand);color:var(--color-on-brand);display:flex;flex-direction:column;align-items:flex-start}
.ma-discount{display:inline-flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-3)}
.ma-discount del{font-size:24px;color:var(--color-on-brand)}
.ma-discount span{background:var(--color-accent-yellow);color:var(--color-ink);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-weight:var(--weight-bold)}
.ma-price-value{font-size:clamp(46px,6vw,76px);font-weight:var(--weight-bold);line-height:1.1;letter-spacing:-.03em;white-space:nowrap}
.ma-price-subtitle{font-size:22px;line-height:1.3;max-width:330px;margin-top:var(--space-3)}
.ma-price-terms{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-brand-active);width:100%}
.ma-price-terms p+p{margin-top:var(--space-2)}
.ma-pilot{padding:var(--space-10)}
.ma-pilot h3{font-size:var(--text-h3);line-height:var(--lh-h3);margin-bottom:var(--space-5)}
.ma-pilot p+p{margin-top:var(--space-4)}
.ma-pilot .ma-btn{margin-top:var(--space-8)}
.ma-pilot .ma-small{margin-top:var(--space-4);color:var(--color-muted)}
.ma-contact-fallback{font-size:var(--text-small);margin-top:var(--space-3)}
.ma-sprite{position:absolute;width:0;height:0;overflow:hidden}
@media(min-width:1440px){.ma-section{padding-top:100px}}
@media(max-width:1199px){
 .ma-system-notes{position:static;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);padding:var(--space-6) var(--space-8) var(--space-8)}
 .ma-system-note{position:static;width:auto;box-shadow:none}
 .ma-system-note h3{flex-direction:row;align-items:center}
 .ma-system-note::before{display:none}
 .ma-system-markers{display:block}
}
@media(max-width:991px){
 .ma-setup-steps{grid-template-columns:1fr}
 .ma-setup-step{display:grid;grid-template-columns:36px 1fr;gap:var(--space-5)}
 .ma-setup-number{margin-bottom:0}
 .ma-setup-step:not(:last-child)::after{content:"↓";top:calc(100% + var(--space-3));left:6px;right:auto;line-height:24px}
 .ma-hero-main{grid-template-columns:1.1fr 1fr;min-height:560px}.ma-hero-copy{padding:var(--space-8)}
 .ma-product img{right:-37%;width:137%}
 .ma-hero h1{font-size:44px}
 .ma-task{padding:var(--space-6)}.ma-task h3{font-size:23px}
 .ma-system-facts article{padding:var(--space-6)}.ma-system-facts h3{font-size:22px}
 .ma-feature-grid{column-gap:var(--space-8)}.ma-price,.ma-pilot{padding:var(--space-8)}
}
@media(max-width:767px){
 .ma-problem-answer{grid-template-columns:1fr;gap:var(--space-6)}
 .ma-setup-gallery{grid-template-columns:1fr;gap:var(--space-4)}
 .ma-setup-thumbnails{grid-template-columns:1fr 1fr;gap:var(--space-4)}
 .ma-wrap{width:calc(100% - 32px)}.ma-section{padding-top:var(--space-15)}
 .ma-hero-main{grid-template-columns:1fr;min-height:0}.ma-hero-copy{padding:var(--space-8)}.ma-hero h1{font-size:clamp(36px,7vw,52px)}
 .ma-product{height:clamp(300px,65vw,460px)}
 .ma-product img{top:0;right:-16%;width:108%}
 .ma-task-grid,.ma-gallery-grid,.ma-feature-grid,.ma-commerce,.ma-offer,.ma-problems,.ma-system-facts{grid-template-columns:1fr}
 .ma-problems{gap:var(--space-6)}.ma-problems li{display:grid;grid-template-columns:52px 1fr;gap:var(--space-5)}.ma-problem-number{margin:0}
 .ma-task{padding:var(--space-8)}.ma-task .ma-icon{margin-bottom:var(--space-4)}
 .ma-task h3{font-size:26px}.ma-comparison-head{display:block}.ma-draft-label{display:block;margin-top:var(--space-2)}
 .ma-compare-grid{grid-template-columns:1fr;gap:var(--space-8)}
 .ma-feature:last-child{grid-column:auto}.ma-price-value{font-size:64px}
 .ma-title{margin-bottom:var(--space-8)}
}
@media(max-width:479px){
 .ma-hero-copy,.ma-comparison,.ma-task,.ma-price,.ma-pilot,.ma-problem-answer{padding:var(--space-6)}
 .ma-hero h1{font-size:36px}
 .ma-title{font-size:32px}
 .ma-photo-state{top:var(--space-3);left:var(--space-3);font-size:12px}
 .ma-photo-hint{right:var(--space-3);bottom:var(--space-3);padding:var(--space-2) var(--space-3);font-size:12px}
 .ma-photo-dots{left:var(--space-3);bottom:var(--space-5)}
 .ma-system-notes{grid-template-columns:1fr;padding:var(--space-4) var(--space-6) var(--space-6)}
 .ma-system-marker{width:32px;height:32px;font-size:16px}
 .ma-btn{width:100%;padding:var(--space-3) var(--space-5)}
 .ma-price-value{font-size:58px}.ma-commerce{gap:var(--space-8)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ma-btn{transition:none}}