/* Semutz additions on top of site.css (the shared layout system). */

.site .skip { position: absolute; top: 0; left: -9999px; z-index: 200; border-bottom-right-radius: .5rem; background: var(--grad); color: #fff; padding: .7rem 1.1rem; }
.site .skip:focus { left: 0; }

/* The ant mascot is a round badge */
.site .brand { gap: .6rem; }
.site .brand img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-strong); }
.site .brand small { letter-spacing: .12em; font-size: .54rem; }

/* Product code inside the flow circles */
.site .node-code { font-family: var(--f-mono); font-weight: 600; }

/* Last product card: the "book a demo" card */
.site .pcard-cta { background: var(--grad-soft); border-color: var(--line-strong); }

@media (width <= 620px) {
  .site .brand small { display: none; }
  .site .hero-chips { flex-wrap: wrap; }
}

/* Light theme: deepen the amber/gold accents so they read on a pale background */
:root[data-theme=light] .site { --gold: #c2410c; --amber: #b45309; }

/* ---------- inner pages (platform, industries, case studies, about, contact) ---------- */
.site .page-hero { position: relative; padding-block: clamp(7.5rem, 13vw, 10rem) clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.site .page-hero .lead { max-width: 60ch; margin-top: 1.1rem; }
.site .page-hero .hero-cta { margin-top: 1.6rem; }

/* Four "one ..." pillars */
.site .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.site .pillars .card h3 { font-size: 1.02rem; }
.site .pillars .card p { color: var(--tx-2); font-size: var(--fs-sm); margin-top: .45rem; }
@media (width <= 900px) { .site .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width <= 560px) { .site .pillars { grid-template-columns: 1fr; } }

/* Timeline: one order through the day */
.site .otl { list-style: none; margin: 2rem 0 0; padding: 0; position: relative; display: grid; gap: .9rem; }
.site .otl::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--orange), var(--red)); opacity: .45; }
.site .otl li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem 1.15rem 1rem 0; }
.site .otl .tl-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font: 600 .62rem/1 var(--f-mono); box-shadow: 0 10px 22px -12px #ea580ce6; position: relative; z-index: 1; }
.site .otl .tl-time { font: 600 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .08em; color: var(--orange); text-transform: uppercase; }
.site .otl h3 { font-size: 1.05rem; margin-top: .2rem; }
.site .otl p { color: var(--tx-2); font-size: var(--fs-sm); margin-top: .3rem; }
.site .otl .tl-doc { align-self: center; }
@media (width <= 620px) { .site .otl li { grid-template-columns: 44px minmax(0, 1fr); } .site .otl .tl-doc { grid-column: 2; justify-self: start; } }

/* Code sample */
.site .code-card { font: 400 .8rem/1.7 var(--f-mono); white-space: pre; overflow-x: auto; color: var(--tx-2); }
.site .code-card .k { color: var(--orange); }
.site .code-card .s { color: var(--gold); }
.site .code-card .c { color: var(--tx-3); }

/* FAQ */
.site .faq { display: grid; gap: .6rem; }
.site .faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 0 1.15rem; }
.site .faq summary { cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; }
.site .faq summary::-webkit-details-marker { display: none; }
.site .faq summary::after { content: "+"; color: var(--orange); font: 600 1.2rem/1 var(--f-mono); transition: transform .25s var(--ease); }
.site .faq details[open] summary::after { transform: rotate(45deg); }
.site .faq details p { color: var(--tx-2); font-size: var(--fs-sm); padding-bottom: 1rem; }

