/* Traxivo content pages: blog and resources.
   ------------------------------------------------------------------
   The landing page keeps its own inline <style> because it is one
   heavily art-directed document. Everything else on the marketing site
   shares this file: twenty-odd pages that must not drift from each
   other, and that benefit from one cached stylesheet rather than
   twenty inlined copies.

   Tokens below are copied verbatim from landing.html's :root so the
   blog and the home page cannot diverge. If a token changes there,
   change it here. */

:root{
  --navy-900:#06121F;
  --navy-800:#0B2545;
  --navy-700:#123A6B;
  --navy-600:#1B4E8F;
  --blue:#2077E0;
  --blue-600:#1660BE;
  --blue-300:#7CB4F4;
  --accent:#33E3CB;
  --accent-600:#3E9E85;
  --accent-700:#2F7D69;
  --accent-50:#EAF9F4;
  --accent-100:#C9F1E6;
  --white:#FFFFFF;
  --gray-50:#F6F8FB;
  --gray-100:#EDF1F7;
  --gray-200:#DCE3EC;
  --gray-300:#C3CEDC;
  --gray-500:#6B7C93;
  --gray-600:#52627A;
  --gray-700:#3A4A60;
  --ink:#0A1B2E;
  --on-dark:#FFFFFF;
  --on-dark-mist:#B9CADD;
  --on-dark-faint:#7C93B0;
  --line-dark:#1A3557;
  --amber:#D6892A;
  --red:#C93B3B;
  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1220px; --r:14px;
}

*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:5px}
::selection{background:var(--accent-100);color:var(--navy-800)}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--display);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--blue-600)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;line-height:1.12;margin:0;color:var(--navy-800)}
p{margin:0 0 15px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:744px}

/* Skip link, twenty pages of nav before the content is twenty chances
   to strand a keyboard user. */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-800);color:var(--white);
  padding:12px 18px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  background:rgba(255,255,255,.72);border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.nav.stuck{background:rgba(255,255,255,.9);border-bottom-color:rgba(220,227,236,.85);
  box-shadow:0 8px 28px -26px rgba(11,37,69,.55)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px}

/* Reading progress. Two pixels at the very top, under the bar's own blur: enough to tell a reader how much of a long article is left without adding
   another piece of furniture to the page. */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--blue),var(--accent));transition:width .1s linear}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand img{width:100px;height:38px;flex:none;display:block}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:13.5px;font-weight:500;letter-spacing:-.005em;color:var(--gray-600);
  text-decoration:none;transition:color .16s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--accent-700)}
.nav-cta{display:flex;align-items:center;gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;
  font-family:inherit;font-weight:600;font-size:15.5px;padding:14px 26px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:transform .16s,background .16s,border-color .16s}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-600);transform:translateY(-2px)}
.btn-outline{border-color:var(--gray-300);color:var(--navy-800);background:var(--white)}
.btn-outline:hover{border-color:var(--navy-700);transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--navy-800)}
.btn-white:hover{transform:translateY(-2px)}
.nav .btn{padding:9px 17px;font-size:13.5px;border-radius:9px;white-space:nowrap}

@media(max-width:1000px){.nav-links{display:none}}
@media(max-width:430px){
  .wrap{padding:0 18px}
  .nav-in{height:54px;gap:12px}
  .brand img{width:88px;height:33px}
  .nav .btn{padding:8px 13px;font-size:13px}
}

/* ---------- shared furniture ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-700);margin:0 0 14px}
.lede{color:var(--gray-700);font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.66;max-width:64ch}
/* padding-top only. The `padding` shorthand here used to reset .wrap's
   horizontal gutters to zero, so the breadcrumb sat 28px left of every other
   element on the page and ran into the viewport edge on narrow screens. */
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-500);padding-top:16px;padding-bottom:6px;line-height:1.5}
.crumb .here{margin:0;color:var(--gray-600)}
/* On pages that open with a tinted head, the crumb was a white band sitting
   above the tint. Carrying the tint up through it makes the two read as one
   block rather than two. Article pages have no .pagehead, so they keep white. */
