/* =============================================================================
   Aixly — photo.css  ·  the photographic design (v2)
   -----------------------------------------------------------------------------
   Bright and calm, carried by photographs of real-looking shop floors and by
   the product's own screens. Written to read as a professional tool a plant
   manager can trust: sentence-case headlines, generous but not empty space,
   one accent.

   Provenance of every token:
     display  Archivo 700          the family of the wordmark, at normal width
     body     IBM Plex Sans        the platform's own UI face
     navy     #15223e              brand ink, the app's sidebar
     blue     #1e57bd              brand blue, the app's primary action
     tape     #f2c233              floor-marking tape; a thin rule, never text on white
     radius   4px                  a little softer than the app's 2px, for photos
     width    1200px               one content width on every page
   ============================================================================= */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --white:#fcfdfe; --steel-50:#f3f5f8; --steel-100:#e8ecf2; --steel-200:#d5dce7; --steel-300:#b9c4d4;
  --steel-500:#55617a; --steel-700:#33405a;
  --navy-950:#0b1427; --navy-900:#0f1b33; --navy-800:#15223e;
  --blue-700:#163f8c; --blue-600:#1e57bd; --blue-100:#e3ebfa;
  --tape-400:#f2c233; --red-700:#a5281a;

  --bg:#eef2f7; --bg-alt:#e6ebf2; --panel:var(--white); --bg-dark:var(--navy-900); --grid:rgba(30,87,189,.06);
  --text:var(--steel-700); --heading:var(--navy-800); --muted:var(--steel-500);
  --text-inv:#e6ebf5; --muted-inv:#aab5cb;
  --rule:var(--steel-200); --rule-strong:var(--steel-300); --rule-inv:rgba(230,235,245,.16);
  --accent:var(--blue-600); --accent-hover:var(--blue-700); --accent-soft:var(--blue-100);
  --mark:var(--tape-400); --danger:var(--red-700);

  --display:"Archivo",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --radius:4px;
  --max:1200px;
  --gutter:clamp(20px,4vw,40px);
  --section-y:clamp(64px,8vw,120px);
  --nav-h:76px;
  --shadow:0 1px 2px rgba(15,27,51,.06),0 24px 48px -24px rgba(15,27,51,.32);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
