/* Anantyx AI & Cloud Command website mockups, styled to match anantyx.com.
   Every value below was read from anantyx.com on 11 October 2026, at 1440 pixels wide:
   Geist is the only typeface, headings are weight 500 with line height 1.105 and letter
   spacing -0.2px, body text is 20px on 30px, the hero is deep navy, buttons are pills with
   a 300px radius and 16px by 48px padding, and a section opens with a large gap.
   Brand blue #2567FF, orange #FF8746, heading black #16171B, body gray #494A57,
   pale section #F4F4F4, navy #141F39. */

.ap-site{
--navy:#141F39;--navy-2:#1D2D4F;--ink:#16171B;--muted:#494A57;--blue:#2567FF;--blue-dark:#1C52D6;
--orange:#FF8746;--pale:#F4F4F4;--line:#E4E5EA;--line-dark:#2E3C5C;--on-navy:#C9D3E8;
font-family:Geist,"Geist Variablefont Wght",Inter,Arial,sans-serif;color:var(--ink);background:#fff;width:100%;
font-size:18px;line-height:1.55;letter-spacing:-.2px;-webkit-font-smoothing:antialiased}
.ap-site *{box-sizing:border-box}
.ap-site a{color:inherit;text-decoration:none}
.ap-site .wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* the line that says this is a mockup */
.ap-site .topnote{text-align:center;background:var(--ink);color:#C8CBD6;font-size:12px;font-weight:500;padding:10px;letter-spacing:.12em}

/* header, dark like the one on anantyx.com */
.ap-site .site-header{background:var(--navy);position:relative;z-index:30}
.ap-site .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.ap-site .brand{display:flex;align-items:center;gap:14px;white-space:nowrap}
.ap-site .brand-logo{height:30px;width:auto;display:block;flex:none}
.ap-site .brand-sub{color:#8FA6D8;font-size:11px;font-weight:500;letter-spacing:.18em;border-left:1px solid var(--line-dark);padding-left:14px}
.ap-site .nav{display:flex;align-items:center;gap:30px}
.ap-site .nav>a,.ap-site .nav summary{font-size:15px;font-weight:400;color:#E7ECF7;white-space:nowrap;cursor:pointer}
.ap-site .nav>a:hover,.ap-site .nav summary:hover{color:#fff}
.ap-site .nav details{position:relative}
.ap-site .nav summary{list-style:none}
.ap-site .nav summary::-webkit-details-marker{display:none}
.ap-site .drop{position:absolute;top:34px;left:-18px;width:268px;background:#fff;display:grid;border:1px solid var(--line);box-shadow:0 24px 60px rgba(20,31,57,.18);padding:10px;border-radius:14px}
.ap-site .drop a{padding:11px 12px;border-radius:9px;font-size:15px;color:var(--ink)}
.ap-site .drop a:hover{background:var(--pale)}
.ap-site .menu-mobile{display:none}
.ap-site .menu-mobile summary{cursor:pointer;font-size:22px;color:#fff;padding:10px;list-style:none}
.ap-site .menu-mobile summary::-webkit-details-marker{display:none}
.ap-site .menu-mobile div{position:absolute;right:24px;top:76px;background:#fff;box-shadow:0 24px 60px rgba(20,31,57,.22);padding:14px;display:grid;gap:2px;width:262px;border-radius:14px;border:1px solid var(--line)}
.ap-site .menu-mobile a{font-size:16px;padding:9px 10px;border-radius:8px;color:var(--ink)}

/* buttons, pills the same shape as the ones on anantyx.com */
.ap-site .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:300px;padding:16px 36px;font-size:14px;font-weight:500;border:1px solid var(--line);background:#fff;color:#303139;transition:transform .15s ease,background .15s ease}
.ap-site .btn:hover{transform:translateY(-1px)}
.ap-site .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.ap-site .btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.ap-site .btn.white{background:#fff;border-color:#fff;color:#303139}
.ap-site .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ap-site .btn.ghost:hover{background:rgba(255,255,255,.1)}

/* hero, centered on deep navy */
.ap-site .hero{background:radial-gradient(120% 140% at 50% 0%,var(--navy-2) 0%,var(--navy) 62%);color:#fff;padding:96px 0 104px;text-align:center}
.ap-site .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:48px}
.ap-site .hero-grid>div:first-child{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%}
.ap-site .hero-grid>div{max-width:100%}
.ap-site .hero-grid>div:first-child>*{max-width:100%}
.ap-site .hero-grid>div:first-child h1{margin:0}
.ap-site .hero .eyebrow{color:#fff;font-size:14px;font-weight:300;letter-spacing:.5em;text-transform:uppercase;justify-content:center;opacity:.92}
.ap-site .hero h1{color:#fff;max-width:min(17ch,100%)}
.ap-site .hero h1 em{font-style:normal;color:#7FA8FF}
.ap-site .hero .lead{color:var(--on-navy);margin:0 auto}
.ap-site .hero-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ap-site .chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ap-site .chip{padding:9px 16px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);border-radius:300px;font-size:13px;color:#DCE4F5;font-weight:400}

/* type scale, the sizes anantyx.com uses */
.ap-site .eyebrow{font-size:13px;font-weight:500;color:var(--blue);letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.ap-site h1{font-size:clamp(40px,5.4vw,72px);font-weight:500;letter-spacing:-.2px;line-height:1.105;margin:18px 0 0;text-wrap:balance}
.ap-site h2{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.2px;line-height:1.105;margin:14px 0 0;text-wrap:balance}
.ap-site h3{font-size:22px;font-weight:500;letter-spacing:-.2px;line-height:1.3;margin:0 0 10px}
.ap-site .lead{color:var(--muted);font-size:20px;line-height:1.5;max-width:min(62ch,100%)}
.ap-site .section{padding:120px 0}
.ap-site .section.pale{background:var(--pale)}
.ap-site .section-head{max-width:min(78ch,100%);margin-bottom:56px}
.ap-site .section-head p{font-size:20px;color:var(--muted);line-height:1.5;margin:18px 0 0}
.ap-site .partners-section .section-head{max-width:100%}

/* the three facts under the hero */
.ap-site .signals{border-bottom:1px solid var(--line);background:#fff}
.ap-site .signals .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:26px;padding-bottom:26px}
.ap-site .signal{font-size:15px;font-weight:500;display:flex;gap:12px;align-items:center;color:var(--ink)}
.ap-site .signal i{width:34px;height:34px;background:#EDF2FF;color:var(--blue);border-radius:300px;display:grid;place-items:center;font-style:normal;flex:none}
.ap-site .signal i .ic{width:18px;height:18px}

/* the line that says what is drawn and what is live */
.ap-site .notice{font-size:14px;color:#8A5A2B;border:1px solid #F2DEC6;background:#FFF8F0;border-radius:14px;padding:14px 18px;margin:28px auto 0}

/* the problem cards */
.ap-site .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ap-site .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ap-site .panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}
.ap-site .panel .icon{background:#EDF2FF;color:var(--blue);width:46px;height:46px;display:grid;place-items:center;border-radius:300px;margin-bottom:20px}
.ap-site .panel .icon .ic{width:22px;height:22px}
.ap-site .panel p{font-size:17px;color:var(--muted);line-height:1.55;margin:0}
.ap-site .proof{margin-top:28px;font-size:16px;line-height:1.65;color:var(--muted);border-left:3px solid var(--orange);padding:4px 0 4px 20px}

/* the three blocks */
.ap-site .feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:84px}
.ap-site .feature:last-child{margin-bottom:0}
.ap-site .feature.flip .feature-copy{order:2}
.ap-site .feature-copy small{font-size:13px;letter-spacing:.22em;color:var(--blue);font-weight:500;text-transform:uppercase}
.ap-site .feature-copy h3{font-size:36px;font-weight:500;line-height:1.15;letter-spacing:-.2px;margin:16px 0 14px}
.ap-site .feature-copy p{font-size:19px;color:var(--muted);line-height:1.55;margin:0}
.ap-site .example{margin-top:22px;border-left:3px solid var(--orange);padding:4px 0 4px 18px;font-size:17px;line-height:1.55;color:var(--muted)}
.ap-site .well{display:flex;justify-content:center}

/* the drawn product panels */
.ap-site .ui{color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(20,31,57,.14);font-size:14px;width:100%;max-width:520px}
.ap-site .hero .ui{box-shadow:0 40px 90px rgba(0,0,0,.42)}
.ap-site .ui-top{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:15px 20px;font-weight:500;color:var(--ink)}
.ap-site .ui-top b{color:var(--blue);font-weight:600}
.ap-site .ui-top span{color:#8A5A2B;background:#FFF2E4;border-radius:300px;font-size:12px;padding:5px 12px;letter-spacing:.08em;font-weight:500}
.ap-site .ui-body{padding:22px;text-align:left}
.ap-site .ui-title{font-size:22px;font-weight:500;margin:0 0 18px}
.ap-site .ui-box{border:1px solid var(--line);border-radius:14px;padding:4px 16px;margin-top:14px}
.ap-site .ui-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #EFF0F4;padding:13px 0;font-size:14px;color:var(--muted)}
.ap-site .ui-row:last-child{border-bottom:none}
.ap-site .ui-row strong{color:var(--ink);font-weight:500;text-align:right}
.ap-site .ui-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ap-site .ui-tile{border:1px solid var(--line);border-radius:14px;padding:16px}
.ap-site .ui-tile small{display:block;color:#7A8296;font-size:12px}
.ap-site .ui-tile b{display:block;font-size:17px;font-weight:500;margin:8px 0}
.ap-site .ui-tile i{font-size:12px;font-style:normal;color:#0E8A5F}
.ap-site .cloud-choice{display:flex;gap:10px;margin-bottom:6px}
.ap-site .cloud-choice button{flex:1;font-size:13px;font-weight:500;border:1px solid var(--line);background:#fff;border-radius:300px;padding:11px 6px;cursor:pointer;color:var(--ink);font-family:inherit}
.ap-site .cloud-choice button.selected{border-color:var(--blue);background:#EDF2FF;color:var(--blue)}
/* Four platforms. The About page shows this panel at the full page width, so the four sit
   in one row there. Everywhere else the panel is about 500 pixels wide, so they sit two by
   two and each logo keeps its readable size. Measured on the published pages 12 Oct 2026. */
.ap-site .cloudbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ap-site .cloudbox>.cloudone:nth-child(3){grid-column:1 / -1}
html[data-page="about"] .ap-site .cloudbox{grid-template-columns:repeat(5,minmax(0,1fr))}
html[data-page="about"] .ap-site .cloudbox>.cloudone:nth-child(3){grid-column:auto}
@media (max-width:760px){html[data-page="about"] .ap-site .cloudbox{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-page="about"] .ap-site .cloudbox>.cloudone:nth-child(3){grid-column:1 / -1}}
.ap-site .cloudone{border:1px solid var(--line);border-radius:14px;padding:22px 16px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:132px}
.ap-site .cloudone b{font-size:17px;color:var(--blue);display:block;font-weight:500}
.ap-site .cloudone small{font-size:15px;font-weight:500;color:#0E8A5F}
/* a platform logo in the drawn panel, one height for all three so the row lines up */
.ap-site .cloudlogo{height:40px;width:auto;max-width:100%;object-fit:contain;display:block}
.ap-site .cloudlogo.k8s{height:52px}
.ap-site .cloudlogo.oai{height:28px}
/* Amazon Bedrock publishes a service icon and no wordmark, so the tile pairs the icon with
   the name. The icon is left square, the way AWS publishes it. */
.ap-site .cloudlock{display:flex;align-items:center;justify-content:center;gap:9px;max-width:100%}
.ap-site .cloudmark{width:34px;height:34px;flex:none;display:block}
.ap-site .cloudlock span{font-size:16px;font-weight:500;color:var(--ink);line-height:1.15;letter-spacing:-.2px;text-align:left}
.ap-site .hub{background:linear-gradient(100deg,var(--blue),#5B8BFF);border-radius:14px;padding:20px 14px;color:#fff;text-align:center;font-weight:500;font-size:17px;margin-top:16px;letter-spacing:.04em}
.ap-site .hub small{display:block;font-size:15px;font-weight:300;margin-top:8px;opacity:.92}
.ap-site .chart{display:flex;gap:7px;align-items:flex-end;height:96px;margin-top:14px}
.ap-site .chart i{flex:1;height:var(--height);background:linear-gradient(var(--blue),#9DBBFF);border-radius:5px 5px 0 0}
.ap-site .desk{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}
.ap-site .deskhead{padding:11px 14px;background:#EDF2FF;color:#5B6478;font-size:13px}
.ap-site .deskbody{height:160px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;text-align:center;font-size:16px;font-weight:500}
.ap-site .deskbody small{display:block;font-size:13px;font-weight:300;margin-top:8px;opacity:.86}
.ap-site .deskbody .ic{width:30px;height:30px;margin:0 auto 6px;stroke-width:1.5}

/* who benefits */
.ap-site .personas{background:#fff}

/* the closing block */
.ap-site .final{background:radial-gradient(120% 160% at 50% 0%,var(--navy-2) 0%,var(--navy) 65%);color:#fff;padding:110px 0;text-align:center}
.ap-site .final h2{color:#fff;margin-bottom:18px}
.ap-site .final p{color:var(--on-navy);font-size:20px;line-height:1.5;max-width:min(62ch,100%);margin:0 auto 32px}
.ap-site .final-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
.ap-site .site-footer{background:var(--ink);color:#B9BDC9;padding:72px 0 56px}
.ap-site .footer-cols{display:grid;grid-template-columns:1.1fr 2fr;gap:48px}
.ap-site .site-footer a{color:#B9BDC9;font-size:15px;display:inline-block;margin:6px 26px 7px 0}
.ap-site .site-footer a:hover{color:#fff}
.ap-site .footlogo{height:30px;width:auto;display:block;margin-bottom:18px}
.ap-site .footdesc{color:#8F94A3;font-size:15px;line-height:1.7}

/* questions and answers */
.ap-site .faq-layout{display:grid;grid-template-columns:1fr;gap:0}
.ap-site .search{width:100%;padding:16px 20px;border:1px solid var(--line);border-radius:300px;font-size:16px;font-family:inherit;color:var(--ink);margin-bottom:18px}
.ap-site .search:focus{outline:2px solid var(--blue);outline-offset:2px}
.ap-site .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.ap-site .filters button{background:#fff;border:1px solid var(--line);padding:10px 18px;border-radius:300px;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit}
.ap-site .filters button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.ap-site .qa{border-bottom:1px solid var(--line)}
.ap-site .qa summary{list-style:none;cursor:pointer;padding:22px 0;font-size:19px;font-weight:500}
.ap-site .qa summary::-webkit-details-marker{display:none}
.ap-site .qa summary:after{content:"+";float:right;color:var(--blue);font-size:22px;line-height:1}
.ap-site .qa[open] summary:after{content:"\2212"}
.ap-site .qa p{font-size:18px;color:var(--muted);line-height:1.6;padding:0 40px 22px 0;margin:0}

/* blogs */
.ap-site .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ap-site .blogcard{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.ap-site .blogcover{background:linear-gradient(130deg,var(--navy),var(--blue));height:150px;display:grid;place-items:center;color:#fff}
.ap-site .blogcover .ic{width:46px;height:46px;stroke-width:1.4}
.ap-site .blogtext{padding:26px}
.ap-site .blogtext b{font-size:20px;font-weight:500}
.ap-site .blogtext p{font-size:16px;color:var(--muted);line-height:1.55;margin:12px 0 16px}
.ap-site .blogtext a{color:var(--blue);font-size:15px;font-weight:500}

/* about */
.ap-site .wide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ap-site .portrait{width:132px;height:132px;border-radius:300px;object-fit:cover;display:block;margin:0 0 20px}

/* the floating bar, the same shape anantyx.com uses: fixed 20px from the top, a white pill
   with a 300px radius and the shadow rgba(58,57,65,.1) 0 2px 20px, away on the way down and
   back on the way up */
.ap-site .floatnav{position:fixed;top:20px;left:50%;width:min(1009px,calc(100% - 32px));z-index:60;display:flex;justify-content:center;transform:translate(-50%,-150%);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .25s ease}
.ap-site .floatnav.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.ap-site .floatpill{display:flex;align-items:center;justify-content:space-between;gap:28px;flex:0 1 auto;max-width:100%;background:#fff;border-radius:300px;box-shadow:0 2px 20px rgba(58,57,65,.16);padding:10px 10px 10px 24px}
.ap-site .floatpill .brand{gap:0}
.ap-site .floatpill .brand-logo{height:26px}
.ap-site .floatpill .nav{gap:24px}
.ap-site .floatpill .nav>a,.ap-site .floatpill .nav summary{color:var(--ink);font-size:14px}
.ap-site .floatpill .nav>a.btn.primary{color:#fff}
.ap-site .floatpill .nav>a:hover,.ap-site .floatpill .nav summary:hover{color:var(--blue)}
.ap-site .floatpill .btn{padding:13px 26px;font-size:13px}
.ap-site .floatpill .drop{top:32px}
.ap-site .floatpill .menu-mobile summary{color:var(--ink);font-size:20px;padding:8px}
.ap-site .floatpill .menu-mobile div{right:0;top:52px}
@media(prefers-reduced-motion:reduce){.ap-site .floatnav{transition:none}}

/* small screens */
@media(max-width:980px){
.ap-site .feature{grid-template-columns:1fr;gap:34px;margin-bottom:64px}
.ap-site .feature.flip .feature-copy{order:0}
.ap-site .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ap-site .footer-cols{grid-template-columns:1fr;gap:32px}
}
@media(max-width:1080px){
.ap-site .nav{display:none}
.ap-site .menu-mobile{display:block}
.ap-site .brand-sub{display:none}
}
@media(max-width:760px){
.ap-site{font-size:17px}
.ap-site .wrap{padding:0 22px}
.ap-site .floatnav{top:12px;width:calc(100% - 24px)}
.ap-site .floatpill{padding:8px 8px 8px 16px}
.ap-site .brand-logo{height:26px}
.ap-site .header-inner{min-height:70px}
.ap-site .hero{padding:64px 0 72px}
.ap-site .section{padding:72px 0}
.ap-site .section-head{margin-bottom:36px}
.ap-site .signals .wrap,.ap-site .grid3,.ap-site .grid4,.ap-site .blog-grid,.ap-site .wide-grid{grid-template-columns:1fr}
.ap-site .final{padding:72px 0}
.ap-site .lead,.ap-site .final p,.ap-site .section-head p{font-size:18px}
.ap-site .feature-copy h3{font-size:28px}
}

/* the page video, sitting where the drawn panel sits in the hero */
.ap-site .hero-stage{width:100%;display:flex;justify-content:center}
.ap-site .hero-video{width:100%;max-width:980px;height:auto;display:block;border-radius:20px;
 background:#0E1830;box-shadow:0 40px 90px rgba(0,0,0,.42)}
@media (max-width:760px){.ap-site .hero-video{border-radius:14px}}

/* a founder: the photo on the left, the name and the title beside it, so the card stops being
   mostly white space. Asked for on 12 October 2026. */
.ap-site .panel.person{display:flex;align-items:flex-start;gap:24px}
.ap-site .panel.person .portrait{margin:0;flex:none;width:128px;height:128px}
.ap-site .panel.person h3{margin:0 0 4px}
.ap-site .panel.person p{margin:0}
.ap-site .personsays{margin-top:12px!important;color:var(--muted);font-size:16px;line-height:25px}

/* the partners, six logos on one quiet row */
.ap-site .partners{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px;align-items:center}
.ap-site .partner{display:flex;align-items:center;justify-content:center;background:#fff;
 border:1px solid var(--line);border-radius:16px;padding:22px 18px;min-height:104px}
.ap-site .partner img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;display:block}
@media (max-width:980px){.ap-site .partners{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.ap-site .partners{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ap-site .panel.person{flex-direction:column;gap:16px}}

/* the parts the 33 drawn panels are built from, one panel per slot so no page repeats a picture */
.ap-site .ui-note{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-top:14px;color:#8a6b36;font-size:13px}
.ap-site .ui-steps{display:grid;gap:10px;margin-top:14px}
.ap-site .ui-step{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:14px;padding:13px 16px}
.ap-site .ui-step b{flex:none;width:24px;height:24px;border-radius:300px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center}
.ap-site .ui-step span{font-size:14px;color:var(--ink);line-height:1.4}
.ap-site .ui-bars{display:grid;gap:10px;margin-top:14px}
.ap-site .ui-barrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) auto;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.ap-site .ui-barrow i{display:block;height:10px;border-radius:300px;background:#EDF1FA;overflow:hidden}
.ap-site .ui-barrow i b{display:block;height:100%;border-radius:300px;background:linear-gradient(90deg,var(--blue),#9DBBFF)}
.ap-site .ui-barrow strong{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.ap-site .ui-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ap-site .ui-col{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ap-site .ui-colhead{background:#EDF2FF;color:var(--ink);font-size:14px;font-weight:500;padding:11px 14px}
.ap-site .ui-colrow{border-top:1px solid #EFF0F4;padding:11px 14px;font-size:14px;color:var(--muted)}
.ap-site .ui-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-site .ui-picks{display:grid;gap:8px;margin-top:14px}
.ap-site .ui-pick{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:14px;color:var(--ink)}
.ap-site .ui-pick.on{border-color:var(--blue);background:#F2F6FF}
.ap-site .ui-pick em{font-style:normal;font-size:12px;color:var(--blue);font-weight:500}
@media (max-width:980px){.ap-site .ui-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ap-site .ui-grid.three,.ap-site .ui-cols{grid-template-columns:minmax(0,1fr)}
.ap-site .ui-barrow{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
.ap-site .ui-barrow i{grid-column:1 / -1;order:3}}

/* the nine pages added on 16 October 2026: Contact Us, Book a Discovery Call, AWS Better
   Together, the five articles and the reworked Blogs list */
.ap-site .factpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}
.ap-site .factpair small{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.ap-site .factpair b{font-size:17px;font-weight:500;color:var(--ink);line-height:1.35}
.ap-site .hero .factpair small{color:var(--on-navy)}
.ap-site .hero .factpair b{color:#fff}

.ap-site .ask{max-width:760px}
.ap-site .askgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ap-site .ask label{display:flex;flex-direction:column;gap:7px}
.ap-site .ask label.wide{grid-column:1 / -1}
.ap-site .ask label span{font-size:14px;font-weight:500;color:var(--ink)}
.ap-site .ask input,.ap-site .ask select,.ap-site .ask textarea{font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.ap-site .ask textarea{resize:vertical;min-height:110px}
.ap-site .ask input:focus,.ap-site .ask select:focus,.ap-site .ask textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.ap-site .ask button{margin-top:22px}
.ap-site .asknote{color:var(--muted);font-size:13px;margin:12px 0 0}

.ap-site .post-hero .wrap{max-width:min(78ch,100%)}
.ap-site .article{max-width:min(72ch,100%);font-size:17px;line-height:1.62;color:var(--muted)}
.ap-site .article h3{font-size:22px;font-weight:500;color:var(--ink);margin:34px 0 12px;line-height:1.3}
.ap-site .article p{margin:0 0 16px}
.ap-site .article ul{margin:0 0 18px;padding-left:22px}
.ap-site .article li{margin:0 0 9px}
.ap-site .article-back{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}

.ap-site .postgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ap-site .postcard{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;text-decoration:none;color:inherit}
.ap-site .postcard:hover{border-color:var(--blue)}
.ap-site .posttop{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:12px}
.ap-site .posttopic{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.ap-site .postdate{font-size:13px;color:var(--muted)}
.ap-site .postcard h3{font-size:21px;font-weight:500;color:var(--ink);margin:0 0 10px;line-height:1.28}
.ap-site .postcard p{font-size:15px;color:var(--muted);line-height:1.5;margin:0 0 16px}
.ap-site .postmore{font-size:14px;font-weight:500;color:var(--blue)}

@media (max-width:860px){.ap-site .factpair,.ap-site .askgrid,.ap-site .postgrid{grid-template-columns:minmax(0,1fr)}}