body:has(.pagehead) .crumb{background:var(--gray-50);
  box-shadow:0 0 0 100vmax var(--gray-50);clip-path:inset(0 -100vmax)}
.crumb a{color:var(--gray-600);text-decoration:none}
.crumb a:hover{color:var(--accent-700)}
.crumb span{margin:0 8px;color:var(--gray-300)}

.pagehead{padding:26px 0 40px;border-bottom:1px solid var(--gray-200);background:
  linear-gradient(180deg,var(--gray-50),var(--white))}
.pagehead h1{font-size:clamp(31px,4.3vw,50px)}
.pagehead .lede{margin-top:18px}

/* ---------- article ---------- */
.hero-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);
  background:var(--gray-100);margin:0 0 34px}
.article{padding:34px 0 70px}
.article h2{font-size:clamp(22px,2.3vw,29px);margin:46px 0 14px;letter-spacing:-.03em}
.article h3{font-size:clamp(18px,1.8vw,21px);margin:30px 0 10px}
.article p{color:var(--gray-700);font-size:17px;line-height:1.68}
.article ul,.article ol{color:var(--gray-700);padding-left:22px;margin:0 0 18px}
.article li{margin-bottom:9px}
.article strong{color:var(--navy-800);font-weight:600}
.article a{color:var(--blue-600);text-underline-offset:3px}

/* The answer block is the AEO surface: one self-contained paragraph that
   resolves the page's question without the reader scrolling, which is
   also the shape an assistant can quote. */
.answer{border-left:3px solid var(--accent);background:var(--accent-50);
  padding:20px 24px;border-radius:0 var(--r) var(--r) 0;margin:0 0 30px}
.answer p{margin:0;color:var(--navy-800);font-size:17.5px;line-height:1.6}

.callout{border:1px solid var(--gray-200);background:var(--gray-50);border-radius:var(--r);
  padding:24px 26px;margin:32px 0}
.callout p:last-child{margin-bottom:0}
.callout .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-700);margin-bottom:9px}

.keytakeaways{border:1px solid var(--gray-200);border-radius:var(--r);padding:24px 26px;margin:0 0 34px}
.keytakeaways .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray-500);margin-bottom:12px}
.keytakeaways ul{margin:0;padding-left:20px}

/* The opening narrative on a use-case page. Distinct from .answer, which is
   a definition: this one sets a scene, so it gets a softer, wider treatment. */
.scenario{border:1px solid var(--gray-200);border-left:3px solid var(--blue);
  background:linear-gradient(180deg,var(--gray-50),var(--white));
  border-radius:0 var(--r) var(--r) 0;padding:24px 26px;margin:0 0 34px}
.scenario .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-600);margin-bottom:10px}
.scenario p{margin:0;font-size:17px;line-height:1.66;color:var(--gray-700)}

/* Where the cost accumulates: two columns, because four short entries read as
   a list of line items rather than as prose. */
.deflist.costs{display:grid;grid-template-columns:1fr 1fr;gap:0 42px}
.deflist.costs dt{font-size:16px}
.deflist.costs dd{font-size:15.5px}
@media(max-width:640px){.deflist.costs{grid-template-columns:1fr}}

/* The sizing block inverts, because it is the one thing on the page we want a
   reader to stop at and actually do. */
