/* Homepage styles. Everything is scoped under .hp so nothing leaks into the hugo-fresh/Bulma pages.
   Palette is the site's existing one: sky-blue primary, orange secondary, blue-grey ink.
   Copy lives in data/home.yaml; markup in layouts/partials/home/. Spec: prod_mgmt/product/specs/homepage-redesign.md */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque.woff2") format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2") format("woff2");font-weight:400 500;font-display:swap}

.hp{
  --bg:#f5f8fb; --surface:#fff; --ink:#263245; --muted:#56647a; --line:#dbe4ec;
  --accent:#4fc1ea; --btn:#4fc1ea; --btn-hover:#3cb2dd; --accent-ink:#14212f; --accent-text:#16769b; --accent-soft:#e2f4fb;
  --mark:#f39200; --mark-soft:#fdebd0; --deep:#263245; --deep-ink:#eaf1f7;
  --c1:#2a9fce; --c2:#f39200; --c3:#12a883; --c4:#d9506a;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);
}
.hp *,.hp *::before,.hp *::after{box-sizing:border-box}
.hp h1,.hp h2,.hp h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0;color:var(--ink)}
.hp h1{font-size:clamp(2rem,3.8vw,2.9rem);font-weight:800}
.hp h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:700}
.hp h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.hp p{margin:0}
.hp a{color:inherit}
.hp ul,.hp ol{margin:0;padding:0;list-style:none}
.hp :focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.hp-wrap{max-width:1120px;margin-inline:auto;padding-inline:16px}
.hp-section{padding-block:clamp(48px,8vw,96px)}
.hp-section--tight{padding-top:0}
.hp-eyebrow{font:500 .78rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}
.hp-hero .hp-eyebrow{font-size:.72rem;letter-spacing:.06em}
.hp-lede{font-size:1.18rem;color:var(--muted);max-width:56ch}
.hp-lede--sm{font-size:1.05rem}
.hp-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:720px}
.hp-head--wide{max-width:none}
.hp .hp-link{font-weight:600;color:var(--accent-text);text-underline-offset:4px}