body{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
picture{display:block}
h1,h2,h3{color:var(--heading);font-family:var(--display);font-weight:700;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(40px,5vw,68px);line-height:1.04}
h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1}
h3{font-size:21px;line-height:1.25;letter-spacing:-.01em}
p{text-wrap:pretty}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;font-weight:600}
.skip:focus{left:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.text-link{display:inline-block;margin-top:22px;background:none;border:none;border-bottom:2px solid currentColor;cursor:pointer;font:inherit;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.text-link:hover{color:var(--accent-hover)}

/* Screens get one consistent frame. */
.frame img{border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
.frame figcaption{margin-top:12px;font-size:15px;color:var(--muted)}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:var(--radius);
  border:1px solid transparent;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,253,254,.97);border-bottom:1px solid var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.brand{display:inline-flex;color:var(--heading)}
.logo{height:42px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links > a:not(.btn),.nav-menu-btn{font-size:15px;font-weight:500;text-decoration:none;color:var(--heading);background:none;border:none;cursor:pointer;padding:6px 0}
.nav-links > a:not(.btn):hover,.nav-menu-btn:hover{color:var(--accent)}
.nav-links > a[aria-current=page]{color:var(--accent)}
.nav-links a.btn{color:#fff}
.nav-menu-btn::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.nav-menu-btn[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
.nav-signin{padding-left:26px;border-left:1px solid var(--rule-strong)}
.nav-platform{position:relative}
.platform-menu{position:absolute;top:calc(100% + 16px);left:-24px;width:min(720px,90vw);background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.platform-menu ul{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.platform-menu a{display:block;padding:12px 14px;border-radius:var(--radius);text-decoration:none}
.platform-menu a:hover,.platform-menu a[aria-current=page]{background:var(--bg-alt)}
.pm-name{display:block;font-weight:600;color:var(--heading);font-size:16px}
.pm-desc{display:block;font-size:14px;color:var(--muted);line-height:1.4;margin-top:2px}
.nav-toggle{display:none;background:none;border:1px solid var(--rule-strong);border-radius:var(--radius);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--heading)}
.nav-toggle span{width:18px;height:2px;background:currentColor;position:relative;display:block}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ── Home: hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero.has-photo{min-height:min(calc(100svh - var(--nav-h)),820px);display:flex;align-items:flex-end;background:var(--navy-950)}
.hero-photo{position:absolute;inset:0}
.hero-photo picture,.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,39,.9) 0%,rgba(11,20,39,.72) 38%,rgba(11,20,39,.2) 72%),linear-gradient(0deg,rgba(11,20,39,.5),rgba(11,20,39,0) 40%)}
.hero-grid{position:relative;width:100%}
.hero-copy{max-width:640px;padding:clamp(56px,8vw,112px) 0}
.hero.has-photo h1{color:#fff}
.hero-sub{margin-top:22px;font-size:clamp(18px,1.5vw,21px);max-width:34em}
.hero.has-photo .hero-sub{color:var(--text-inv)}
.hero-form{margin-top:32px}
.hf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hf-row .btn{grid-column:1 / -1;justify-self:start}
.hf-field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--heading)}
.hero.has-photo .hf-field label{color:#fff}
.hf-field input{width:100%;min-height:50px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--rule-strong);background:#fff;color:var(--heading);font:inherit;font-size:17px}
.hf-field input::placeholder{color:var(--muted)}
.hf-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,87,189,.25)}
.hf-field input.err{border-color:var(--danger);background:#fdf3f2}
.hf-note{margin-top:12px;font-size:15px;color:var(--muted)}
.hero.has-photo .hf-note,.hero.has-photo .hero-confirm{color:var(--text-inv)}
.confirm{margin-top:10px;font-weight:600;min-height:1.4em}
.load{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.l1{animation-delay:.05s}.l2{animation-delay:.2s}.l3{animation-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── Home: problem ─────────────────────────────────────────────────────────── */
.problem{padding:var(--section-y) 0}
.problem-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.problem-text p{margin-top:18px}
.problem-photo img{border-radius:var(--radius);box-shadow:var(--shadow)}
.problem-answer{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.4vw,34px);line-height:1.25;color:var(--heading)}

/* ── Home: setup ───────────────────────────────────────────────────────────── */
.setup{padding:var(--section-y) 0}
.setup-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.setup-text p{margin-top:18px}
.setup-list{margin-top:18px;counter-reset:need}
.setup-list li{counter-increment:need;position:relative;padding:10px 0 10px 40px;border-top:1px solid var(--rule);font-weight:600;color:var(--heading)}
.setup-list li:last-child{border-bottom:1px solid var(--rule)}
.setup-list li::before{content:counter(need);position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:14px;display:flex;align-items:center;justify-content:center}

/* ── Home: the platform index ──────────────────────────────────────────────── */
.platform{padding:var(--section-y) 0;background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.platform-list{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.platform-list a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:18px 0;border-top:1px solid var(--rule-strong);text-decoration:none}
.pl-name{font-family:var(--display);font-weight:700;font-size:20px;color:var(--heading)}
.pl-desc{grid-column:1;font-size:16px;color:var(--muted)}
.pl-go{grid-row:1 / span 2;grid-column:2;align-self:center;color:var(--accent);font-size:20px;transition:transform .2s}
.platform-list a:hover .pl-name{color:var(--accent)}
.platform-list a:hover .pl-go{transform:translateX(4px)}

/* ── Home: fit ─────────────────────────────────────────────────────────────── */
.fit{padding:var(--section-y) 0;position:relative}
.fit.has-photo{background:var(--navy-950);min-height:70vh;display:flex;align-items:center;overflow:hidden}
.fit-photo{position:absolute;inset:0}
.fit-photo picture,.fit-photo img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.fit-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,39,.94) 0%,rgba(11,20,39,.82) 45%,rgba(11,20,39,.3) 100%)}
.fit-inner{position:relative;width:100%}
.fit-inner > *{max-width:640px}
.fit-inner p{margin-top:18px}
.fit.has-photo h2{color:#fff}
.fit.has-photo p{color:var(--text-inv)}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq{padding:var(--section-y) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px 72px;align-items:start}
.faq-list details{border-bottom:1px solid var(--rule-strong)}
.faq-list details:first-child{border-top:1px solid var(--rule-strong)}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-weight:600;font-size:18px;color:var(--heading)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 44px 22px 0;font-size:17px}

/* ── Closing ask ───────────────────────────────────────────────────────────── */
.cta{background:var(--bg-dark);color:var(--text-inv);padding:var(--section-y) 0;border-top:4px solid var(--mark)}
.cta{padding:clamp(48px,6vw,80px) 0}
.cta-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px 64px;align-items:center}
.cta h2{color:#fff}
.capture{display:flex;gap:10px;flex-wrap:wrap}
.capture input[type=email]{flex:1;min-width:240px;min-height:52px;padding:0 14px;border-radius:var(--radius);border:1px solid rgba(230,235,245,.35);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:17px}
.capture input[type=email]::placeholder{color:var(--muted-inv)}
.capture input[type=email]:focus{outline:none;border-color:#9dbaf2}
.capture input[type=email].err{border-color:#ff9f95}
.capture .btn{min-height:52px}
.cta .confirm{color:#fff}
.cap-note{font-size:15px;color:var(--muted-inv)}

/* ── Footer ────────────────────────────────────────────────────────────────── */
body > footer{background:var(--navy-950);color:var(--muted-inv)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;padding-bottom:32px}
.foot-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-brand a{color:#fff;display:inline-flex}
.foot-brand .logo{height:26px}
.foot-tag{font-size:14px}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.foot-links{display:flex;gap:20px}
.foot-links button{background:none;border:none;cursor:pointer;color:var(--text-inv);font-size:14px;padding:4px 0}
.foot-links button:hover{color:#fff}
.meta{font-size:13px}

/* ── Legal dialogs (display only inside [open]; see CLAUDE.md) ─────────────── */
.modal{border:1px solid var(--rule-strong);border-radius:var(--radius);background:#fff;color:var(--text);max-width:760px;width:calc(100% - 32px);max-height:84vh;padding:0;overflow:hidden;margin:auto}
.modal[open]{display:flex;flex-direction:column}
.modal::backdrop{background:rgba(15,27,51,.6)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--rule);flex:0 0 auto}
.modal-head h2{font-size:21px}
.modal-close{background:none;border:1px solid var(--rule-strong);border-radius:var(--radius);width:40px;height:40px;cursor:pointer}
.modal-body{padding:8px 24px 26px;overflow-y:auto}
.modal-body h3{font-size:15px;margin:20px 0 7px;font-family:var(--sans)}
.modal-body p{font-size:15px;margin-bottom:10px}
.modal-body .eff{color:var(--muted);font-size:13px}
.detail .modal-body h3{font-family:var(--display);font-size:18px;margin:22px 0 6px}
.detail-lede{font-size:17px;color:var(--heading);margin-top:14px}
.detail .modal-body ul{margin:0 0 10px 18px;list-style:disc;font-size:15px}
.detail-more{margin-top:20px}
.detail-more a{color:var(--accent);font-weight:600}
.reco-wait{padding:24px 0 10px;color:var(--heading);font-weight:500}
.reco-bar{height:4px;background:var(--rule);border-radius:2px;overflow:hidden;margin-bottom:20px}
.reco-bar span{display:block;height:100%;width:30%;background:var(--accent);border-radius:2px;animation:reco-slide 1.6s ease-in-out infinite}
@keyframes reco-slide{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.modal-body .reco-headline{margin-top:20px;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,28px);line-height:1.2;letter-spacing:-.01em;color:var(--heading)}
/* Today / With Aixly: two panels, the change carrying the accent so it is what the eye lands on. */
.reco-list .reco-today,.reco-list .reco-change{margin:10px 0 0;padding:10px 14px;border-radius:6px;font-size:15px;line-height:1.5}
.reco-list .reco-today{background:var(--steel-50);color:var(--text)}
.reco-list .reco-change{background:var(--accent-soft);border-left:3px solid var(--accent);color:var(--heading)}
.reco-today strong,.reco-change strong{display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.reco-change strong{color:var(--accent)}
.reco-more{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--accent)}
.reco .modal-body{max-height:70vh}
.modal-body .reco-company{font-family:var(--display);font-weight:700;font-size:22px;color:var(--heading);margin-top:14px}
.reco-summary{margin-top:6px}
.reco-list{margin:18px 0 0;counter-reset:reco}
.reco-list li{counter-increment:reco;position:relative;padding:20px 0 20px 44px;border-top:1px solid var(--rule)}
.reco-list li::before{content:counter(reco);position:absolute;left:0;top:18px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.reco-list h3{font-family:var(--display);font-size:19px;line-height:1.25;margin:0}
.reco-list p{margin:4px 0 0;font-size:15px}
.reco-note{margin-top:14px;font-size:14px;color:var(--muted)}
.reco-cta{margin-top:16px}

.notfound{padding:var(--section-y) 0;min-height:60vh}
.notfound p{margin-top:18px;max-width:34em}
.notfound .hero-cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:28px}
.notfound .btn-quiet{color:var(--accent);font-weight:600}

/* ── Scroll ink (JS adds .ink-on; without it the text is fully inked) ─────── */
.ink-on .ink-w{color:rgba(21,34,62,.18);transition:color .25s}
.ink-on .ink-w.lit{color:var(--heading)}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .nav-links{gap:18px}
  .nav-signin{padding-left:18px}
}
@media (max-width:960px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 22px;max-height:calc(100vh - var(--nav-h));overflow:auto}
  .nav-links.open > a,.nav-links.open .nav-menu-btn{padding:12px 0;font-size:17px;text-align:left;width:100%}
  .nav-links.open .nav-signin{padding-left:0;border-left:none}
  .nav-links.open .btn{margin-top:12px}
  .nav-toggle{display:inline-flex}
  .platform-menu{position:static;width:auto;border:none;box-shadow:none;padding:0 0 8px}
  .platform-menu ul{grid-template-columns:1fr}
  .platform-menu a{padding:10px 0}

  .problem-grid,.setup-grid,.faq-grid,.cta-inner{grid-template-columns:1fr}
  .platform-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  .hf-row{grid-template-columns:1fr}
  .hf-row .btn{justify-self:stretch}
  .capture input[type=email]{min-width:0;width:100%}
  .capture .btn{width:100%}
  .foot{flex-direction:column;align-items:flex-start}
  .foot-right{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media print{.nav{position:static}}

/* Direct demo requests use the existing capture form on both backgrounds. */
.demo-request label,.demo-request .confirm{flex-basis:100%}
.demo-request input[type=email]{min-width:0}
.pv-demo{padding-block:24px}
.pv-demo .capture input[type=email]{background:var(--bg);color:var(--text);border:1px solid var(--muted)}
.pv-demo .capture input[type=email]::placeholder{color:var(--muted)}
.pv-demo .capture input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}