/* masatio.com home page. Loads after crm.css and reuses its tokens, header, buttons and sections.
   The yellow QR tag is the brand's signature: it hangs over the product in the hero. */

/* Hero */
.home-hero { padding-bottom: 0; }
.home-hero .hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
.home-hero h1 { font-size: clamp(44px, 6.4vw, 88px); max-width: 13ch; }
.proof { display: grid; gap: 18px; margin: 0; padding: 0 0 6px; list-style: none; }
.proof li { padding-left: 18px; border-left: 2px solid var(--mint); }
.proof b { display: block; font: 700 17px/1.3 var(--display); color: var(--on-dark); }
.proof span { font-size: 15px; color: var(--on-dark-2); }

.home-stage { position: relative; margin-top: 76px; height: 540px; perspective: 1800px; }
.home-stage .screen { left: 9%; width: min(940px, 74%); transform: rotateY(-8deg) rotateX(5deg); transform-origin: right center; }
.home-stage .phone { right: 2%; top: 60px; width: 232px; }
.home-stage .hang { position: absolute; z-index: 5; left: 0; top: -60px; display: grid; justify-items: center; transform-origin: top center; animation: sway 2.8s cubic-bezier(.3, .6, .3, 1) .4s 1 both; }
.string { width: 2px; height: 170px; margin-bottom: -28px; position: relative; z-index: 1; background: rgba(238, 243, 248, .35); }
.tag-big {
  position: relative; display: grid; gap: 6px; justify-items: start; width: 228px; padding: 54px 22px 22px;
  background: var(--signal); color: #17244a; border-radius: 16px 16px 20px 20px;
  box-shadow: inset 0 0 0 2px var(--signal-edge), 0 40px 60px -30px rgba(0, 0, 0, .7); transform: rotate(-6deg);
}
.hole { position: absolute; top: 16px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--pine); box-shadow: inset 0 0 0 2px var(--signal-edge); }
.tag-code { font: 800 18px var(--mono); letter-spacing: .01em; white-space: nowrap; }
.tag-what { font-size: 14px; font-weight: 600; opacity: .8; }
.tag-bars { display: grid; gap: 6px; width: 100%; margin-top: 14px; }
.tag-bars i { height: 7px; border-radius: 4px; background: #17244a; opacity: .85; }
.tag-bars i:nth-child(2) { width: 70%; } .tag-bars i:nth-child(3) { width: 85%; }
@keyframes sway { 0% { transform: rotate(7deg); } 40% { transform: rotate(-4deg); } 70% { transform: rotate(1.5deg); } 100% { transform: rotate(0); } }

/* Products */
.products { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.product { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; text-decoration: none; color: inherit; }
.product:hover { border-color: var(--line-2); }
.product:hover .product-shot img { transform: translateY(-6px); }
.product-shot { margin: 0; padding: 32px 32px 0; height: 300px; overflow: hidden; background: var(--pine); }
.product-shot img { border-radius: 10px 10px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transition: transform .4s ease; }
.product.track .product-shot { background: linear-gradient(160deg, #1f3a5c, #13263b); }
.product.clin .product-shot { background: linear-gradient(160deg, #5a2a12, #2b160b); display: flex; align-items: flex-end; }
.clin-panel { list-style: none; margin: 0; padding: 20px 22px; display: grid; gap: 14px; width: 100%; background: #fff; color: #1a2233; border-radius: 10px 10px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transition: transform .4s ease; }
.clin-panel li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid #c94f09; }
.clin-panel b { font-size: 15px; }
.clin-panel span { font-size: 13px; color: #5b6472; }
.product:hover .clin-panel { transform: translateY(-6px); }
.product-body { display: grid; gap: 12px; align-content: start; padding: 28px 32px 32px; }
.product-body h3 { font-size: 26px; letter-spacing: -.02em; }
.product-body p { color: var(--muted); font-size: 16px; }
.product-go { margin-top: 6px; font: 700 15px var(--display); color: var(--teal); }
.status { justify-self: start; font-size: 13px; font-weight: 600; padding: 3px 12px; border-radius: 99px; color: var(--won); background: var(--won-bg); }
.status.dev { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.roadmap { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.roadmap li { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; padding: 28px 32px; border: 1px dashed var(--line-2); border-radius: 22px; }
.roadmap .status { grid-row: span 2; align-self: start; margin-top: 3px; }
.roadmap p { color: var(--muted); font-size: 16px; }

/* Tracking product */
.track-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: end; }
.track-intro h2 { font-size: clamp(40px, 5.6vw, 72px); }
.home .steps .step-n { color: var(--ink); }
.home .steps li { padding-top: 22px; border-top: 2px solid var(--ink); }

/* Pricing */
.pricing-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: end; }
.plans { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.plan h3 { font-size: 22px; }
.plan-blurb { margin: 0; color: var(--muted); min-height: 3em; line-height: 1.5; }
.plan-price { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.plan-price span { font: 800 56px/1 var(--display); letter-spacing: -.04em; color: var(--ink); margin-right: 8px; }
.plan-year { margin: 0; color: var(--muted); font-size: 14px; }
.plan ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; flex: 1; align-content: start; }
.plan ul li { padding-left: 28px; position: relative; }
.plan ul li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.plan .btn { align-self: flex-start; margin-top: 12px; }
.plan-hl { background: var(--pine); border-color: var(--pine); color: var(--on-dark); }
.plan-hl .plan-blurb, .plan-hl .plan-price, .plan-hl .plan-year { color: var(--on-dark-2); }
.plan-hl .plan-price span { color: var(--on-dark); }
.plan-hl ul li::before { border-color: var(--mint); }
.plan-flag { position: absolute; top: -13px; left: 32px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--action); color: #fff; font: 700 13px var(--display); }
.plans-note { margin: 28px 0 0; color: var(--muted); max-width: 80ch; }
.plans-note a { color: inherit; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.faq details { border-top: 1px solid var(--line-2); }
.faq details:last-child { border-bottom: 1px solid var(--line-2); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font: 700 19px/1.35 var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font: 400 28px var(--body); color: var(--teal); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 44px 24px 0; color: var(--muted); max-width: 62ch; }

/* Demo form on the dark contact band */
.demo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.demo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 36px; background: var(--surface); color: var(--ink); border-radius: 22px; box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .8); }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: 14px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: 400 16px var(--body);
}
.field textarea { padding: 12px 14px; resize: vertical; min-height: 100px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent); }
.field .bad { border-color: var(--lost); }
.wide { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.submit-row .fine { font-size: 14px; color: var(--muted); }
.btn[disabled] { opacity: .55; cursor: default; }
.form-msg { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.form-msg.ok { background: var(--won-bg); color: var(--won); }
.form-msg.err { background: var(--lost-bg); color: var(--lost); }
.demo-points { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.demo-points li { padding-left: 18px; border-left: 2px solid var(--mint); color: var(--on-dark-2); }
.demo-points b { color: var(--on-dark); font-weight: 600; }
.text-link { font-weight: 600; font-size: 15px; color: var(--on-dark-2); text-decoration: none; }
.text-link:hover { color: var(--on-dark); }
.dark .lede a { color: var(--mint); }

@media (max-width: 1080px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-stage .phone { width: 200px; }
}
@media (max-width: 860px) {
  .proof { grid-template-columns: 1fr; }
  .home-stage { height: 400px; margin-top: 48px; perspective: none; }
  .home-stage .screen { position: absolute; left: 16%; width: 100%; transform: none; }
  .home-stage .phone { display: block; right: auto; left: 0; top: 120px; width: 150px; padding: 6px; border-radius: 26px; }
  .home-stage .phone img { border-radius: 21px; }
  .home-stage .hang { left: auto; right: 4%; top: -40px; }
  .string { height: 90px; }
  .tag-big { width: 170px; padding: 46px 16px 16px; }
  .tag-code { font-size: 13px; }
  .products, .roadmap, .track-intro, .pricing-head, .plans, .faq-wrap, .demo-grid { grid-template-columns: 1fr; gap: 28px; }
  .plan-blurb { min-height: 0; }
  .track-intro { gap: 20px; }
  .product-shot { height: 220px; padding: 22px 22px 0; }
  .clin-panel { gap: 10px; padding: 16px 18px; }
  .clin-panel li:nth-child(3) { display: none; }
  .product-body, .roadmap li { padding: 24px; }
}
@media (max-width: 560px) {
  .home-stage { height: 320px; }
  .home-stage .phone { width: 120px; top: 110px; }
  .top-actions .text-link { display: none; }
  .demo-form { grid-template-columns: 1fr; padding: 22px; }
  .roadmap li { grid-template-columns: 1fr; }
  .roadmap .status { grid-row: auto; }
}
.demo-points a { color: var(--mint); }
.foot-row a + a { margin-left: 14px; }

/* Privacy notice and other text pages */
.legal { padding: 88px 0 112px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.legal .updated { margin-top: 14px; color: var(--muted); font-size: 15px; }
.legal h2 { margin-top: 56px; font-size: 26px; letter-spacing: -.02em; }
.legal p, .legal li { margin-top: 14px; color: var(--ink); max-width: 68ch; }
.legal ul { padding-left: 22px; margin: 6px 0 0; }
.legal li { margin-top: 8px; }
.legal a { color: var(--teal); }
.form-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.form-note a { color: var(--teal); }

/* Announcement bar */
.announce { margin: 0; padding: 9px var(--gutter); background: #0d1c2c; color: var(--on-dark); border-bottom: 1px solid var(--dark-line); font: 600 14px/1.4 var(--body); text-align: center; }
.announce a { color: inherit; font-weight: 700; }
.announce-new { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 99px; background: var(--action); color: #fff; font: 700 12px/1.6 var(--display); letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.hero-note a { color: var(--mint); }

/* Tabs on the home page sit under the steps */
.home #tracking .tabs { margin-top: 56px; }
.shot-caption { margin: 14px 0 0; color: var(--muted); font-size: 15px; }

/* Comparison */
.compare-wrap { margin-top: 48px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 700 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.compare thead th.us { color: var(--teal); }
.compare tbody th { width: 24%; font: 700 17px/1.3 var(--display); }
.compare td { color: var(--muted); width: 38%; }
.compare td:last-child { color: var(--ink); background: color-mix(in srgb, var(--teal) 6%, transparent); }
.compare td:last-child::before { content: ''; display: inline-block; width: 11px; height: 6px; margin: 0 10px 3px 0; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
}
@media (max-width: 560px) {
  .announce { font-size: 13px; }
  .compare th, .compare td { padding: 14px; }
  .compare { min-width: 620px; }
}

/* Upcoming Masatio product catalogue */
.roadmap-heading { margin-top: 64px; font-size: clamp(27px,3vw,40px); }
.roadmap-intro { margin-top: 10px; color: var(--muted); max-width: 70ch; }
.roadmap-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:30px; }
.roadmap-product { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface); color:inherit; text-decoration:none; }
.roadmap-product:hover { border-color:var(--teal); }
.roadmap-art { height:135px; padding:22px 26px; display:flex; align-items:end; justify-content:end; background:linear-gradient(125deg,#102a44,#23506b); color:#ffb443; }
.roadmap-art span { font:800 64px/1 var(--display); opacity:.55; }
.roadmap-art-2 { background:linear-gradient(125deg,#16243e,#48426d); }
.roadmap-art-3 { background:linear-gradient(125deg,#173446,#246a71); }
.roadmap-art-4 { background:linear-gradient(125deg,#422d24,#8b5536); }
.roadmap-art-5 { background:linear-gradient(125deg,#1b3356,#365b9a); }
.roadmap-art-6 { background:linear-gradient(125deg,#243647,#466367); }
.roadmap-copy { display:grid; align-content:start; gap:12px; padding:26px; flex:1; }
.roadmap-copy h3 { font-size:24px; }
.roadmap-copy p { color:var(--muted); font-size:15px; }
.roadmap-copy .product-go { align-self:end; }
@media(max-width:1080px){.roadmap-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.roadmap-products{grid-template-columns:1fr}.roadmap-art{height:105px}}

/* Corporate homepage section */
.home-hero h1{max-width:15ch;font-size:clamp(40px,5.7vw,76px)}
.company-approach{background:var(--paper)}
.company-eyebrow{color:var(--teal);font:800 13px var(--display);letter-spacing:.13em}
.company-approach h2{max-width:18ch;font-size:clamp(34px,4.3vw,58px);margin:18px 0}
.company-approach .lede{max-width:76ch}
.company-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:46px}
.company-pillars article{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:13px}
.pillar-index{color:var(--teal);font:700 12px var(--display);letter-spacing:.08em}
.company-pillars h3{font-size:23px}
.company-pillars p{color:var(--muted);flex:1}
.company-pillars a{text-decoration:none;font-weight:700;color:var(--teal)}
@media(max-width:850px){.company-pillars{grid-template-columns:1fr}}

/* Corporate platform overview replacing the equipment-only hero illustration. */
.company-stage{margin-top:66px;padding:26px;background:#0e2135;border:1px solid rgba(255,255,255,.16);border-radius:22px}
.company-stage-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;color:#b6cbd7;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:19px}
.company-stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.company-stage-tile{display:flex;flex-direction:column;gap:14px;padding:26px;min-height:225px;border:1px solid rgba(255,255,255,.17);border-radius:14px;text-decoration:none;background:linear-gradient(145deg,#203c57,#132c43);color:#fff}
.company-stage-tile:nth-child(2){background:linear-gradient(145deg,#234b53,#13353d)}
.company-stage-tile:nth-child(3){background:linear-gradient(145deg,#573b2f,#37271e)}
.company-stage-tile:hover,.company-stage-tile:focus-visible{border-color:#ffad47}
.company-stage-label{font:700 12px var(--display);letter-spacing:.09em;color:#ffbf65}
.company-stage-tile strong{font:800 clamp(21px,2.4vw,30px)/1.2 var(--display)}
.company-stage-tile p{font-size:15px;line-height:1.5;color:#d5e0e9;flex:1}
.company-stage-link{font-size:13px;font-weight:700;color:#ffbf65}
@media(max-width:800px){.company-stage-grid{grid-template-columns:1fr}.company-stage-tile{min-height:165px}.company-stage{margin-top:38px;padding:15px}}