/* public/css/marketing.css — landing site design system (content-driven) */
:root{
 --mx-navy:#00022E; --mx-navy-2:#031C61; --mx-navy-3:#052C71; --mx-royal:#0164BF; --mx-royal-2:#0170C5; --mx-azure:#008DE1; --mx-azure-2:#007DD4;
 --mx-cyan:#00A7F1; --mx-cyan-2:#09B5E7; --mx-glow:#27DEF7; --mx-ice:#A6EDFD; --mx-graphite:#2B2C36; --mx-sky:#56BEF0;
 --ink:#00022E; --ink2:#3A4060; --ink3:#5A6285; --line:#DCE8F4; --line2:#E8F1FA;
 --bg:#fff; --soft:#F3F8FD; --dark:#00022E; --brand:#0170C5; --brand-text:#0164BF; --focus-ring:#0170C5;
 --grad:linear-gradient(135deg,#00A7F1,#0170C5,#0164BF);--grad-btn:linear-gradient(135deg,#0170C5 0%,#0164BF 55%,#052C71 100%);
 --font-display:"Chakra Petch",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;
 --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 --radius:16px; --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font,"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;font-weight:500}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 12px;letter-spacing:.01em}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#00A7F1,#0164BF)}
.dark .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#cad6e1}
h1,h2,h3,.h1,.h2{font-family:var(--font-display)}
h1,h2,h3{letter-spacing:-.022em;margin:0;font-weight:700}
.h1{font-size:54px;line-height:1.04}
.h2{font-size:38px;line-height:1.1}
.lead{font-size:18px;color:var(--ink2);line-height:1.6}
.dark{background:var(--dark);color:#fff;--brand-text:#56BEF0;--focus-ring:#27DEF7}
.dark .lead{color:#91a3b8}
@media(max-width:760px){.h1{font-size:34px}.h2{font-size:27px}.lead{font-size:16px}}

/* nav */
.nav{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line2)}
.nav .row{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:8px}
.brand .bmark{width:auto;height:34px;object-fit:contain;transform:translateY(-2px)}.brand .bword{height:34px;width:auto}
.nav .links{display:flex;gap:22px;font-size:14px;color:#243d74;font-weight:500}
.nav .links a:hover{color:#00022E}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}.nav .nav-link,.nav .nav-trigger,.nav .right a,.nav .brand,.nav .signin{white-space:nowrap}.nav .right .btn{white-space:nowrap;flex:0 0 auto}.nav .links{flex-wrap:nowrap}
.nav .signin{font-size:14px;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:600;font-size:14px;padding:10px 16px;cursor:pointer;border:1px solid transparent;transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:#000235;color:#fff;position:relative;box-shadow:0 1px 0 rgba(0,2,46,.04)}
.btn-dark::after{content:"";position:absolute;left:10px;right:10px;bottom:-2px;height:3px;border-radius:3px;background:var(--grad);opacity:.95}
.btn-ghost{background:#fff;color:#000235;border-color:var(--line)}
.btn-light{background:#fff;color:#000235}
.btn-lg{padding:13px 22px;font-size:15px}
.menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer}
@media(max-width:860px){.nav .links,.nav .signin{display:none}.menu-btn{display:block}}

/* sections */
section{padding:70px 0}
.sec-sm{padding:46px 0}
.center{text-align:center}
.sec-head{max-width:680px}
.sec-head.center{margin:0 auto}
.sec-head .h2{margin:10px 0 0}
.sec-head .lead{margin-top:12px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* hero */
.hero{padding:78px 0 30px;position:relative;z-index:0}
.hero .h1{margin-bottom:16px}
.hero .lead{max-width:560px}
.hero .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-visual{background:var(--soft);border:1px solid var(--line);border-radius:20px;min-height:300px;display:flex;align-items:center;justify-content:center;padding:24px}
.dark .hero-visual{background:#010E42;border-color:#0d2358}
.bubble{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:14px;box-shadow:0 6px 24px rgba(0,2,46,.06);display:inline-flex;align-items:center;gap:8px}
.bubble.b2{background:#000235;color:#fff;border-color:#000235}
.avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#00A7F1,#0164BF)}

/* trust */
.trust{padding:22px 0}
.trust .label{text-align:center;font-size:14px;font-weight:500;color:var(--ink3);margin:0;letter-spacing:.01em}
.trust .logos{display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:center;align-items:center;opacity:.62;font-weight:700;color:#243d74;font-size:17px}

/* cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.dark .card{background:#010E42;border-color:#0d2358}
.card .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--soft);margin-bottom:12px}
.dark .card .ic{background:#05184d}
.card h3{font-size:16px;margin-bottom:6px}
.card p{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.55}
.dark .card p{color:#91a3b8}
.feature-card{padding:0;overflow:hidden}
.feature-card .top{background:var(--soft);min-height:150px;display:flex;align-items:center;justify-content:center;padding:18px;border-bottom:1px solid var(--line)}
.feature-card .body{padding:18px}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:20px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step .num{color:var(--app-brand-text,var(--brand-text,#0170C5));font-weight:700;font-size:14px}
.step h3{font-size:15px;margin:8px 0 5px}
.step p{font-size:13px;color:var(--ink2);margin:0}

/* problem list */
.plist{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px}
@media(max-width:680px){.plist{grid-template-columns:1fr}}
.pitem{border-left:2px solid var(--line);padding-left:14px}
.pitem h4{font-size:15px;margin:0 0 5px}
.pitem p{font-size:13px;color:var(--ink2);margin:0}

/* testimonials */
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.tcard .q{font-size:14px;line-height:1.6;color:#0e2359}
.tcard .who{margin-top:16px;font-size:13px}
.tcard .who b{display:block}
.tcard .who span{color:var(--ink3)}
.stat-card{background:var(--grad-btn);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;justify-content:flex-end;min-height:170px}
.stat-card .big{font-size:32px;font-weight:800}

/* pricing */
.toggle{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:3px;margin:0 auto}
.toggle button{border:none;background:none;padding:8px 16px;border-radius:8px;font:600 13px var(--font);cursor:pointer;color:var(--ink2)}
.toggle button.on{background:#fff;color:#00022E;box-shadow:0 1px 3px rgba(0,2,46,.1)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(max-width:680px){.tiers{grid-template-columns:1fr}}
.tier{padding:22px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tier:nth-child(3n){border-right:none}
.tier:nth-child(n+4){border-bottom:none}
@media(max-width:680px){.tier{border-right:none}.tier:nth-child(n+4){border-bottom:1px solid var(--line)}.tier:last-child{border-bottom:none}}
.tier.pop{background:#f5fbff}
.tier .name{font-weight:600;font-size:15px;display:flex;align-items:center;gap:7px}
.tier .price{font-size:32px;font-weight:800;margin:10px 0 2px;letter-spacing:-.02em}
.tier .per{font-size:12px;color:var(--ink3)}
.tier .btn{width:100%;margin:14px 0}
.tier ul{list-style:none;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--line);font-size:13px;color:#243d74}
.tier li{padding:5px 0 5px 20px;position:relative}
.tier li::before{content:"✓";position:absolute;left:0;color:#15803d;font-weight:700}
.poppill{background:#000235;color:#fff;font:700 11px var(--font);padding:3px 10px;border-radius:999px}

/* add-ons + faq */
.addon{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.addon .ic{width:38px;height:38px;border-radius:50%;background:#000235;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.addon .grow{flex:1}.addon h4{margin:0;font-size:15px}.addon p{margin:3px 0 0;font-size:13px;color:var(--ink2)}
.addon .price{font-weight:700;font-size:15px;white-space:nowrap}
.faq{max-width:760px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:10px;background:#fff}
.faq summary{padding:16px 18px;font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄";color:var(--ink3)}
.faq p{padding:0 18px 16px;margin:0;color:var(--ink2);font-size:14px}

/* form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 20px 50px rgba(0,2,46,.12)}
.form-card h3{font-size:16px;margin:0 0 14px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:5px}
.input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:14px var(--font);background:#fff;color:#00022E}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* cta band */
.cta-band{background:#fff;border-radius:24px;padding:64px 24px;text-align:center;position:relative;overflow:hidden;border:1px solid var(--line)}
.cta-band .h2{position:relative}
.cta-band .blob{position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(4px);opacity:.9}
.cta-band .b-l{left:-60px;bottom:-60px;background:radial-gradient(circle,#00a7f1,transparent 70%)}
.cta-band .b-r{right:-60px;bottom:-60px;background:radial-gradient(circle,#00a7f1,transparent 70%)}

/* footer */
.foot{background:#000235;color:#91a3b8;padding:54px 0 34px;position:relative;overflow:hidden}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 2fr;gap:24px}
@media(max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}
/* The product sites: 17 links, in two columns so the footer does not grow a tower. */
.foot .fleet-links{columns:2;column-gap:20px}
.foot .fleet-links a{break-inside:avoid}
@media(max-width:1000px){.foot .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}.foot .fleet-col{grid-column:1/-1}.foot .fleet-links{columns:3}}
@media(max-width:760px){.foot .fleet-links{columns:2}}
.foot h3,.foot h4,.foot h5{color:#597498;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
.foot a{display:block;font-size:13.5px;padding:4px 0;color:#cad6e1}
.foot a:hover{color:#fff}
.foot .brandwrap img{height:44px}
.foot .ghost{position:absolute;left:24px;bottom:-30px;font-size:140px;font-weight:800;color:#010E42;letter-spacing:-.04em;pointer-events:none;user-select:none}
.muted{color:var(--ink3);font-size:13px}
.hidden{display:none}

/* blog */
.blog-wrap{display:grid;grid-template-columns:190px 1fr;gap:34px}
@media(max-width:760px){.blog-wrap{grid-template-columns:1fr}.blog-side{display:none}}
.blog-side .search{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;color:var(--ink3);margin-bottom:16px}
.blog-cats .ct{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-bottom:6px}
.blog-cats a{display:block;padding:5px 0;font-size:14px;color:#243d74}
.blog-cats a:hover{color:#00022E}
.posts{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:620px){.posts{grid-template-columns:1fr}}
.post .thumb{border-radius:14px;min-height:165px;display:flex;align-items:flex-end;padding:16px;color:#fff;font-weight:700;font-size:18px;background-size:cover;background-position:center;text-shadow:0 1px 10px rgba(0,2,46,.55),0 1px 2px rgba(0,2,46,.4)}
.post h3{font-size:16px;margin:12px 0 6px;line-height:1.3}
.post p{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.5}
.post .meta{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;color:var(--ink3)}
.post .meta .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#91a3b8,#395583);flex-shrink:0}
.news-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.news-card b{font-size:16px}.news-card p{margin:4px 0 0;font-size:13.5px;color:var(--ink2)}

/* ===================== mega-menu navigation ===================== */
.nav .row{position:relative}
.nav .links{display:flex;gap:3px;align-items:center}
.nav-item{display:flex;align-items:center}
.nav-link,.nav-trigger{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:#243d74;padding:8px 13px;border-radius:9px;cursor:pointer;background:none;border:none;font-family:inherit;text-decoration:none}
.nav-link:hover,.nav-trigger:hover,.nav-item:hover .nav-trigger,.nav-item.open .nav-trigger,.nav-link.on{color:#00022E;background:#ecf6fb}
.nav-trigger .chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.nav-item:hover .nav-trigger .chev,.nav-item.open .nav-trigger .chev{transform:rotate(-135deg);margin-top:2px}
.mega{position:absolute;left:50%;top:100%;width:min(760px,94vw);padding-top:16px;transform:translateX(-50%) translateY(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease .45s,transform .2s ease .45s,visibility 0s .65s,pointer-events 0s .45s;z-index:1001}
.nav-item:hover .mega,.nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition:opacity .2s ease 0s,transform .2s ease 0s,visibility 0s 0s,pointer-events 0s 0s}
.mega-inner{background:#fff;border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 70px rgba(3,28,97,.16);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mega-col{padding:6px}
.mega-col-r{border-left:1px solid var(--line2);padding-left:18px}
/* Resources grew to eight quick links, which stacked into one tall column beside a
   short promo card — the menu came out lopsided and the items read as a list rather
   than a grid. Lay a long column out in two, and give the panel the width to hold it.
   Keyed on :has() so all ten pages that carry this nav get it without ten edits; a
   browser without :has() simply keeps the single column it has today. */
.mega-col:has(.mitem:nth-of-type(5)){display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;align-content:start}
.mega-col:has(.mitem:nth-of-type(5)) .mega-label{grid-column:1/-1}
.nav-item:has(.mitem:nth-of-type(7)) .mega{width:min(940px,96vw)}
/* Two columns of tiles need a little less air per row, or the panel gets tall again. */
.mega-col:has(.mitem:nth-of-type(5)) .mitem{padding:8px 9px;gap:10px}
.mega-col:has(.mitem:nth-of-type(5)) .mtile{width:34px;height:34px}
.mega-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#91a3b8;font-weight:700;padding:2px 10px 8px}
.mitem{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:12px;text-decoration:none}
.mitem:hover{background:#f2f7fb}
.mtile{width:38px;height:38px;border-radius:10px;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.mtile svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtext b{display:block;font-size:14px;color:#021247;font-weight:600;line-height:1.3}
.mtext span{font-size:12.5px;color:#597498;line-height:1.35}
.mfeat{display:block;text-decoration:none}
.mfeat-img{height:118px;border-radius:12px;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-weight:700;font-size:15px;overflow:hidden}
/* the mark is dark-on-transparent, so on the gradient card it was all but invisible;
   a white chip is what makes it legible without shipping a second logo file */
.mfeat-img img{width:30px;height:30px;background:#fff;border-radius:50%;padding:5px;box-sizing:border-box}
.mfeat b{display:block;font-size:14px;color:#021247;margin-top:11px;line-height:1.35}
.mfeat span{font-size:12.5px;color:#597498}
/* The Resources panel promoted exactly one update and then went stale. A short feed
   under the feature card shows the shape of the release — what is new, what improved,
   what was fixed — and hands the reader to the full changelog rather than a dead end. */
.mega-col-r .mfeat-img{height:96px}
.mfeed{margin-top:11px;padding-top:7px;border-top:1px solid var(--line2);display:flex;flex-direction:column}
.mfeed a{display:flex;gap:9px;align-items:flex-start;padding:6px 8px;border-radius:9px;
  text-decoration:none;transition:background .15s}
.mfeed a:hover{background:#f2f7fb}
.mfeed span{font-size:12.6px;color:#243d74;line-height:1.38}
.mtag{flex:none;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:2px 6px;border-radius:5px;margin-top:2px;white-space:nowrap}
.mtag.new{background:rgba(5,150,105,.14);color:#047857}
.mtag.imp{background:rgba(0,125,212,.14);color:var(--app-brand-text,var(--brand-text,#0170c5))}
.mtag.fix{background:rgba(180,83,9,.14);color:#b45309}
.mall{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 8px;
  font-size:12.5px;font-weight:600;color:var(--app-brand-text,var(--brand-text,#0164bf));text-decoration:none}
.mall:hover{text-decoration:underline}
.mall span{transition:transform .18s}
.mall:hover span{transform:translateX(3px)}
.m-mob{padding:6px 0 14px}
.m-mob .mlbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#536d94;font-weight:700;margin:10px 0 4px}
.m-mob a{display:block;padding:7px 2px;font-size:15px;color:#0e2359;text-decoration:none}
@media(max-width:860px){.nav .links{display:none}.mega{display:none}}
@media(min-width:861px){.m-mob{display:none!important}}

/* mega-menu backdrop: dim + blur the page beneath the nav so the panel reads solid */
.nav-item.has-mega::before{content:"";position:fixed;left:0;right:0;top:63px;bottom:0;background:rgba(0,5,57,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease .45s,visibility 0s .67s}
.nav-item.has-mega:hover::before,.nav-item.has-mega.open::before{opacity:1;visibility:visible;transition:opacity .22s ease 0s,visibility 0s 0s}
.mega-inner{position:relative;z-index:1;background:#fff}
@media(max-width:860px){.nav-item.has-mega::before{display:none}}

/* guide page: prose + FAQ */
.gprose p{font-size:15.5px;line-height:1.72;color:var(--ink2);margin:0 0 15px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:15px 2px}
.faq summary{font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--app-brand-text,var(--brand-text,#0170C5));font-size:22px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:10px 0 0;font-size:14px;color:var(--ink2);line-height:1.62}

/* i18n line-break fixes: long translations must wrap gracefully, never overflow */
body{overflow-wrap:break-word}
.btn{white-space:normal;line-height:1.25}
.nav-link,.nav-trigger{white-space:normal;text-align:center}
.tier .name,.feat h3,.faq-q,.mtext b,.mtext span{overflow-wrap:break-word}
.links{flex-wrap:wrap;row-gap:6px}

/* Footer: keep the copyright/links readable and replace the giant "Matrix AI"
   text watermark with a faint brand logo tucked in the corner (behind content). */
.foot .wrap{position:relative;z-index:2}
.foot .ghost{left:auto;right:34px;bottom:26px;top:auto;width:100px;height:100px;font-size:0;color:transparent;background:url(/brand/matryx-mark.png) center/contain no-repeat;opacity:0.85;z-index:1}

/* ---- Responsive safety net (mobile) ---- */
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
img,video,svg,iframe{max-width:100%;height:auto}
table{max-width:100%}
pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
@media(max-width:860px){
  section{padding:52px 0}
  .cta-band{padding:48px 20px}
}
@media(max-width:680px){
  .wrap{padding-left:18px;padding-right:18px}
  .split,.splitv,.blog-wrap{grid-template-columns:1fr!important}
  .g2,.g3,.g4,.grid,.posts,.row2{grid-template-columns:1fr!important}
  .hero{padding:52px 0 22px}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{width:100%}
  .cta-band{padding:40px 16px;border-radius:18px}
  .foot .cols{grid-template-columns:1fr 1fr}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:460px){
  .foot .cols{grid-template-columns:1fr}
}

/* Live-FX announcement under the pricing toggle (pricing-fx.js fills it in). */
.fx-note{margin:14px auto 0;max-width:640px;font-size:12.5px;line-height:1.75;color:var(--ink3);text-align:center;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:10px 16px}
.fx-note b{color:var(--ink2);font-weight:600}
.fx-note .fx-k{position:relative;padding-left:14px;color:var(--ink)}
.fx-note .fx-k::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.fx-note .fx-stale{color:#b45309}
@media(max-width:520px){.fx-note{font-size:12px;padding:9px 12px}}

/* "and up" qualifier next to a converted price (Private AI). Sits OUTSIDE
   [data-price] so the FX conversion never overwrites it, and is a whole text
   node so i18n.js can translate it (ja "〜", ko "부터", zh "起", …). */
.from-suffix{margin-left:.3em;font-size:.62em;font-weight:600;opacity:.75;letter-spacing:0}

/* ---- Contrast on dark grounds (WCAG AA) --------------------------------
   --ink2/--ink3 are tuned for a white page: on Deep Navy they measure 2.56 and
   4.09, both under the 4.5 AA needs for body text. They are overridden HERE
   rather than changed globally, because on light they are correct. Mist is the
   kit's own muted tone and clears 8:1 on this ground. */
.dark>.wrap>.sec-head p,.dark .step p,.dark .steps li,
.foot p,.foot .muted,.foot h3,.foot a{color:#96A7BB}
.dark .num{color:#56BEF0}   /* Matryx Royal reads 3.88 on Deep Navy; this logo-sky tint 9.4 */

/* ── blog: index + article ───────────────────────────────────────────────────
   Generated by scripts/build-blog.mjs. The chrome comes from blog.html, so only
   the article body needs styling here. */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px;margin-top:24px}
.bl-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.bl-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(3,28,97,.10);border-color:#cdd9e3}
.bl-card img{width:100%;height:158px;object-fit:cover;display:block}
.bl-card .c{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--app-brand-text,var(--brand-text,#0164bf));padding:13px 15px 0}
.bl-card b{font-size:16px;line-height:1.35;color:#021247;padding:6px 15px 0}
.bl-card .e{font-size:13.5px;line-height:1.55;color:var(--ink2);padding:8px 15px 0}
.bl-card .m{font-size:12px;color:var(--ink3);padding:10px 15px 15px;margin-top:auto}
.bl-cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.bl-cat{font-size:13px;padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;
  color:var(--ink2);cursor:pointer}
.bl-cat.active,.bl-cat:hover{background:var(--dark,#021247);color:#fff;border-color:transparent}

.bl-article{max-width:760px;padding-top:34px;padding-bottom:60px}
.bl-back{display:inline-block;font-size:13px;color:var(--ink3);text-decoration:none;margin-bottom:14px}
.bl-back:hover{color:var(--ink)}
.bl-h1{font-size:40px;line-height:1.12;letter-spacing:-.025em;margin:10px 0 12px}
.bl-meta{font-size:13px;color:var(--ink3);margin:0 0 20px}
.bl-cover{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin-bottom:26px}
.bl-lead{font-size:19px;line-height:1.62;color:var(--ink2);margin:0 0 24px}
.bl-article h2{font-size:24px;letter-spacing:-.015em;margin:34px 0 12px}
.bl-article p{font-size:16.5px;line-height:1.75;color:var(--ink2);margin:0 0 16px}
.bl-article ul{margin:0 0 18px;padding-left:20px}
.bl-article li{font-size:16.5px;line-height:1.7;color:var(--ink2);margin-bottom:9px}
.bl-article blockquote{margin:26px 0;padding:16px 22px;border-left:3px solid #0170C5;background:var(--soft);border-radius:0 12px 12px 0}
.bl-article blockquote p{margin:0;font-size:17.5px;line-height:1.6;color:var(--ink);font-style:italic}
.bl-cta{margin:38px 0 10px;padding:24px;border-radius:14px;background:var(--soft);border:1px solid var(--line2);text-align:center}
.bl-cta b{display:block;font-size:18px;margin-bottom:6px}
.bl-cta p{font-size:14.5px;margin:0 0 14px}
.bl-nav{display:flex;justify-content:space-between;gap:16px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.bl-nav a{font-size:14px;color:var(--ink2);text-decoration:none;max-width:46%;line-height:1.4}
.bl-nav a:hover{color:var(--app-brand-text,var(--brand-text,#0164bf))}
.bl-rel{margin-top:40px}
.bl-rel>b{font-size:15px}
.bl-rel .bl-card img{height:118px}
@media(max-width:640px){.bl-h1{font-size:30px}.bl-article p,.bl-article li{font-size:16px}}

/* ── Depth ─────────────────────────────────────────────────────────────────────
   A single drop shadow reads as a sticker; two layers read as an object — a tight
   CONTACT shadow saying where a surface meets the page, and a wide AMBIENT one
   saying how far above it floats. The landing site is light-ground throughout, so
   the top edge also gets a lit highlight.

   This file is the LANDING SITE's own design system (index, pricing). styles.css
   serves the other public pages and app.css the dashboard; all three carry the
   same idea at their own intensity. */
:root{
  --elev-1:0 1px 2px rgba(1,14,66,.07), 0 2px 8px rgba(1,14,66,.05);
  --elev-2:0 2px 5px rgba(1,14,66,.09), 0 12px 30px rgba(1,14,66,.09);
  --elev-3:0 6px 14px rgba(1,14,66,.12), 0 28px 64px rgba(1,14,66,.14);
  --elev-edge:inset 0 1px 0 rgba(255,255,255,.9);
}
.card,.feature-card,.addon,.tier{
  box-shadow:var(--elev-edge), var(--elev-1);
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, border-color .15s ease}
.card:hover,.feature-card:hover,.addon:hover,.tier:hover{
  transform:translateY(-3px); box-shadow:var(--elev-edge), var(--elev-2)}
/* The plan someone is meant to pick sits a step further off the page even at rest. */
.tier.popular,.tier.featured{box-shadow:var(--elev-edge), var(--elev-2)}
.tier.popular:hover,.tier.featured:hover{box-shadow:var(--elev-edge), var(--elev-3)}

/* Reduced motion takes the MOVEMENT, not the depth: the shadow still deepens, the
   card simply does not travel. */
@media (prefers-reduced-motion: reduce){
  .card,.feature-card,.addon,.tier{transition:box-shadow .18s ease,border-color .15s ease}
  .card:hover,.feature-card:hover,.addon:hover,.tier:hover{transform:none}
}