/* Segment / case rows */
.site .seg-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (width <= 860px) { .site .seg-row { grid-template-columns: 1fr; } }
.site .kv3 { display: grid; gap: .8rem; }
.site .kv3 > div { border-left: 2px solid var(--line-strong); padding-left: .9rem; }
.site .kv3 b { display: block; font: 600 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.site .kv3 p { color: var(--tx-2); font-size: var(--fs-sm); margin-top: .2rem; }
.site .bna { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: center; margin-top: 1rem; }
.site .bna > div { padding: .8rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); }
.site .bna > div b { display: block; font: 600 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.site .bna > div.after { border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: var(--grad-soft); }
.site .bna > i { color: var(--orange); font-style: normal; }
.site .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.site .nums > div { padding: .75rem .9rem; border-radius: var(--r-sm); background: var(--surface-2); }
.site .nums b { display: block; font: 700 1.2rem/1.2 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site .nums span { font-size: var(--fs-xs); color: var(--tx-3); }

/* Milestones */
.site .ms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.site .ms .card { padding: 1.1rem; }
.site .ms .yr { font: 700 1.1rem/1 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site .ms h3 { font-size: .98rem; margin-top: .55rem; }
.site .ms p { font-size: var(--fs-xs); color: var(--tx-2); margin-top: .35rem; }
@media (width <= 1000px) { .site .ms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (width <= 560px) { .site .ms { grid-template-columns: 1fr 1fr; } }

/* Team */
.site .team .card { text-align: left; }
.site .team .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font: 700 .95rem/1 var(--f-display); }
.site .team .leader { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 1.5rem 1.5rem 1.5rem 2.5rem; min-height: calc(350px + 3rem); }
.site .team .leader-photo { position: relative; aspect-ratio: 32 / 35; border-radius: 22px; overflow: hidden; background: var(--grad); box-shadow: 0 30px 60px -34px #ea580cb3; }
.site .team .leader-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
.site .team .leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.site .team .leader-name { font: 800 clamp(1.8rem, 3.2vw, 2.6rem)/1.05 var(--f-display); letter-spacing: -.02em; margin-top: .6rem; }
.site .team .leader-roles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.site .team .leader-roles span { padding: .38rem .75rem; border-radius: 99px; border: 1px solid var(--line-strong); font: 600 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); }
.site .team .leader-bio { margin-top: 1.1rem; max-width: 58ch; line-height: 1.7; }
.site .team .leader-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; }
.site .team .leader-uab { height: 34px; width: auto; margin-left: auto; opacity: .85; }
@media (width <= 760px) {
  .site .team .leader { grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem; min-height: 0; }
  .site .team .leader-photo { width: 100%; max-width: 260px; justify-self: center; }
  .site .team .leader-uab { margin-left: 0; }
}

/* Contact form */
.site .form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.site .form .full { grid-column: 1 / -1; }
.site .form label { display: grid; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--tx-2); }
.site .form .inp { width: 100%; font: inherit; color: var(--tx); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .75rem .9rem; }
.site .form .inp:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px #ea580c26; }
.site .form textarea.inp { min-height: 118px; resize: vertical; }
.site .form .checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.site .form .checks label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.site .form .checks input { accent-color: var(--orange); }
.site .form .agree { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.site .form-done { display: none; padding: .9rem 1rem; border-radius: var(--r-sm); background: var(--grad-soft); border: 1px solid var(--line-strong); font-size: var(--fs-sm); }
.site .form.is-sent + .form-done { display: block; }
@media (width <= 620px) { .site .form { grid-template-columns: 1fr; } }
.site .side-cards { display: grid; gap: 1rem; align-content: start; }
.site .side-cards dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: var(--fs-sm); }
.site .side-cards dt { color: var(--tx-3); font: 600 var(--fs-mono)/1.7 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.site .side-cards dd { margin: 0; color: var(--tx-2); }
.site .note { font-size: var(--fs-xs); color: var(--tx-3); margin-top: 1rem; }

/* Utilities the inner pages use that aren't in the compiled site.css */
.max-w-\[22ch\] { max-width: 22ch; }
.max-w-\[860px\] { max-width: 860px; }
.mt-1 { margin-top: .25rem; }
.mt-8 { margin-top: 2rem; }
.grid-cols-\[minmax\(0\,1\.35fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (width < 900px) { .max-\[900px\]\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.site .seg-sec { padding-block: .7rem; scroll-margin-top: 90px; }
.site .seg-sec:first-of-type { padding-top: 0; }

/* "Powered by UAB" badge in the footer */
.site .powered { display: inline-flex; align-items: center; gap: .5rem; }
.site .powered span { font: 600 9px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-2); }
.site .powered img { height: 20px; width: auto; object-fit: contain; }

/* Footer contact column */
@media (width > 1080px) { .site .foot-grid { grid-template-columns: 1.15fr repeat(3, minmax(0, .8fr)) 1.6fr; } }
.site .foot-contact { font-style: normal; display: grid; gap: .45rem; font-size: .875rem; color: var(--tx-2); line-height: 1.5; }
.site .foot-contact b { color: var(--tx); font-weight: 600; }
.site .foot-contact a { color: var(--tx-2); transition: color .18s; }
.site .foot-contact a:hover { color: var(--orange); }
.site .foot-contact .mail { overflow-wrap: anywhere; }
.site .foot-contact .fc-row { display: grid; gap: .15rem; }
.site .foot-contact .fc-row i { font: 500 .62rem/1.2 var(--f-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.site .foot-contact .fc-row > span { color: var(--tx-2); }
.site .foot-contact a.fc-row:hover > span { color: var(--orange); }

/* Header on tablets and phones: theme + menu sit on the far right */
@media (width <= 1080px) { .site .nav-right { margin-left: auto; } }

/* Footer on phones: brand on top, two link columns, contact as a card */
@media (width <= 620px) {
  .site .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .site .foot-grid > :first-child, .site .foot-grid > :last-child { grid-column: 1 / -1; }
  .site .foot-explore { display: none; }
  .site .foot ul { gap: .7rem; }
  .site .foot ul a { font-size: .9rem; line-height: 1.35; }
  .site .foot h4 { margin-bottom: .75rem; }
  .site .foot-contact { gap: 0; padding: .35rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--tx) 3%, transparent); }
  .site .foot-contact > b { padding: .75rem 0 .55rem; font-size: 1rem; }
  .site .foot-contact .fc-row { padding: .7rem 0; border-top: 1px dashed var(--line); }
  .site .foot-contact .fc-row > span { font-size: .9rem; }
  .site .foot-contact a.fc-row { position: relative; padding-right: 1.5rem; }
  .site .foot-contact a.fc-row::after { content: "›"; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--tx-3); }
  .site .foot-bot { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* ---------- phones ---------- */
@media (width <= 900px) {
  /* the scene lives in the band between the header and the hero text */
  .site .story-step:first-child { padding-top: 46svh; }
  .site .story-rail { top: 4.6rem; gap: .3rem; }
  .site .story-rail a { width: 22px; height: 22px; font-size: .5rem; }
  .site .story-hero .lead { font-size: 1rem; }
  .site .hero-note { letter-spacing: .02em; }
}
@media (width <= 480px) {
  /* header: logo, theme, menu. "Book a Demo" stays in the menu and the hero */
  .site .nav-right > .btn-primary { display: none; }
  .site .nav-in { gap: .5rem; }
  .site .story-hero .display { font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .site .hero-cta { flex-wrap: wrap; }
  .site .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (width <= 900px) {
  /* one-platform block: keep it inside the screen */
  .site .oa .g2 > * { min-width: 0; }
  .site .oa-stage { padding: 3.2rem .4rem; }
  .site .oa-card { padding: 1rem; }
  .site .oa-card .tbl td { white-space: normal; overflow-wrap: anywhere; }
  .site .oa-card .tbl td:first-child { width: 38%; }
}

/* ---------- phones: scroll animations ---------- */
@media (width <= 900px) {
  /* product slider pinned like on desktop, one card per screen */
  .site .hpin.is-on .hpin-sticky { padding-top: 64px; }
  .site .hpin.is-on .hpin-track > .card.pcard { width: min(82vw, 340px); }
  .site .hpin.is-on .hpin-track > .card.shot { width: min(88vw, 520px); }
  .site .hpin.is-on .h2 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .site .hpin.is-on .hpin-bar { margin-top: 1.6rem; }
  .site .hpin.is-on .pcard ul { margin-top: .6rem; }

  /* screens: stacked panels under a sticky tab bar */
  .site .scr-pin.is-stacked .tabs { position: sticky; top: 68px; z-index: 5; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
  .site .scr-pin.is-stacked .tab-fill { display: none; }
  .site .scr-pin.is-stacked .tabpanel { scroll-margin-top: 140px; }
  .site .scr-pin.is-stacked .tabpanel + .tabpanel { margin-top: 1.25rem; }
  .site .scr-pin.is-stacked .tabpanel:not(.is-enter) .preview-frame > *,
  .site .scr-pin.is-stacked .tabpanel:not(.is-enter) .kpi,
  .site .scr-pin.is-stacked .tabpanel:not(.is-enter) .tbl tbody tr { opacity: 0; }
  .site .scr-pin.is-stacked .tabpanel.is-enter .preview-frame > .stack { animation: hs-up .6s var(--ease-pop) both; }
  .site .scr-pin.is-stacked .tabpanel.is-enter .mock { animation: hs-up .7s .12s var(--ease-pop) both; }
}