/* WHAT ASTRA'S REDESIGN DID NOT COVER, and therefore all that is left of the
   old stylesheet. Appending Astra's rules on top of the originals was tried
   first and looked wrong in the very first screenshot: hers is a REPLACEMENT
   sheet, not an override layer, so the old .nt-slide-natto rule went
   on painting a yellow block behind a layout that assumes it is gone. The
   cascade cannot rescue two designs; one of them has to leave.

   These three survive because the redesign was scoped to the homepage and
   these are not on it: Natto's sign-up and review pages, the install guide,
   and the one language-bar rule Astra had no reason to write. --cream and
   --brown stay for the same reason — the .fl-* rules are painted with them,
   and Astra's palette, which comes after this, has no such colours. */
:root{--cream:#e8b800;--brown:#2a1306}
.lang-note{max-width:1120px;margin:-24px auto 0;padding:0 clamp(16px,4vw,40px) 36px;color:var(--muted);font-size:14px}
/* NATTO'S PAGES, /natto and /natto/review — the shape of Maius's
   /signup and /checkout (intro, three steps, the account panel beside what you
   are getting), in Natto's colours. */
main.fl-page{max-width:none;margin:0;background:var(--cream);color:var(--brown);padding:clamp(40px,7vw,72px) clamp(16px,4vw,32px) clamp(56px,8vw,96px)}
.fl-intro{text-align:center;max-width:760px;margin:0 auto}
.fl-eyebrow{display:block;font:700 12px/1 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.24em;text-transform:uppercase}
.fl-intro h1{margin:18px 0 0;font-size:clamp(38px,6.5vw,72px);font-weight:900;letter-spacing:-.035em;line-height:1.02}
.fl-intro h1 span{color:#fff;text-shadow:0 2px 0 rgba(42,19,6,.25)}
.fl-intro p{margin:18px 0 0;font-size:clamp(17px,2vw,19px);line-height:1.5}
.fl-steps{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);margin:34px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.fl-steps li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;opacity:.55}
.fl-steps li b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--brown);font-size:13px}
.fl-steps li.on{opacity:1}.fl-steps li.on b{background:var(--brown);color:var(--cream)}
.fl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);max-width:1040px;margin:clamp(32px,5vw,56px) auto 0;align-items:start}
.fl-panel{background:#fff;border-radius:24px;padding:clamp(22px,3vw,32px);box-shadow:0 18px 40px rgba(42,19,6,.16)}
.fl-panel .fl-eyebrow{color:var(--muted)}
.fl-panel h2{margin:14px 0 0;font-size:clamp(26px,3vw,32px);letter-spacing:-.02em}
.fl-panel>p{margin:10px 0 0;line-height:1.5;color:var(--muted)}
.fl-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.fl-actions .btn{width:100%}
.fl-consent{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;font-size:14px;line-height:1.5;color:var(--brown);cursor:pointer;min-height:44px;box-sizing:border-box}
.fl-consent input{margin-top:2px;flex:none;width:20px;height:20px;accent-color:var(--brown)}
.fl-consent span{flex:1;min-width:0}
/* UNDERLINED, because home.css sets a{text-decoration:none} globally and the
 * first live screenshot showed "Terms and Conditions" reading as plain text.
 * The whole point of the box is that the two documents can be read before the
 * box is ticked, so they have to look like the links they are. */
.fl-consent a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.fl-consent a:hover{text-decoration-thickness:2px}
.fl-form{margin:0}
.fl-form button.btn{font-family:inherit;width:100%}
.fl-note{margin:16px 0 0;text-align:center;font-size:14px;line-height:1.5;color:var(--muted)}
.fl-aside{padding-top:clamp(0px,2vw,16px)}
.fl-aside img{width:110px;height:auto;filter:drop-shadow(0 8px 14px rgba(42,19,6,.2))}
.fl-aside .fl-eyebrow{margin-top:18px}
.fl-aside h2{margin:14px 0 0;font-size:clamp(30px,4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.fl-list{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.fl-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.fl-list svg{flex:none;width:20px;height:20px;margin-top:1px}
.fl-list small{display:block;color:#4a2a12;font-size:14px}
.fl-price{display:flex;align-items:baseline;gap:10px;margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(42,19,6,.2)}
.fl-price strong{font-size:40px;letter-spacing:-.03em}
.fl-fine{margin:12px 0 0;font-size:13px;line-height:1.55;color:#4a2a12}
.fl-product{display:flex;align-items:center;gap:14px;margin:20px 0 0;padding:14px;border:1px solid var(--line);border-radius:16px}
.fl-product img{width:50px;height:auto}.fl-product h3{margin:0;font-size:18px}.fl-product p{margin:2px 0 0;color:var(--muted);font-size:14px}
.fl-product strong{margin-left:auto}
.fl-row{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line)}
.fl-row.total{font-weight:800;border-bottom:0}
@media (max-width:760px){.fl-grid{grid-template-columns:1fr}.fl-aside{text-align:center}.fl-list{text-align:left}}

:root{--ink:#14181f;--muted:#626874;--line:#e0e3e7;--blue:#0768ed;--paper:#fafafa;--yellow:#f4c533;--pad:clamp(24px,5.55vw,88px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,label,a{-webkit-tap-highlight-color:transparent}button,a,label{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,label:focus-visible{outline:3px solid #0768ed;outline-offset:5px}img{max-width:100%;object-fit:contain}p,h1,h2,h3,figure{margin:0}button{color:inherit}.skip{position:fixed;left:20px;top:-80px;z-index:30;background:white;padding:16px}.skip:focus{top:10px}[hidden]{display:none!important}
.nt-bar{height:88px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:28px;position:sticky;top:0;z-index:10;background:rgba(250,250,250,.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(20,24,31,.08)}.nt-brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:650;letter-spacing:-.6px}.nt-brand img{width:36px;height:36px;border-radius:9px}.nt-nav{display:flex;align-items:center;gap:31px;font-size:14px;font-weight:500}.nt-nav a{padding:12px 0}.nt-nav a:hover{color:var(--blue)}.nt-nav .cta{background:var(--ink);color:white;padding:12px 25px;border-radius:30px}.menu-toggle{display:none;border:1px solid var(--line);border-radius:24px;background:transparent;padding:10px 16px;min-height:44px}
.nt-hero{position:relative;padding:0 var(--pad);overflow:hidden}.nt-tab{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.nt-track{max-width:1440px;margin:auto}.nt-slide{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.35fr);align-items:center;gap:52px;min-height:650px;padding:55px 0 36px}.nt-slide-maius{display:none}.is-ready .nt-slide-maius:not([hidden]){display:grid}.hero-copy{padding-bottom:8px;min-width:0}.nt-new{display:inline-flex;align-items:center;gap:10px;color:#62605a;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:26px}.nt-new:before{content:"";width:7px;height:7px;border-radius:50%;background:#b68400}.nt-word{font-size:clamp(76px,8vw,124px);letter-spacing:-7px;line-height:.98;font-weight:650;margin-left:-5px}.nt-sub{font-size:clamp(25px,2.8vw,40px);letter-spacing:-1.2px;line-height:1.15;margin-top:10px;color:#8d6d12}.nt-lede,.mx-lede{font-size:17px;line-height:1.65;color:#5b606a;max-width:460px;margin-top:25px}.nt-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;font-size:14px;line-height:1.3;font-weight:550;border:1px solid transparent;cursor:pointer;min-height:46px;transition:background .2s,transform .2s}.btn:hover{transform:translateY(-2px)}.btn-dark{background:var(--ink);color:white}.btn-dark:hover{background:#303846}.btn-light{border-color:#bfc5ce;color:var(--ink);background:transparent}.btn-light:hover{background:#eee}.hero-visual{position:relative;min-width:0;padding:50px 0 40px 18px}.hero-visual:before{content:"";position:absolute;inset:3% -8% 4% 4%;z-index:-1;background:#f8eac0;border-radius:50%;filter:blur(45px);opacity:.5}.screen-frame{position:relative;background:#fff;border:1px solid #d5d8dd;border-radius:16px;padding:8px;box-shadow:0 20px 48px -24px #30374766;transform:rotate(-2deg);transition:transform .5s}.screen-frame:hover{transform:rotate(0deg)}.screen-frame>img{display:block;width:100%;height:auto;border-radius:9px}.hero-visual .nt-logo,.hero-visual .mx-lockup{position:absolute;right:-4px;bottom:5px;z-index:2;width:118px;height:118px;filter:drop-shadow(0 7px 5px #00000014)}.hero-visual .nt-logo{object-fit:contain}.hero-visual .mx-lockup{display:flex;align-items:center;justify-content:center;gap:5px;width:146px}.mx-logo{width:64px;height:64px;border-radius:14px}.mx-face{width:88px;height:88px}.hero-caption{margin:21px 0 0 16px;font-size:11px;line-height:1.5;color:#717781;max-width:75%}.mx-word{font-size:clamp(54px,6.4vw,92px);font-weight:600;letter-spacing:-5px;line-height:1.1}.mx-word span{display:inline}.mx-sub{font-size:32px;letter-spacing:-1.2px;margin-top:8px;color:#0768ed}.nt-slide-maius .hero-visual:before{background:#d7e8fc}.nt-slide-maius .screen-frame{transform:rotate(2deg)}.nt-slide-maius .screen-frame:hover{transform:rotate(0)}.nt-waves,.mx-waves{display:none}.hero-toolbar{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:9px 0 30px;border-bottom:1px solid var(--line)}.product-switch{display:flex;align-items:center;padding:5px;background:#eceef0;border-radius:30px;gap:2px}.product-switch button{background:none;border:0;padding:12px 27px;border-radius:24px;min-height:44px;color:#6a6f79;font-size:13px;white-space:nowrap}.product-switch button[aria-pressed=true]{background:#fff;color:#161b24;box-shadow:0 1px 4px #00000014}.hero-paging{display:flex;gap:10px;align-items:center}.hero-paging span{font-size:12px;color:#6b7180;font-variant-numeric:tabular-nums;margin-right:20px}.hero-arrow{border:1px solid #d9dce1;background:transparent;border-radius:50%;width:42px;height:42px;font-size:20px;display:grid;place-items:center}.hero-arrow:hover{background:#eceef2}
main{max-width:1600px;padding:0 var(--pad);margin:auto}.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:60px;padding:65px 0 30px}.sec-head h2{font-size:40px;letter-spacing:-1.6px;line-height:1.12;font-weight:600;flex-shrink:0}.sec-head p{font-size:15px;line-height:1.6;max-width:520px;color:var(--muted)}.main-dl{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card{position:relative;background:white;border:1px solid #e1e4e8;border-radius:22px;padding:28px;min-width:0}.main-dl .card{display:flex;flex-direction:column;overflow:hidden;padding:34px;min-height:350px}.main-dl .card-natto{background:#f6f0df;border-color:#ece3cc}.main-dl .card-maius{background:#111e31;border-color:#111e31;color:#fff}.card-top{display:flex;align-items:center;gap:16px;position:relative;z-index:1}.card-top img,.card-top .bob{flex:none;width:58px;height:58px;border-radius:14px;object-fit:contain}.card-top .app-face{margin-left:-10px;width:50px;height:50px}.card-top h3{font-size:25px;font-weight:600;letter-spacing:-.8px;line-height:1.2}.card-top .ver{font-size:12px;line-height:1.5;color:#697181;margin-top:7px}.new,.beta{display:inline-block;font-size:10px;letter-spacing:.3px;line-height:1.4;font-weight:600;margin-top:10px;color:#7c5d0e}.main-dl .card>p{margin:24px 0;font-size:15px;line-height:1.65;color:#5a606a;max-width:94%}.card-maius .ver,.main-dl .card-maius>p{color:#c4d2e4}.main-dl .btns{margin-top:auto;padding-top:3px}.card-maius .btn-dark{background:#e5efff;color:#13223a}.nt-boot,.mx-boot{position:absolute;right:12px;top:13px;opacity:.04;pointer-events:none}.nt-boot img{width:180px;height:180px}.nt-boot p,.mx-boot-sub{display:none}.mx-boot-word{font-size:46px;letter-spacing:-3px}.dl-help{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:24px;padding:26px 28px;background:#f1f2f4;border-radius:16px;font-size:13px;line-height:1.6;color:#59616e}.dl-help strong{display:block;color:#161b24;font-size:15px;margin-bottom:5px}.dl-help>div:first-child{max-width:560px}.dl-help-acts{display:flex;gap:10px;flex-shrink:0}.dl-help .btn{font-size:12px;padding:12px 17px}.ui-show{padding-top:10px}.ui-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.ui-fig{min-width:0}.ui-fig img{display:block;width:100%;height:auto;border:1px solid #d6d9df;border-radius:15px;box-shadow:0 12px 24px -20px #10182877}.ui-fig figcaption{margin-top:16px;font-size:12px;color:#606a79;line-height:1.5}/* SMALLER BOXES, 1 Nov 2026. Leo, with a screenshot: "first make the sample app
   boxes smaller". They were mostly air — a 278px floor, 26px of padding and a
   link pinned to the bottom by margin-top:auto, so a two-line description left
   ~90px of nothing under it. The floor is gone (grid already equalises a row's
   heights, so cards still line up), the padding and type are tighter, and the
   row is 4-up on a wide screen to sit with the 5-up Other apps row above it.
   These are samples, not the two products — they should not out-shout the main
   download cards, which keep their 350px and 34px padding. */
.extras{padding-bottom:75px}.extra-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.extra-grid .card{border-radius:16px;padding:18px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}.extra-grid .card:hover{border-color:#9ba9bd;transform:translateY(-3px)}.extra-grid .card-top{align-items:flex-start;gap:11px}.extra-grid .card-top img,.extra-grid .bob{width:40px;height:40px;border-radius:50%}.extra-grid .card-top h3{font-size:16px;letter-spacing:-.3px}.extra-grid .ver{font-size:10px;margin-top:5px}.extra-grid .beta{color:#626a78;border:1px solid #e1e4e8;padding:2px 6px;border-radius:4px;font-size:9px;margin-top:7px}.extra-grid .card>p{margin:14px 0 12px;font-size:13px;line-height:1.55;color:#626976}.extra-grid .btns{margin-top:auto}.extra-grid .btn-dark{background:transparent;color:var(--blue);padding:3px 0;min-height:26px;font-size:12px}.extra-grid .btn:after{margin-left:8px}.extra-grid .btn:after{content:'↗';margin-left:11px}.extra-grid .btn:hover{transform:none;text-decoration:underline}.others{padding-bottom:10px}.other-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.other-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #e1e4e8;border-radius:18px;overflow:hidden;color:inherit;transition:border-color .2s,transform .2s}.other-card:hover{border-color:#9ba9bd;transform:translateY(-3px)}.other-card img{display:block;width:100%;height:auto;aspect-ratio:1200/750;object-fit:cover;object-position:top center;border-bottom:1px solid #eceef1;background:#f1f2f4}.other-meta{display:flex;flex-direction:column;gap:5px;padding:17px 19px 19px}.other-meta strong{font-size:16px;font-weight:600;letter-spacing:-.3px}.other-meta span{font-size:13px;line-height:1.55;color:#626976}.other-host{font-size:11px;color:#8b93a1}.other-card:hover .other-meta strong{text-decoration:underline}.bob{display:block;background:#161912 url("/assets/builder-bob-portrait.jpg") 7% 4% / 415% auto}
footer{border-top:1px solid var(--line);max-width:calc(1600px - var(--pad)*2);margin:0 var(--pad);padding:30px 0 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;font-size:12px;color:#697280}footer nav{display:flex;gap:20px;flex-wrap:wrap}footer nav a:hover{text-decoration:underline}.langbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.langbar span{margin-right:10px}.langbar button{font-size:11px;border:0;background:transparent;padding:10px;min-height:40px;border-radius:20px}.langbar button.is-current{background:#e8ebf0;color:#202c3c}.preview-note{padding:16px var(--pad) 25px;color:#7b828e;font-size:10px;letter-spacing:.3px}.nt-slide:not([hidden]) .hero-copy{animation:arrive .45s ease both}.nt-slide:not([hidden]) .hero-visual{animation:arrive .6s ease both}@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.nt-hero,.nt-bar{padding-left:max(88px,calc((100vw - 1424px)/2));padding-right:max(88px,calc((100vw - 1424px)/2))}footer{margin-left:auto;margin-right:auto}}@media(max-width:1100px){.nt-slide{gap:30px;grid-template-columns:1fr 1.1fr;min-height:610px}.nt-word{font-size:95px}.nt-lede,.mx-lede{font-size:15px}.hero-visual{padding-left:0}.dl-help{flex-direction:column;align-items:flex-start;gap:18px}.dl-help>div:first-child{max-width:none}.sec-head{gap:30px}.card-top h3{font-size:23px}.extra-grid .card{padding:20px}.extra-grid .card-top{display:block}.extra-grid .card-top img,.extra-grid .bob{margin-bottom:13px}.nt-nav{gap:21px}}
@media(max-width:1180px){.other-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.extra-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.nt-bar{height:74px;gap:15px}.nt-brand{font-size:21px}.menu-toggle{display:block}.nt-nav{display:none;position:absolute;top:74px;left:0;right:0;padding:18px 24px;background:#fafafa;border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr;gap:8px 20px}.nt-nav.is-open{display:grid}.nt-nav .cta{text-align:center}.nt-slide{grid-template-columns:1fr;gap:8px;padding-top:36px;min-height:0}.hero-copy{max-width:620px}.nt-new{margin-bottom:22px;font-size:10px}.nt-word{font-size:84px;letter-spacing:-5px}.nt-sub{font-size:29px}.nt-lede,.mx-lede{font-size:15px;max-width:none;line-height:1.65;margin-top:20px}.nt-actions{margin-top:22px;gap:10px}.btn{padding:13px 21px;font-size:13px}.hero-visual{padding:35px 4px 24px;max-width:600px;width:100%;margin:auto}.hero-visual .nt-logo{width:88px;height:88px;right:-3px;bottom:6px}.hero-visual .mx-lockup{width:108px;bottom:5px}.mx-lockup .mx-logo{width:42px;height:42px}.mx-lockup .mx-face{width:68px;height:68px}.screen-frame{padding:5px;border-radius:10px;transform:none}.screen-frame>img{border-radius:6px}.nt-slide-maius .screen-frame{transform:none}.hero-caption{font-size:9px;margin:14px 0 0 0;max-width:73%}.hero-toolbar{padding:8px 0 25px;gap:14px}.product-switch button{padding:10px 17px;font-size:12px}.hero-paging{gap:6px}.hero-paging span{display:none}.hero-arrow{width:36px;height:36px}.sec-head{display:block;padding:44px 0 24px}.sec-head h2{font-size:31px;letter-spacing:-1px}.sec-head p{font-size:14px;margin-top:14px}.main-dl,.ui-grid{grid-template-columns:1fr;gap:20px}.main-dl .card{padding:26px;min-height:0}.main-dl .card>p{max-width:none;font-size:14px}.card-top .ver{font-size:11px}.dl-help{padding:24px;font-size:13px}.dl-help-acts{flex-wrap:wrap;gap:10px}.dl-help .btn{font-size:11px;padding:12px 15px}.ui-grid{gap:30px}.other-grid{grid-template-columns:1fr 1fr;gap:12px}.other-meta{padding:14px 15px 16px}.other-meta strong{font-size:15px}.extra-grid{grid-template-columns:1fr 1fr;gap:12px}.extra-grid .card{padding:16px}.extra-grid .card-top h3{font-size:17px}.extra-grid .card>p{font-size:13px}.extras{padding-bottom:40px}footer{align-items:flex-start;flex-direction:column;padding-top:26px}.preview-note{font-size:9px}.mx-word{font-size:70px;letter-spacing:-4px}.mx-sub{font-size:28px}}
@media(max-width:440px){.other-grid{grid-template-columns:1fr}.extra-grid{grid-template-columns:1fr}.extra-grid .card{padding:18px}.extra-grid .card-top{display:flex}.extra-grid .card-top img,.extra-grid .bob{margin-bottom:0}.extra-grid .card-top h3{font-size:19px}.extra-grid .card>p{font-size:14px}.card-top .app-face{display:none}.hero-toolbar{gap:8px}.hero-arrow{width:34px;height:34px}.product-switch button{padding:10px 15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.screen-frame,.nt-slide-maius .screen-frame{transform:none}.extra-grid .card:hover,.other-card:hover,.btn:hover{transform:none}}

.ins-page{max-width:1100px;margin:0 auto;padding:48px 20px 80px}
.ins-intro{max-width:640px;margin:0 0 44px}
.ins-intro h1{font-size:clamp(34px,6vw,54px);line-height:1.05;margin:10px 0 14px}
.ins-intro p{font-size:17px;line-height:1.6;color:var(--muted)}
.ins-sec{margin:0 0 56px;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.ins-head{display:grid;grid-template-columns:1fr minmax(0,330px);gap:28px;align-items:start;margin:0 0 26px}
.ins-head h2{font-size:clamp(24px,3.4vw,34px);line-height:1.1;margin:8px 0 8px}
.ins-sub{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.ins-note{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}
.ins-note h3{font-size:16px;margin:0 0 8px}
.ins-note p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.ins-note .btn{display:inline-block}
.ins-fine{font-size:12px!important;margin:12px 0 0!important}
.ins-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:none}
.ins-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.ins-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--cream);color:var(--brown)}
.ins-body h3{font-size:17px;margin:4px 0 8px}
.ins-body p{margin:0;font-size:15px;line-height:1.65;color:var(--ink)}
.ins-opt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:2px}
.ins-cmd{margin:12px 0 0;padding:12px 14px;border-radius:10px;background:#1d1407;color:#f7eddc;overflow-x:auto}
.ins-cmd code{font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.ins-trouble dl{margin:0}
.ins-trouble dt{font-weight:700;margin:18px 0 6px}
.ins-trouble dd{margin:0;color:var(--muted);line-height:1.6}
@media (max-width:820px){.ins-head{grid-template-columns:1fr}.ins-sec{padding:20px}}

/* THE HERO BEFORE THE SCRIPT RUNS — and if it never does.
   Astra's design is built by src/home-hero.ts at load: it splits each slide
   into copy and visual, borrows the screenshot from the showcase and adds the
   switcher. Until body.is-ready is set, none of that exists, and her sheet
   drops the old CSS-only :checked switching along with the old design — so the
   untouched state is BOTH slides, side by side in a two-column grid meant for
   copy and a picture. Rendered it and looked: it is a mess.
   
   The script is a deferred same-origin file and will almost always arrive, but
   "almost always" is the wrong standard for the first thing a customer sees.
   One column, centred, everything legible, every link working. */
body:not(.is-ready) .nt-slide{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center;padding:40px 0}
body:not(.is-ready) .nt-slide .nt-lede,body:not(.is-ready) .nt-slide .mx-lede{max-width:640px;margin-inline:auto}
body:not(.is-ready) .nt-slide .nt-actions{justify-content:center}
body:not(.is-ready) .nt-slide+.nt-slide{border-top:1px solid var(--line)}

/* THE BADGE OVER THE SCREENSHOT, 23 Oct 2026.
   Leo, with a screenshot of it: "remove the blue diamond logo and increase
   maius avatar logo size here", and then "also increase natto avatar size".
   This is only the badge Astra's hero tucks into the corner of the picture —
   the diamond is untouched everywhere it means something: the app icon, the
   favicon and the mark in the bar beside the word Maius. Hidden rather than
   removed from the markup, so the lockup still carries it for anything that
   reads the page rather than looks at it. */
.hero-visual .mx-lockup .mx-logo{display:none}
.hero-visual .mx-lockup{width:auto}
.hero-visual .mx-face{width:150px;height:150px}
.hero-visual .nt-logo{width:150px;height:150px}
@media (max-width:860px){
  .hero-visual .mx-face,.hero-visual .nt-logo{width:118px;height:118px}
}