/* ==========================================================================
   KS Metrology Solutions — site stylesheet

   Structure
     1. Tokens & base
     2. Header & navigation
     3. Shared components   (eyebrow, buttons, sections, hero, key-fact band)
     4. Home                (three instruments in one, platform roadmap, status + newsletter)
     5. LPS3010 product page
     6. Company
     7. Contact
     8. Legal pages
     9. Footer

   Conventions
     - Desktop first. Every component block ends with its own media queries,
       ordered from the widest to the narrowest breakpoint.
     - Variant rules always follow the base rule they modify and use the same
       or a higher specificity, so no declaration needs !important.

   Breakpoints (exactly two, three layout tiers)
     wide      > 900 px   PC, tablet landscape          (base rules)
     medium   <= 900 px   tablet portrait, phone landscape
     narrow   <= 560 px   phone portrait
   ========================================================================== */


/* 1. Tokens & base
   ------------------------------------------------------------------------ */
:root{
  --navy:#06182c;
  --navy-2:#0a2743;
  --accent:#b00149;
  --accent-dark:#8c003a;
  --accent-light:#e60060;   /* accent on navy (footer, hero decorations) */
  --blue:#087fd7;
  --ink:#0b1b3d;
  --text:#5e7090;
  --muted:#8795aa;
  --line:#dddde3;
  --soft:#ececef;
  --green:#1aa35a;
  --grey:#98a3b2;
  --max:1180px;
  /* type scale: every heading on the site maps to one of these */
  --fs-hero:56px;      /* product hero h1 */
  --fs-page:44px;      /* page title (Company, Contact, legal pages) */
  --fs-section:32px;   /* section title */
  --fs-block:22px;     /* card / block heading */
  --fs-card:18px;      /* compact card heading */
  --fs-lead:20px;      /* page lead paragraph */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f4f4f6;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto}
main{flex:1 0 auto}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}

.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

@media (max-width:560px){
  .container{width:min(var(--max),calc(100% - 28px))}
}