.callout.sizing{border-color:var(--navy-900);
  background-image:linear-gradient(165deg,#0A1B33,var(--navy-900))}
.callout.sizing .k{color:var(--accent)}
.callout.sizing p{color:var(--on-dark-mist)}
.callout.sizing ol{margin:14px 0 0;padding-left:20px;color:var(--on-dark-mist)}
.callout.sizing li{margin-bottom:9px}

/* "What Traxivo does": a numbered sequence where the number is part of the
   design rather than a list marker, so each step reads as its own object. */
.steps{list-style:none;counter-reset:s;margin:0 0 18px;padding:0;display:grid;gap:13px}
.steps li{counter-increment:s;position:relative;padding:17px 22px 17px 58px;
  border:1px solid var(--gray-200);border-radius:var(--r);background:var(--gray-50)}
.steps li::before{content:counter(s);position:absolute;left:20px;top:17px;
  width:24px;height:24px;border-radius:50%;background:var(--navy-800);color:#fff;
  font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center}
.steps b{display:block;color:var(--navy-800);font-weight:600;margin-bottom:4px}
.steps span{color:var(--gray-700);font-size:15.5px;line-height:1.6}

/* In-page contents. Only rendered on articles with four or more sections,
   where it earns the space. */
.toc{border:1px solid var(--gray-200);border-radius:var(--r);padding:20px 24px;margin:0 0 36px;
  background:var(--white)}
.toc .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-500);margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.toc li{margin-bottom:7px;break-inside:avoid;color:var(--gray-500)}
.toc a{color:var(--gray-700);text-decoration:none;font-size:15px}
.toc a:hover{color:var(--blue-600)}
@media(max-width:620px){.toc ol{columns:1}}

.faq{margin:44px 0 0;border-top:1px solid var(--gray-200);padding-top:34px}
.faq h2{margin-top:0}
.faq details{border-bottom:1px solid var(--gray-200);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy-800);font-size:16.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent-700);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:12px 0 0;color:var(--gray-700)}

.endcta{background:var(--navy-800);border-radius:var(--r);padding:34px 34px 32px;margin:48px 0 0;
  background-image:linear-gradient(165deg,#0A1B33,var(--navy-900))}
.endcta h2{color:var(--white);margin:0 0 10px;font-size:24px}
.endcta p{color:var(--on-dark-mist);margin:0 0 20px;max-width:58ch}
.endcta a.btn{margin-right:10px}

/* ---------- card grids ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g3,.g2{grid-template-columns:1fr}}

.card{border:1px solid var(--gray-200);border-radius:var(--r);overflow:hidden;background:var(--white);
  display:flex;flex-direction:column;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.card:hover{border-color:rgba(62,158,133,.45);transform:translateY(-2px);
  box-shadow:0 14px 34px -28px rgba(11,37,69,.45)}
.card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--gray-100);
  transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.card:hover img{transform:scale(1.035)}
.card-in{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-700);margin-bottom:10px}
.card h3{font-size:18.5px;line-height:1.3;margin:0 0 9px}
.card h3 a{color:var(--navy-800);text-decoration:none}
.card h3 a:hover{color:var(--blue-600)}
.card p{color:var(--gray-600);font-size:14.5px;margin:0 0 16px}
.card .more{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--blue-600);text-decoration:none}

.listing{padding:50px 0 70px}

/* ---------- resources ---------- */
.deflist{border-top:1px solid var(--gray-200);margin:6px 0 0}
.deflist > div{border-bottom:1px solid var(--gray-200);padding:22px 0}
.deflist dt{font-weight:700;color:var(--navy-800);font-size:17.5px;margin:0 0 7px}
.deflist dd{margin:0;color:var(--gray-700)}
.linkrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.linkrow a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-decoration:none;
  color:var(--gray-700);border:1px solid var(--gray-200);border-radius:999px;padding:6px 13px;
  transition:border-color .16s,color .16s}
.linkrow a:hover{border-color:var(--accent-600);color:var(--accent-700)}

/* ---------- footer ---------- */
footer{background:var(--navy-900);color:var(--on-dark-faint);padding:54px 0 60px;font-size:13.5px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer .brand img{width:104px;height:39px}
footer h4{color:var(--white);font-size:12px;font-family:var(--mono);letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a{color:var(--on-dark-faint);text-decoration:none;transition:color .18s}
footer a:hover{color:var(--white)}
.foot-note{margin-top:40px;padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
}