/* 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:13px;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:15px;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:17px;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:10px 17px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);border-radius:300px;font-size:14px;color:#DCE4F5;font-weight:400}

/* type scale, the sizes anantyx.com uses */
.ap-site .eyebrow{font-size:16px;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 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}
/* The orange bar beside a quote. A left border is as tall as the line boxes, which stand
   above the capital letters and below the descenders, so the bar looked taller than the
   words. It is a drawn bar instead, inset from the top and the bottom of the text block.
   Each inset is worked out from the font's own shape, measured in the browser on 21 October
   2026 by drawing Geist italic at 400 pixels: its ascent is 1.005em, its descent .295em,
   a capital letter stands .7188em above the line it sits on, and a descender falls
   .1563em below it. The two blocks space their lines differently, 1.65 against 1.55, so
   each one gets its own pair. The quote block starts .46em down and stops .31em short,
   and the example block starts .41em down and stops .26em short. */
.ap-site .proof{margin-top:38px;font-size:16px;line-height:1.65;color:var(--muted);position:relative;padding:0 0 0 20px;font-style:italic}
.ap-site .proof::before{content:"";position:absolute;left:0;top:.46em;bottom:.31em;width:5px;background:var(--orange)}

/* 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:15px;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}
/* The design writes the example line as a plain box and WordPress writes it as a paragraph,
   so the rule above for a paragraph in this block, 19 pixels, won over this one on the
   WordPress site and the line showed two pixels too big there. Read from new.anantyx.com on
   21 October 2026. Naming the paragraph here settles it on both sites. */
.ap-site .example,
.ap-site .feature-copy p.example{margin-top:34px;position:relative;padding:0 0 0 18px;font-size:17px;line-height:1.55;color:var(--muted);font-style:italic}
.ap-site .example::before,
.ap-site .feature-copy p.example::before{content:"";position:absolute;left:0;top:.41em;bottom:.26em;width:5px;background:var(--orange)}
.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:18px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;min-height:118px}
/* Every provider is shown the same way: one logo, then the provider's name. The row used
   to mix a logo on its own, a logo with the name beside it, and a logo that is the name,
   so no two tiles lined up. The word Available went with it, because the title of the
   picture already says these are the platforms covered. Asked for 19 October 2026. */
/* The name keeps room for two lines in every tile, because Microsoft Azure and Amazon
   Bedrock each take two. Without it their logos sat higher than the other three. */
.ap-site .cloudone b{font-size:14px;color:var(--ink);display:block;font-weight:500;
 line-height:1.2;letter-spacing:-.2px;min-height:34px;display:flex;align-items:flex-start;
 justify-content:center;text-align:center}
/* a platform logo in the drawn panel, one height for all three so the row lines up */
/* Each logo is trimmed to its own edges, so one height makes all five the same size. */
.ap-site .cloudlogo{height:42px;width:auto;max-width:100%;object-fit:contain;display:block}
/* 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 .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-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-cols.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,.ap-site .ui-cols.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)}}