/* 2. Header & navigation
   ------------------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:20;height:74px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;gap:30px;height:100%}
.brand{display:flex;align-items:center;white-space:nowrap;line-height:0}
.brand .brand-lockup{display:block;width:246px;height:auto;max-height:55px;object-fit:contain;object-position:left center}
.nav{display:flex;align-items:center;gap:38px;margin-left:auto}
.nav a{position:relative;padding:26px 0 23px;font-size:14px;font-weight:650;transition:color .16s ease}
.nav a:hover,.nav a.active{color:var(--accent-dark)}
.nav a.active:not(.contact-link)::after{content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;background:var(--accent)}
.nav .contact-link{margin-left:8px;padding:10px 22px;border:1px solid #9a9aa6;border-radius:4px;transition:color .16s ease,border-color .16s ease,background-color .16s ease}
.nav .contact-link.active{border-color:var(--accent-dark)}
.nav .contact-link:hover{border-color:var(--accent);background:#faf3f6}
.mobile-toggle{display:none;margin-left:auto;border:0;background:transparent;color:var(--ink);font-size:25px;cursor:pointer}

/* Medium and below: the navigation becomes a drop-down list toggled by site.js (.nav.open). */
@media (max-width:900px){
  .site-header{height:auto}
  .header-inner{min-height:68px}
  .mobile-toggle{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 23px;background:#fff;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:13px 0}
  .nav a.active:not(.contact-link)::after{display:none}
  .nav .contact-link{margin:0;padding:13px 0;border:0}
}
@media (max-width:560px){
  .brand .brand-lockup{width:196px;max-height:47px}
}


/* 3. Shared components
   ------------------------------------------------------------------------ */

/* 3.1 Eyebrow, buttons, sections */
.eyebrow{margin-bottom:14px;color:var(--accent-dark);font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.22em;text-transform:uppercase}

.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 20px;border:1px solid var(--accent);border-radius:4px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),border-color .18s ease,background-color .18s ease}
.button.primary{border:0;background:var(--accent);color:#fff}
.button.secondary{background:#fff;color:var(--accent)}
.button.quiet{border-color:#9a9aa6;background:#fff;color:var(--ink)}
.button.outline{border-color:rgba(192,220,231,.52);background:rgba(255,255,255,.035);color:#ecf5f8}   /* for dark backgrounds (hero) */
.button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(176,1,73,.18)}
.button.outline:hover{border-color:var(--accent-light);background:rgba(230,0,96,.10)}
.button.quiet:hover{transform:none;box-shadow:none;border-color:var(--accent);background:#faf3f6;color:var(--accent-dark)}

.section{padding:56px 0;border-bottom:1px solid var(--line)}
main > .section:last-child{border-bottom:0}
.page{padding:48px 0 72px}   /* standard page shell (Contact, legal pages) */
.page-title{margin:0 0 12px;font-size:var(--fs-page);line-height:1.05;letter-spacing:-.035em}
.page-lead{max-width:640px;margin:0 0 36px;color:var(--text);font-size:var(--fs-lead);line-height:1.4}
.section-title{margin:0 0 15px;font-size:var(--fs-section);line-height:1.14;letter-spacing:-.03em}
.section-copy{max-width:720px;margin:0;color:var(--text);font-size:16px}
/* block headings inside cards and info blocks share one size */
.newsletter-card h3,.newsletter-dialog h2,.roadmap-card h3,.founder-card h3,.contact-card h2,.contact-company h2,.legal-page h2{font-size:var(--fs-block);line-height:1.25;letter-spacing:-.015em}

@media (max-width:900px){
  .page-title{font-size:38px}
}
@media (max-width:560px){
  .page{padding:36px 0 54px}
  .page-title{font-size:32px}
  .page-lead{margin-bottom:26px;font-size:17px}
  .section-title{font-size:28px}
  .newsletter-card h3,.newsletter-dialog h2,.roadmap-card h3,.founder-card h3,.contact-card h2,.contact-company h2,.legal-page h2{font-size:20px}
}

/* 3.2 Hero (Home and LPS page share every rule)
   Copy column: .eyebrow, h1, .subhead, [.intro], .hero-actions, .note.
   Vertical rhythm: .subhead 10 px, .intro 18 px, .hero-actions 18 px on top;
   sibling margins collapse, so the CTA always sits 18 px below its predecessor.
   Layers: .hero::before = faded grid, .hero-copy::before = local grid behind
   the copy, h1::before = accent line, .hero-figure::before/::after = glow and
   floor shadow; they hang off the figure, so they follow the instrument at
   every width instead of the hero box. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(ellipse 42% 68% at 27% 42%,rgba(176,1,73,.30) 0%,rgba(176,1,73,.11) 34%,transparent 70%),
    radial-gradient(ellipse 50% 82% at 77% 47%,rgba(176,1,73,.44) 0%,rgba(176,1,73,.16) 36%,rgba(176,1,73,0) 72%),
    linear-gradient(112deg,#04172a 0%,#061d34 55%,#092a46 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(210,150,175,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(210,150,175,.07) 1px,transparent 1px);
  background-size:56px 56px;
  background-position:center;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,.50) 54%,#000 76%,rgba(0,0,0,.70) 93%,transparent 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,.50) 54%,#000 76%,rgba(0,0,0,.70) 93%,transparent 100%);
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:44% 56%;align-items:center;gap:26px;min-height:300px;padding:34px 0 27px}
.hero-copy{position:relative;z-index:2;isolation:isolate;align-self:start;padding:1px 40px 0 0}   /* above the instrument, which overhangs the copy column by ~40 px */
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-105px;
  top:-58px;
  width:490px;
  height:300px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 46% 45%,rgba(176,1,73,.20) 0%,rgba(176,1,73,.08) 34%,transparent 71%),
    linear-gradient(rgba(210,150,175,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(210,150,175,.07) 1px,transparent 1px);
  background-size:auto,38px 38px,38px 38px;
  -webkit-mask-image:radial-gradient(ellipse at 44% 45%,#000 0%,rgba(0,0,0,.74) 33%,rgba(0,0,0,.22) 58%,transparent 78%);
  mask-image:radial-gradient(ellipse at 44% 45%,#000 0%,rgba(0,0,0,.74) 33%,rgba(0,0,0,.22) 58%,transparent 78%);
}
.hero h1{position:relative;margin:0 0 10px;font-size:var(--fs-hero);line-height:.98;letter-spacing:-.045em;text-shadow:0 5px 24px rgba(0,0,0,.14)}
.hero h1::before{   /* accent line, anchored to the headline so it scales with every tier */
  content:"";
  position:absolute;
  z-index:-1;
  left:-1px;
  top:2px;
  width:112px;
  height:2px;
  pointer-events:none;
  opacity:.52;
  background:linear-gradient(90deg,var(--accent-light),rgba(230,0,96,.33),transparent);
  box-shadow:0 1px 12px rgba(230,0,96,.14);
}
.hero .eyebrow{color:var(--accent-light)}   /* raspberry itself is only 2.5:1 on navy */
.hero .subhead{margin:0 0 10px;color:#dce7f2;font-size:23px}
.hero .intro{max-width:520px;margin:0 0 18px;color:#ccd9e5;font-size:16px}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px}
.hero-device{position:relative;display:flex;align-items:center;justify-content:flex-end;overflow:visible;min-height:285px}
.hero-figure{position:relative;width:84%;max-width:600px;margin:0;transform:translate(-30px,0)}   /* image and its caption move as one block */
.hero-figure::before{
  content:"";
  position:absolute;
  left:2%;right:-5%;top:2%;bottom:2%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at 53% 44%,rgba(230,0,96,.30) 0%,rgba(176,1,73,.16) 29%,rgba(176,1,73,.06) 49%,transparent 72%);
  filter:blur(15px);
}
/* contact shadow plus floor light, both sitting on the feet of the instrument */
.hero-figure::after{
  content:"";
  position:absolute;
  left:2%;right:-6%;bottom:1%;height:38px;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 46% 50%,rgba(0,8,18,.48) 0%,rgba(0,4,13,.23) 42%,transparent 74%),
    radial-gradient(ellipse at center,rgba(230,0,96,.28) 0%,rgba(176,1,73,.14) 31%,rgba(176,1,73,.04) 54%,transparent 75%);
  filter:blur(8px);
}
.hero-device img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 21px 20px rgba(0,6,16,.38)) drop-shadow(0 0 16px rgba(230,0,96,.14))}
.render-note{margin-top:-1.6%;white-space:nowrap;color:#9fb0c1;font-size:10px;text-align:center}   /* negative margin absorbs the transparent edge of the render */

/* Medium: compact two-column hero, instrument stays on the right; CTAs side by side. */
@media (max-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr) 42%;gap:18px;min-height:0;padding:18px 0 14px}
  .hero-copy{align-self:center;padding:0}
  .hero-copy::before{left:-65px;top:-35px;opacity:.42}
  .hero .eyebrow{font-size:11px}
  .hero h1::before{top:-2px;width:92px;opacity:.34}   /* centred in the eyebrow gap, ~12 px clearance to the smaller headline */
  .hero h1{margin-bottom:6px;font-size:32px;line-height:1.05}
  .hero .eyebrow{color:var(--accent-light)}   /* raspberry itself is only 2.5:1 on navy */
.hero .subhead{margin-bottom:12px;font-size:15px;line-height:1.35}
  .hero .intro{margin-bottom:12px;font-size:14px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .hero-actions .button{width:100%;min-height:38px;padding:8px 10px;font-size:12.5px;white-space:nowrap}
  .hero-device{justify-content:flex-end;min-height:0}
  .hero-figure{width:82%;max-width:328px;transform:none}
  .render-note{margin-top:-1%;font-size:8.5px;letter-spacing:.01em;opacity:.8}
}
/* Narrow: stacked, copy on top, small centred instrument. */
@media (max-width:560px){
  .hero-inner{grid-template-columns:1fr;gap:6px;padding:14px 0 8px}
  .hero-copy{align-self:start}
  .hero h1{font-size:28px}
  .hero .eyebrow{color:var(--accent-light)}   /* raspberry itself is only 2.5:1 on navy */
.hero .subhead{margin-bottom:10px;font-size:14px}
  .hero .intro{margin-bottom:10px}
  .hero-actions{gap:7px;margin-top:10px}
  .hero-actions .button{padding:8px 6px;font-size:11.5px}
  .hero-device{justify-content:center}
  .hero-figure{width:57.5%;max-width:279px}
}

/* 3.3 Key-fact band: five cells in one row, separated by vertical hairlines.
   Home  (.facts):           strong = headline (accent), span = subline (grey).
   LPS   (.lps-quick-specs): span = category (accent),   strong = value (grey). */
.facts{background:#fff;border-bottom:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:1fr .82fr 1.18fr 1.18fr .92fr}
.fact{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100px;padding:20px 12px;text-align:center}
.fact+.fact::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line)}
.fact strong{display:flex;align-items:center;justify-content:center;min-height:42px;margin-bottom:6px;color:var(--ink);font-size:18px;line-height:1.15;text-wrap:balance}
.fact span{color:var(--text);font-size:12.5px;line-height:1.3;text-wrap:balance}

.lps-quick-specs{background:#fff;border-bottom:1px solid var(--line)}
.lps-quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.lps-quick-item{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:108px;padding:19px 14px;text-align:center}
.lps-quick-item+.lps-quick-item::before{content:"";position:absolute;left:0;top:23px;bottom:23px;width:1px;background:var(--line)}
.lps-quick-item>span{margin-bottom:8px;color:var(--muted);font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.1em;text-transform:uppercase}   /* category: small label, same on every model page */
.lps-quick-item strong{color:var(--ink);font-size:clamp(14px,1.3vw,17px);line-height:1.25;font-weight:700;letter-spacing:-.01em;text-wrap:balance}   /* value: what the reader is looking for */

/* Medium and below: compact strip of centred tags on light grey, one text level
   (Home headline / LPS value), no separators. */
@media (max-width:900px){
  .facts,.lps-quick-specs{padding:8px 0;background:#ececef;border-top:1px solid #e1e1e6;border-bottom:1px solid #e1e1e6}
  .facts-grid,.lps-quick-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 20px}
  .fact,.lps-quick-item{flex:0 0 auto;align-items:center;min-height:0;padding:2px 0}
  .fact+.fact::before,.lps-quick-item+.lps-quick-item::before{content:none}
  .fact span,.lps-quick-item>span{display:none}
  .fact strong,.lps-quick-item strong{display:inline-block;min-height:0;margin:0;color:#334155;font-size:11px;line-height:1.2;font-weight:600;white-space:nowrap}
}
@media (max-width:560px){
  .facts,.lps-quick-specs{padding:7px 0}
  .facts-grid,.lps-quick-grid{gap:5px 14px}
  .fact strong,.lps-quick-item strong{font-size:10.5px}
}


/* 4. Home
   ------------------------------------------------------------------------ */

/* 4.1 "Three instruments in one": centred heading (shared with the roadmap), three columns
   with hairlines; medium and below a scroll-snap carousel (dots rendered by site.js) */
.home-instruments{background:transparent}
.instruments-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:6px}
.instruments-item{padding:4px 30px 0 0}
.instruments-item+.instruments-item{padding-left:30px;border-left:1px solid var(--line)}
.instruments-item::before{content:"";display:block;width:28px;height:2px;margin-bottom:14px;background:var(--accent)}
.instruments-item h3{margin:0 0 6px;font-size:var(--fs-card);line-height:1.3;letter-spacing:-.01em}
.instruments-item p{max-width:340px;margin:0;color:var(--text);font-size:14.5px;line-height:1.55}

/* 4.2 Platform roadmap: centred heading, three cards; medium and below a carousel */
.platform-section{padding:47px 0 54px}
.platform-heading{margin-bottom:29px;text-align:center}
.platform-heading h2{margin:0 0 5px}
.platform-heading .section-copy{max-width:900px;margin:0 auto;text-wrap:balance}

.roadmap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;margin-top:28px}
.roadmap-card{display:flex;flex-direction:column;justify-content:space-between;min-height:164px;padding:24px 24px 22px;border:1px solid #dadae0;border-radius:10px;background:#fff}
.roadmap-card.roadmap-card-active{border:1.5px solid var(--accent);box-shadow:0 0 0 1px rgba(176,1,73,.06)}
.roadmap-card-top{display:flex;flex-direction:column;gap:12px}
.roadmap-card h3{margin:0;color:var(--navy)}
.roadmap-spec{margin:22px 0 0;color:var(--text);font-size:14px;line-height:1.45}

.status-badge{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;color:#6c7c89;font-size:11px;line-height:1;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.status-badge::before{content:"";flex:0 0 auto;width:.6em;height:.6em;border-radius:50%;background:currentColor}
.status-badge.status-active{color:var(--accent-dark)}
.status-badge.status-planned,.status-badge.status-future{color:#7c8994}

/* Carousel rules shared by both home trios (same mechanics as the LPS key advantages) */
@media (max-width:900px){
  .home-instruments .container,.platform-section .container{overflow:hidden}
  .instruments-grid,.roadmap-grid{display:flex;gap:16px;margin-top:22px;padding:2px 14% 10px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .instruments-grid::-webkit-scrollbar,.roadmap-grid::-webkit-scrollbar{display:none}
  .instruments-item,.instruments-item+.instruments-item{flex:0 0 min(76vw,520px);scroll-snap-align:start;scroll-snap-stop:always;padding:22px 20px 23px;border:1px solid #dcdce2;border-radius:10px;background:#fff;box-shadow:0 5px 16px rgba(7,27,49,.045)}
  .roadmap-card{flex:0 0 min(76vw,520px);min-height:0;scroll-snap-align:start;scroll-snap-stop:always}
}
@media (max-width:560px){
  .instruments-grid,.roadmap-grid{gap:13px;padding-right:12%}
  .instruments-item,.instruments-item+.instruments-item,.roadmap-card{flex-basis:82vw}
}

/* 4.3 Development status + newsletter card */
.home-middle{display:grid;grid-template-columns:1.1fr .9fr;gap:62px;align-items:start}
.status-brief{display:grid;gap:13px;margin-top:23px}
.status-line{display:flex;gap:12px;color:var(--text)}
.status-line strong{color:var(--ink)}
.status-dot{flex:0 0 auto;width:9px;height:9px;margin-top:8px;border-radius:50%;background:var(--accent)}

.newsletter-card{padding:25px 26px 22px;border:1px solid #dddde3;border-radius:10px;background:#fff}
.newsletter-card h3{margin:0 0 8px}
.newsletter-card p{margin:0 0 18px;color:var(--text)}
.newsletter-card .button{white-space:nowrap}
.subscribe{display:flex;gap:10px}
.subscribe input{flex:1;min-width:0;padding:11px 13px;border:1px solid #c3c3cb;border-radius:4px;color:var(--ink);background:#fff}
.newsletter-card .subscribe-note,.newsletter-form .subscribe-note{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.45}   /* beats .newsletter-card p */
.subscribe-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Newsletter form: the dialog opened from the card and the page newsletter.php renders share one markup */
.newsletter-dialog{width:min(460px,calc(100% - 28px));padding:0;border:1px solid #dcdce2;border-radius:10px;color:var(--ink);background:#fff;box-shadow:0 24px 60px rgba(7,27,49,.22)}
.newsletter-dialog::backdrop{background:rgba(6,24,44,.55)}
.newsletter-dialog .newsletter-form,.newsletter-dialog .newsletter-done{padding:25px 26px 22px}   /* padding on the content: a click on the dialog element itself is a backdrop click */
.newsletter-done-message{margin:0;color:var(--text)}
.newsletter-dialog h2{margin:0 0 16px}
.newsletter-form fieldset{min-width:0;margin:0;padding:0;border:0}
.newsletter-mode{display:flex;gap:24px;margin-top:24px}
.newsletter-mode label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;cursor:pointer}
.newsletter-mode input{margin:0;accent-color:var(--accent-dark)}
.newsletter-field{display:block;margin-bottom:12px;font-size:13px;font-weight:650}
.newsletter-field span{color:var(--muted);font-weight:400}
.newsletter-field input{display:block;width:100%;margin-top:5px;padding:11px 13px;border:1px solid #c3c3cb;border-radius:4px;color:var(--ink);background:#fff;font-weight:400}
.newsletter-optional:disabled .newsletter-field{color:var(--muted)}   /* unsubscribe mode */
.newsletter-field input:disabled{border-color:var(--line);background:var(--soft);color:var(--muted)}
.newsletter-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}   /* honeypot: invisible to people, filled in by bots */
.newsletter-status{margin:12px 0 0;color:var(--accent-dark);font-size:13px}
.newsletter-status:empty{display:none}
.newsletter-status.is-error{color:#b3261e}
.newsletter-actions{display:flex;gap:10px;margin-top:22px}
.newsletter-actions .button.primary{min-width:132px}   /* same width for "Subscribe" and "Unsubscribe" */
.newsletter-dialog .newsletter-actions{justify-content:flex-end}
.newsletter-page .newsletter-form,.newsletter-page .newsletter-confirm,.newsletter-page p{max-width:460px}

@media (max-width:900px){
  .home-middle{grid-template-columns:1fr}
}
@media (max-width:560px){
  .subscribe{flex-direction:column}
}


/* 5. LPS3010 product page
   ------------------------------------------------------------------------ */

/* 5.1 Key advantages: 3×2 card grid; medium and below a scroll-snap carousel
   with navigation dots rendered by site.js (.lps-benefits-dot.is-active). */
.lps-benefits-section{padding:56px 0 62px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.lps-benefits-section .section-title{margin-bottom:28px}
.lps-benefits-viewport{min-width:0}
.lps-benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lps-benefit{min-width:0;padding:25px 24px 26px;border:1px solid #dcdce2;border-radius:10px;background:#fff;box-shadow:0 4px 14px rgba(7,27,49,.035);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.lps-benefit:hover{transform:translateY(-3px);border-color:#e6c9d4;box-shadow:0 10px 26px rgba(7,27,49,.075)}
.lps-benefit-icon{display:block;width:48px;height:48px;margin:0 0 17px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}   /* 32-unit grid, 3 px line on screen */
.lps-benefit h3{margin:0 0 10px;color:#102a49;font-size:var(--fs-card);line-height:1.32;font-weight:740;letter-spacing:-.014em}
.lps-benefit p{margin:0;color:#42566c;font-size:13.5px;line-height:1.62;font-weight:430}
.lps-benefits-dots{display:none}

@media (max-width:900px){
  .lps-benefits-section{padding:48px 0 52px}
  .lps-benefits-section .container{overflow:hidden}
  .lps-benefits-viewport{overflow:visible}
  .lps-benefits-grid{
    display:flex;
    gap:16px;
    padding:2px 14% 10px 0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .lps-benefits-grid::-webkit-scrollbar{display:none}
  .lps-benefit{flex:0 0 min(76vw,520px);scroll-snap-align:start;scroll-snap-stop:always;box-shadow:0 5px 16px rgba(7,27,49,.045)}
  .lps-benefit:hover{transform:none}
  .lps-benefits-dots{display:flex;align-items:center;justify-content:center;gap:8px;min-height:22px;margin-top:14px}
  .lps-benefits-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#c6c6ce;cursor:pointer;transition:width .18s ease,border-radius .18s ease,background .18s ease}
  .lps-benefits-dot.is-active{width:20px;border-radius:999px;background:var(--accent)}
}
@media (max-width:560px){
  .lps-benefits-section{padding:42px 0 46px}
  .lps-benefits-section .section-title{margin-bottom:22px}
  .lps-benefits-grid{gap:13px;padding-right:12%}
  .lps-benefit{flex-basis:82vw;padding:22px 20px 23px}
  .lps-benefit-icon{width:42px;height:42px;margin-bottom:15px}
  .lps-benefit p{font-size:13px;line-height:1.58}
}

/* 5.2 Technical specifications: two-column table with category rows (tr.spec-category) */
.lps-spec-section{padding-top:52px}
.lps-section-head{margin-bottom:24px}
.lps-table-wrap{overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#fff}
.lps-spec-table{width:100%;border-collapse:collapse;font-size:13.5px}
.lps-spec-table thead th{padding:12px 16px;background:#071b31;color:#f5fbff;text-align:left;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.lps-spec-table thead th:first-child{width:38%}
.lps-spec-table thead th:last-child{width:62%}
.lps-spec-table tbody th,.lps-spec-table tbody td{padding:10px 16px;vertical-align:top;text-align:left}
.lps-spec-table tbody th{color:#102a49;font-size:14px;font-weight:700}
.lps-spec-table tbody td{color:#3f5062;font-size:14px;line-height:1.5;font-weight:400}
.lps-spec-table tbody tr:not(.spec-category){border-top:1px solid #e6e6eb}
.lps-spec-table tbody tr:not(.spec-category):hover{background:#f9f9fb}
.lps-spec-table .spec-category th{padding:12px 16px;border-top:1px solid #e6c9d4;background:#faf1f5;color:var(--accent-dark);font-size:13px;line-height:1.2;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.lps-spec-table .spec-category:first-child th{border-top:0}   /* sits directly under the dark head row */

.lps-spec-disclaimer{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding:15px 17px;border:1px solid #dcdce2;border-radius:7px;background:#fff;font-size:12.5px}
.lps-spec-disclaimer strong{color:var(--accent-dark);white-space:nowrap}
.lps-spec-disclaimer span{color:var(--text)}

/* Narrow: the head row is hidden and every row becomes a stacked card. */
@media (max-width:560px){
  .lps-table-wrap{overflow:visible;border:0;background:transparent}
  .lps-spec-table{border-collapse:separate;border-spacing:0}
  .lps-spec-table,.lps-spec-table tbody,.lps-spec-table tr,.lps-spec-table th,.lps-spec-table td{display:block;width:100%}
  .lps-spec-table thead{display:none}
  .lps-spec-table .spec-category{margin-top:18px}
  .lps-spec-table .spec-category:first-child{margin-top:0}
  .lps-spec-table .spec-category th,.lps-spec-table .spec-category:first-child th{padding:12px 14px;border:1px solid #dcdce2;border-bottom:0;border-radius:8px 8px 0 0}
  .lps-spec-table tbody tr:not(.spec-category){padding:12px 14px 13px;border:1px solid #e2e2e8;border-bottom:0;background:#fff}
  .lps-spec-table tbody tr:not(.spec-category):last-child{border-bottom:1px solid #e2e2e8}
  .lps-spec-table tbody tr:not(.spec-category) th,.lps-spec-table tbody tr:not(.spec-category) td{padding:0;border:0}
  .lps-spec-table tbody tr:not(.spec-category) th{margin-bottom:5px}
}

/* 5.3 Documentation library: document list grouped by category. Each row is one
   link: title, description and meta line on the left, download symbol with
   size | format on the right, hairlines between rows. */
.lps-docs-section{background:transparent}
.doc-list{display:grid;gap:48px;margin-top:26px}
.doc-group h3{margin:0 0 8px;color:var(--accent-dark);font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.doc-group{margin-inline:-16px;padding-inline:16px;border-bottom:1px solid var(--line)}   /* rows outdent 16 px so the hover band is wider than the text */
.doc-group:last-child{border-bottom:0}   /* the section border already closes the list; a second rule would float above it */
.doc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin-inline:-16px;padding:28px 16px;border-top:1px solid var(--line);border-radius:6px;transition:background-color .16s ease}
.doc-row:hover{background:#e9e9ee}
.doc-group h3+.doc-row{border-top:0;padding-top:20px}
.doc-title{display:block;color:var(--ink);font-size:var(--fs-card);line-height:1.3;font-weight:650;letter-spacing:-.01em;transition:color .16s ease}
.doc-desc{display:block;max-width:720px;margin-top:8px;color:var(--text);font-size:14px;line-height:1.5}
.doc-meta{display:block;margin-top:14px;color:#61758b;font-size:12.5px}
.doc-file{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:88px;color:#3f5062;font-size:12.5px;font-weight:600;white-space:nowrap}
.doc-dl-icon{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.doc-row:hover .doc-dl-icon{transform:translateY(2px)}

/* 5.4 Sales call to action: own band on the soft grey, quiet button like the header's Contact */
.sales-section{padding:36px 0;border-top:1px solid var(--line);background:var(--soft)}
.sales-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.sales-inner p{flex:1 1 auto;margin:0;color:var(--ink);font-size:18px;font-weight:600}
.sales-inner .button{flex:0 0 auto;white-space:nowrap}

@media (max-width:560px){
  .doc-group{margin-inline:-10px;padding-inline:10px}
  .sales-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .sales-inner .button{width:100%}
  .doc-row{gap:16px;margin-inline:-10px;padding:20px 10px}
  .doc-group h3+.doc-row{padding-top:14px}
  .doc-title{font-size:16px}
  .doc-desc{font-size:13px}
  .doc-file{min-width:64px;font-size:11.5px}
  .doc-dl-icon{width:26px;height:26px}
}


/* 6. Company
   ------------------------------------------------------------------------ */
.page-intro{padding:44px 0 49px;border-bottom:1px solid var(--line)}
.page-intro .page-lead{margin-bottom:0}

.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.founder-card{padding:21px;border:1px solid var(--line);border-radius:9px}
.founder-card h3{margin:1px 0 2px}
.role{margin-bottom:11px;color:#6f83a0;font-size:13px}
.bio{margin:0;color:var(--text);font-size:14px}

@media (max-width:900px){
  .founder-grid{grid-template-columns:1fr}
}


/* 7. Contact
   ------------------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.contact-card{padding:26px 28px 28px;border:1px solid #dcdce2;border-radius:10px;background:#fff;box-shadow:0 4px 14px rgba(7,27,49,.035)}
.contact-icon{display:block;width:40px;height:40px;margin:0 0 16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-card h2{margin:0 0 6px}
.contact-card p{margin:0 0 16px;color:var(--text);font-size:14.5px;line-height:1.55}
.email-link{color:var(--accent);font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:4px;word-break:break-word}
.email-link:hover{color:var(--accent-dark)}
.contact-company{display:grid;grid-template-columns:40px 1fr;gap:20px;align-items:start;margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.contact-company .contact-icon{margin:0}
.contact-company h2{margin:6px 0 14px}
.company-data{display:grid;grid-template-columns:200px 1fr;gap:6px 20px;max-width:720px;margin:0;color:var(--text);font-size:14px}
.company-data dt{color:#536987;font-weight:650}
.company-data dd{margin:0}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .contact-card{padding:22px 20px 24px}
  .email-link{font-size:16px}
  .contact-company{grid-template-columns:1fr;gap:12px;margin-top:36px;padding-top:28px}
  .company-data,.legal-page .company-data{grid-template-columns:1fr;gap:2px}
  .company-data dd{margin-bottom:8px}
}


/* 8. Legal pages (imprint, privacy)
   ------------------------------------------------------------------------ */
.legal-page{max-width:900px}
.legal-page h2{margin:32px 0 12px}
.legal-page p,.legal-page li{color:var(--text)}
.legal-page .company-data{max-width:none;margin:0 0 6px;grid-template-columns:220px 1fr;gap:8px 24px;font-size:15px}

/* Narrow: term above value, like the contact page (this rule must follow the desktop rule above, which shares its specificity) */
@media (max-width:560px){
  .legal-page .company-data{grid-template-columns:1fr;gap:2px}
}
.legal-page a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-page ul{margin:0 0 16px;padding-left:22px}
.legal-page em{font-style:normal;color:#8a6d3b;background:#fff7e6;padding:0 4px;border-radius:3px}   /* open items to be filled in */
.legal-date{color:var(--muted);font-size:13px}
.draft-callout{margin:21px 0;padding:15px 17px;border:1px solid #d8d8de;border-radius:8px;background:#f7f7f9;color:#585c6c}


/* 9. Footer (all pages): one quiet line on the hero navy, copyright and legal links only
   ------------------------------------------------------------------------ */
.site-footer{background:var(--navy);color:#8fa3b8;font-size:12.5px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding:22px 0 24px}
.footer-links{display:flex;gap:22px}
.footer-links a{color:#dce7f2;transition:color .16s ease}
.footer-links a:hover{color:var(--accent-light)}

@media (max-width:560px){
  /* one line down to ~380 px wide, below that the links wrap onto their own row */
  .footer-inner{gap:8px 20px;padding:18px 0 20px}
}