.hp-btn{display:inline-flex;align-items:center;justify-content:center;font:600 1rem/1 var(--body);padding:15px 22px;border-radius:10px;text-decoration:none!important;border:1.5px solid transparent;cursor:pointer}
.hp-btn--primary{background:var(--btn);border-color:var(--btn);color:#fff!important}
.hp-btn--primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.hp-btn--ghost{background:var(--surface);border-color:var(--line);color:var(--ink)!important}
.hp-btn--ghost:hover{border-color:var(--accent-text)}
.hp-btn--inverse{background:var(--accent-ink);color:var(--accent)!important}

/* nav wrapper: keeps the theme navbar, drops the full-height hero behaviour */
.hp-navwrap{background:#fff}
.hp-navwrap .navbar{background:#fff}

/* hero */
.hp-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,80px)}
.hp-hero__copy{display:flex;flex-direction:column;gap:22px}
.hp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (min-width:641px){.hp-cta-row{flex-wrap:nowrap}}
.hp-trust{font-size:.88rem;color:var(--muted)}
.hp-trust span+span::before{content:"\00b7";margin-inline:8px}
.hp-alt{font-size:.95rem;color:var(--muted)}

/* product frame */
.hp-frame{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -28px rgba(30,45,70,.35);overflow:hidden;min-width:0}
.hp-frame img{display:block;width:100%;height:auto}
.hp-frame__top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.hp-dot{width:10px;height:10px;border-radius:50%;background:var(--line)}
.hp-tabs{display:flex;gap:4px;margin-left:12px;background:var(--line);padding:3px;border-radius:9px;flex-wrap:wrap}
.hp-tabs button{font:600 .82rem var(--body);border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:7px;cursor:pointer}
.hp-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.hp-switch{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.hp-switch__label{font:600 .74rem var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hp-switch .hp-tabs{margin:0;padding:0;background:transparent;gap:8px}
.hp-switch .hp-tabs button{font-size:.92rem;padding:8px 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);transition:border-color .15s,background .15s}
.hp-switch .hp-tabs button:hover{border-color:var(--mark)}
.hp-switch .hp-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.hp-hero__vis{min-width:0}
.hp-panel[hidden]{display:none}
/* Hero tabs: one fixed frame so switching views never moves the layout; images are cropped to it from the top left. */
.hp-hero .hp-panel{aspect-ratio:1760/1347;overflow:hidden}
.hp-hero .hp-panel img{width:100%;height:100%;object-fit:cover;object-position:top left}
.hp-hero .hp-panel:not([hidden]){animation:hpfade .35s ease}
@keyframes hpfade{from{opacity:.0}to{opacity:1}}

/* proof */
.hp-proof{border-block:1px solid var(--line);padding-block:20px;background:var(--surface)}
.hp-proof ul{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;font-weight:500;font-size:.95rem;color:var(--muted)}
.hp-proof b{color:var(--ink)}

/* problems */
.hp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hp-aud{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.hp-aud h3{font-size:1.55rem}
.hp-aud ul{display:flex;flex-direction:column;gap:12px}
.hp-aud li{padding-left:22px;position:relative}
.hp-aud li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--mark)}
.hp-label{font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hp-ans{background:var(--accent-soft);border-radius:10px;padding:12px 14px;font-weight:500;font-size:.98rem}
.hp-aud__cta{margin-top:auto}
@media (min-width:641px){
  /* Align the two cards row by row (label, title, bullets, answer, button) so the highlighted answers line up. */
  .hp-two{grid-template-rows:auto auto 1fr auto auto}
  .hp-aud{grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:18px}
}

/* setup band */
.hp-setup{padding-top:0}
.hp-deep{background:var(--deep);color:var(--deep-ink);border-radius:24px;padding:clamp(24px,5vw,56px)}
.hp-deep h2,.hp-deep h3{color:var(--deep-ink)}
.hp-deep .hp-lede{color:#b4c3d6}
.hp-deep .hp-eyebrow{color:var(--mark)}
.hp-deep .hp-head{margin-bottom:28px}
.hp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hp-step{border:1px solid #3a4b63;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.hp-step small{font:500 .74rem var(--mono);color:var(--mark);letter-spacing:.08em;text-transform:uppercase}
.hp-step p{color:#c3d0e0;font-size:.95rem}

/* sync animation */
.hp-visual{margin-top:40px}
.hp-visual .hp-tabs{margin:0 0 16px;background:#3a4b63}
.hp-visual .hp-tabs button{color:#c3d0e0}
.hp-visual .hp-tabs button[aria-selected="true"]{background:#fff;color:var(--ink)}
.hp-vid{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #3a4b63;background:#0b1520}
.hp-visual .hp-sync{margin-top:0}
.hp-sync{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;margin-top:48px}
.hp-sheet{background:#fff;color:#1f2a3a;border-radius:10px;overflow:hidden;font:400 .82rem var(--mono);border:1px solid #cfd8e3}
.hp-sheet__bar{background:#eef2f7;padding:6px 10px;font:500 .72rem var(--mono);color:#47566b;border-bottom:1px solid #cfd8e3}
.hp-sheet__scroll{overflow-x:auto}
.hp-sheet table{border-collapse:collapse;width:100%}
.hp-sheet td,.hp-sheet th{border:1px solid #e1e7ef;padding:6px 8px;text-align:left;white-space:nowrap;font-weight:400}
.hp-sheet th{background:#f3f6fa;color:#5b6a80;font-weight:500}
.hp-sheet td.hit{background:var(--mark-soft);outline:2px solid var(--mark);outline-offset:-2px}
.hp-sync__arrow{text-align:center;font:700 1.4rem var(--display);color:var(--mark)}
.hp-out{background:var(--surface);color:var(--ink);border-radius:10px;padding:14px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.hp-card{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;gap:10px;align-items:center;min-width:0;background:var(--surface)}
.hp-card--dashed{border-style:dashed}
.hp-card.flash{animation:hpflash 1.4s ease}
@keyframes hpflash{0%{background:var(--mark-soft)}100%{background:var(--surface)}}
.hp-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 .8rem var(--display);color:var(--accent-ink);background:#bfe7f6}
.hp-av--2{background:#fcd9a2}.hp-av--3{background:#b5ead9}.hp-av--4{background:#f4c1cc}
.hp-card__n{font-weight:600;font-size:.9rem;line-height:1.25}
.hp-card__r{font-size:.8rem;color:var(--muted);line-height:1.25}
.hp-sync__cap{margin-top:14px;font:500 .78rem var(--mono);color:#8fa3bd;text-align:center}

/* capability rows */
.hp-cap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(24px,4vw,48px)}
.hp-cap:nth-of-type(even) .hp-cap__copy{order:2}
.hp-cap__copy{display:flex;flex-direction:column;gap:14px}
.hp-cap__copy h3{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.hp-checks{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.98rem}
.hp-checks li::before{content:"\2713";color:var(--accent-text);font-weight:700;margin-right:10px}
.hp-cap__vis{min-width:0}

/* demo */
.hp-demo__poster{background-size:cover;background-position:top left;min-height:clamp(320px,44vw,520px);position:relative;display:flex;align-items:flex-end;padding:clamp(14px,3vw,32px)}
.hp-demo__card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(30,45,70,.45);padding:clamp(16px,2.4vw,26px);display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:460px}
.hp-demo__card p{color:var(--muted)}

/* grid */
.hp-grid8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hp-g{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px}
.hp-g h3{font-size:1.02rem}
.hp-g p{font-size:.92rem;color:var(--muted);line-height:1.5}
.hp-g svg{width:26px;height:26px;stroke:var(--accent-text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* use cases */
.hp-uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.hp-use{padding:20px 18px 6px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.hp-use:first-child{padding-left:0}.hp-use:last-child{border-right:0}
.hp-use p{font-size:.92rem;color:var(--muted);line-height:1.5}
.hp-use .hp-link{font-size:.88rem;margin-top:auto;padding-bottom:14px}

/* compare */
.hp-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.hp-cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
.hp-cmp th,.hp-cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.hp-cmp thead th{font:600 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hp-cmp tbody th{font-weight:600}
.hp-cmp th:last-child,.hp-cmp td:last-child{background:var(--accent-soft);font-weight:600}
.hp-cmp tbody tr:last-child th,.hp-cmp tbody tr:last-child td{border-bottom:0}
.hp-links{margin-top:14px;display:flex;gap:10px 28px;flex-wrap:wrap}

/* security */
.hp-sec3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hp-sec3 div{border-top:3px solid var(--accent);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.hp-sec3 p{color:var(--muted);font-size:.95rem}
.hp-secnote{margin-top:24px;max-width:70ch;color:var(--muted)}

/* testimonials */
.hp-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hp-quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:16px}
.hp-quote blockquote{margin:0;font:500 1.1rem/1.5 var(--display);padding:0;border:0;background:none;color:var(--ink)}
.hp-quote figcaption{font-size:.88rem;color:var(--muted)}
.hp-quote figcaption b{display:block;color:var(--ink)}

/* pricing */
.hp-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:820px}
.hp-plan{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:12px}
.hp-plan--plus{border:2px solid var(--accent)}
.hp-price{font:800 2.6rem/1 var(--display);letter-spacing:-.03em}
.hp-price--text{font-size:1.9rem}
.hp-price small{display:block;margin-top:6px;font:500 .95rem var(--body);color:var(--muted);letter-spacing:0}
.hp-plan__note{color:var(--muted);font-size:.92rem}
.hp-plan__cta{margin-top:auto;padding-top:8px;display:flex;gap:12px 16px;flex-wrap:wrap;align-items:center}
.hp-footnote{margin-top:14px;font-size:.92rem;color:var(--muted)}

/* faq */
.hp-faq{max-width:820px}
.hp details{border-bottom:1px solid var(--line);padding-block:4px}
.hp summary{cursor:pointer;font:600 1.08rem var(--display);padding-block:14px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.hp summary::-webkit-details-marker{display:none}
.hp summary::after{content:"+";color:var(--accent-text);font-size:1.4rem;line-height:1}
.hp details[open] summary::after{content:"\2212"}
.hp details p{color:var(--muted);padding-bottom:16px;max-width:70ch}

/* final */
.hp-final{background:var(--accent);color:var(--accent-ink);border-radius:24px;padding:clamp(32px,6vw,72px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hp-final h2{color:var(--accent-ink)}
.hp-final .hp-trust{color:var(--accent-ink);opacity:.85}
.hp-final a:not(.hp-btn){color:var(--accent-ink);font-weight:600}

/* sticky bar */
.hp-sticky{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:16px;transform:translateY(110%);transition:transform .25s;z-index:30}
.hp-sticky.on{transform:none}
.hp-sticky span{font-weight:600}
.hp-sticky .hp-btn{padding:11px 18px}

@media (max-width:1000px){.hp-uses{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-use,.hp-use:first-child{border-right:0;padding-left:0;border-bottom:1px solid var(--line)}}
@media (max-width:900px){
  .hp-hero,.hp-cap{grid-template-columns:minmax(0,1fr)}
  .hp-cap:nth-of-type(even) .hp-cap__copy{order:0}
  .hp-grid8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-steps,.hp-sec3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hp-two,.hp-quotes,.hp-plans,.hp-grid8,.hp-uses{grid-template-columns:minmax(0,1fr)}
  .hp-sync{grid-template-columns:minmax(0,1fr)}
  .hp-sync__arrow{transform:rotate(90deg);padding-block:8px}
  .hp-sticky span{display:none}
}
@media (prefers-reduced-motion:reduce){.hp *{animation:none!important;transition:none!important}}

.hp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}