/* Srini's site: one stylesheet for every page. Two styles the visitor can switch: teal (default) and navy. */
:root{--hdr-h:4rem}
body{--head:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--r:10px;--r2:14px}
body.teal{--bg:#f6f5f2;--paper:#fff;--ink:#1d2321;--muted:#5f6763;--line:#e2e0d9;--accent:#0f5e59;--accent-soft:#d8ebe8;--gold:#b5542d;--hdr:#0f2e2c;--hdr-ink:#eef5f3;--hdr-muted:#a9c4be}
body.navy{--bg:#ffffff;--paper:#f7f8fb;--ink:#151b2b;--muted:#5a6275;--line:#e3e6ee;--accent:#13294b;--accent-soft:#dfe5f0;--gold:#c08a1e;--hdr:#13294b;--hdr-ink:#f2f4f9;--hdr-muted:#aeb8cf}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr-h) + .5rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,.quote,.brand b,.numbers b{font-family:var(--head)}
a{color:var(--accent)}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}

/* Fixed header, every page, every width */
.top{position:sticky;top:0;z-index:40;background:var(--hdr);color:var(--hdr-ink);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.top .in{max-width:82rem;margin:0 auto;height:var(--hdr-h);padding:0 1.5rem;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--hdr-ink);text-decoration:none;min-width:0}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.35);flex:none}
.brand span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand b{font-size:1.1rem;white-space:nowrap}
.brand small{font-size:.75rem;color:var(--hdr-muted);white-space:nowrap}
.nav{display:flex;gap:.2rem;margin-left:auto}
.nav a{color:var(--hdr-ink);text-decoration:none;font-size:.93rem;font-weight:600;padding:.45rem .7rem;border-radius:8px;opacity:.85}
.nav a:hover,.nav a[aria-current=page]{opacity:1;background:rgba(255,255,255,.12)}
.switch,.mswitch{display:flex;gap:.2rem;background:rgba(255,255,255,.1);border-radius:999px;padding:.2rem}
.switch button,.mswitch button{font:600 .78rem system-ui,-apple-system,sans-serif;border:0;border-radius:999px;padding:.3rem .65rem;cursor:pointer;background:transparent;color:inherit}
.switch button[aria-pressed=true]{background:#fff;color:#151b2b}
.contact{display:flex;gap:.45rem;flex:none}
.contact a{color:var(--hdr-ink);text-decoration:none;font:600 .85rem system-ui,-apple-system,sans-serif;padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.35)}
.contact a:hover{background:rgba(255,255,255,.12)}
#menu-btn{display:none}
.mmenu{display:none}

/* Page title and sections */
.ptitle{padding:2.5rem 0 1rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.ptitle h1{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;margin:0 0 .4rem}
.ptitle p{margin:0;color:var(--muted);font-size:1.08rem;max-width:44rem}
section{padding:2rem 0}
.sh{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.sh h2{font-size:1.5rem;margin:0}
.desk-only .sh h2{font-size:1.85rem;line-height:1.2}
main > section.desk-only:first-of-type{padding-top:1.4rem}
.sh p{margin:0 0 0 auto;color:var(--muted);font-size:.9rem}
h3{font-size:1.2rem;margin:0 0 .3rem}
h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .8rem}
.muted{color:var(--muted)}
.small{font-size:.88rem;color:var(--muted);margin-top:1rem}
.kicker{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.meta{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
.meta.soon{color:#a24d12}
.act{display:flex;gap:.6rem 1.2rem;flex-wrap:wrap;align-items:center;font-weight:600;font-size:.95rem;margin-top:.6rem}
.act a{text-decoration:none;border-bottom:2px solid var(--accent-soft)}
.act a.btn,.btn{display:inline-block;border:0;background:var(--accent);color:#fff;padding:.65rem 1.15rem;border-radius:var(--r);text-decoration:none}
.btn.alt{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}

/* Home */
/* Banner lined up with the menu and tiles below: photo over the menu column, text over the tiles */
.hero{background:var(--hdr);color:var(--hdr-ink);padding:1.25rem 0 1.3rem;border-top:1px solid rgba(255,255,255,.08)}
.hero .in{max-width:82rem;display:grid;grid-template-columns:17.5rem minmax(0,1fr);gap:2.5rem;align-items:center}
.hero .me{justify-self:end;width:212px;height:212px;border-radius:18px;object-fit:cover;border:1px solid rgba(255,255,255,.28);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.hero .kicker{color:#f0a37f}
body.navy .hero .kicker{color:#e3b45a}
.hero h1{font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.1;letter-spacing:-.01em;margin:.4rem 0 .7rem;color:#fff}
.hero p{margin:0;color:rgba(255,255,255,.84);font-size:1.12rem;max-width:42rem}
/* Home tiles, option D: drawn icons */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ic{position:relative;display:flex;flex-direction:column;gap:.35rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:1rem 1.25rem 1rem;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.ic:hover,.ic:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08);border-color:var(--accent)}
.ic .go{position:absolute;top:1rem;right:1.25rem;font-style:normal;font-weight:700;color:var(--muted);transition:color .15s,transform .15s}
.ic:hover .go,.ic:focus-visible .go{color:var(--accent);transform:translateX(3px)}
.ic .badge{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:.5rem;transition:background .15s,color .15s}
.ic:hover .badge,.ic:focus-visible .badge{background:var(--hdr);color:#fff}
.ic b{font-family:var(--head);font-size:1.2rem;margin-bottom:.25rem}
.ic span{color:var(--muted);font-size:.93rem}
.ic em{font-style:normal;font-weight:700;font-size:.82rem;color:var(--gold);margin-top:auto;padding-top:.5rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.tile{display:flex;flex-direction:column;gap:.25rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:1rem;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.tile b{font-size:1.1rem;font-family:var(--head)}
.tile span{color:var(--muted);font-size:.92rem}
.tile .vis{height:9.5rem;border-radius:var(--r);overflow:hidden;margin-bottom:.6rem;background:var(--accent-soft);display:grid;place-items:center}
.tile .vis img{width:100%;height:100%;object-fit:cover;object-position:top}
.tile .stat{font-family:var(--head);font-size:1.35rem;color:var(--accent);text-align:center;padding:1rem}
.tiles.small{grid-template-columns:repeat(4,1fr)}
.numbers{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.numbers div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.numbers b{display:block;font-size:1.6rem;color:var(--accent);line-height:1.1}
.numbers span{font-size:.82rem;color:var(--muted)}

/* Content blocks */
.feature{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:1.6rem;display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start}
.shot{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.quote{font-size:1.35rem;line-height:1.45;border-left:3px solid var(--gold);padding-left:1rem;margin:0 0 1rem}
.steps{margin:.8rem 0;padding-left:1.2rem;color:var(--muted)}
/* Demos page: one white card per demo, like the home tiles; AECC page: emblem picture balanced with its text */
.dlist{display:flex;flex-direction:column;gap:1rem}
.dcard{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:.9rem}
.dcard img{width:100%;aspect-ratio:1/1;border-radius:16px;box-shadow:0 6px 16px rgba(13,39,37,.22);display:block}
.dcard h3{font-size:1.25rem;margin:.2rem 0 .35rem}
.dcard p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55;max-width:38rem}
/* Built with: the tech stack under a product's text, set apart (Srini, 6 Nov 2026: "stand out, professional, apt for the page"):
   a thin accent rule on the left, the label as a small kicker, the stack in italics */
.built{margin:.7rem 0 0;padding:.15rem 0 .15rem .75rem;border-left:2px solid var(--gold);font-size:.86rem;font-style:italic;line-height:1.55;color:var(--ink);opacity:.86;max-width:44rem}
.built b{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-right:.5rem}
.dlinks{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.dlinks a{font-weight:700;font-size:.9rem;color:var(--accent);text-decoration:none}
.dlinks a span{display:inline-block;transition:transform .15s}
.dlinks a:hover span{transform:translateX(3px)}
.feature.aecc{grid-template-columns:1fr 1.15fr;align-items:center}
.mbadge{display:none}
/* Srini, 9 Nov 2026: /ITEDemo alone is a grid, three groups: 2 x 2, 2 x 2, 1 x 2. Wide screens: picture left, text right. */
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.dtile{display:grid;grid-template-columns:7.5rem 1fr;gap:1.1rem;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:.9rem;transition:box-shadow .15s,transform .15s}
.dtile:hover{box-shadow:0 10px 24px rgba(13,39,37,.14);transform:translateY(-2px)}
.dtile .pic{display:block}
.dtile img{width:100%;aspect-ratio:1/1;border-radius:14px;display:block;box-shadow:0 6px 16px rgba(13,39,37,.22)}
.dtile .body{display:flex;flex-direction:column;min-width:0}
.dtile h3{font-size:1.1rem;margin:.15rem 0 .35rem;line-height:1.25}
.dtile p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.dtile .dlinks{margin-top:.6rem}
/* Central Architecture article on the page */
.article{max-width:46rem;padding-bottom:1rem}
.article h2{font-size:1.45rem;margin:2.2rem 0 .7rem}
.article p{color:var(--ink);line-height:1.7;margin:0 0 1rem}
.archfig{margin:.5rem 0 1.5rem;background:#f4f1ea;border:1px solid var(--line);border-radius:var(--r2);padding:.6rem;box-shadow:0 6px 18px rgba(13,39,37,.08)}
.archfig img{display:block;width:100%;height:auto;border-radius:10px}
.article dl{margin:0 0 1.2rem;display:grid;gap:.55rem}
.article dl div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.75rem 1rem}
.article dt{font-family:var(--head);font-weight:700;font-size:1.05rem;color:var(--accent)}
.article dd{margin:.15rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.55}
.article dl.svc{grid-template-columns:1fr 1fr}
.shot.emblem{border:0;border-radius:16px;box-shadow:0 10px 26px rgba(13,39,37,.22)}
.entry{display:grid;grid-template-columns:15rem 1fr;gap:1.6rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.entry:first-of-type{border-top:0;padding-top:0}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.entry p{margin:.2rem 0 .4rem;color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.bk{display:grid;grid-template-columns:80px 1fr 84px;gap:1rem;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:1rem}
.bk .cover{width:80px;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.bk .appicon{width:80px;height:80px;border-radius:18px;border:1px solid var(--line)}
.bk h3{font-size:1.02rem;line-height:1.3}
.bk p{margin:.1rem 0 .5rem;color:var(--muted);font-size:.88rem;line-height:1.4}
.bk .url{font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.bk .url a{font-weight:600}
.bk .qr{width:84px;height:84px;border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
td.y{color:var(--muted);white-space:nowrap}
.lead{font-size:1.12rem;margin:0 0 1.5rem}
.timeline{border-left:2px solid var(--line);margin-left:.4rem}
.role{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:0 0 1.5rem 1.5rem;position:relative}
.role:before{content:"";position:absolute;left:-7px;top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--gold)}
.role .when{font-size:.88rem;color:var(--muted);padding-top:.15rem}
.role h3{font-size:1.1rem;margin:0}
.role .org{color:var(--accent);font-weight:600;font-size:.92rem}
.role p{margin:.3rem 0 0;color:var(--muted);font-size:.95rem}
.tf{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem}
.fn,.tc{list-style:none;padding:0;margin:0}
.fn li,.tc li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.fn li:before{content:"▸ ";color:var(--gold)}
.tc li{color:var(--muted);font-size:.93rem}
.tc b{display:block;color:var(--ink);font-size:.95rem}

/* Footer */
.foot{border-top:1px solid var(--line);margin-top:2rem;padding:1.3rem 0 5.5rem;color:var(--muted);font-size:.88rem}
.foot .wrap{max-width:82rem}
.foot p{margin:.3rem 0}
.foot a{color:var(--muted)}
/* Teal/Navy choice lives in the footer on wide screens (inside Menu on phones) */
.foot .flinks{display:none}
.foot .fline{display:flex;align-items:center;gap:.6rem 1.6rem;flex-wrap:wrap}
/* Switch on the left part of the line: the floating chat button sits at the bottom right */
.foot .fstyle{display:flex;align-items:center;gap:.6rem}
.foot .switch{background:var(--line);color:var(--ink)}
.foot .switch button[aria-pressed=true]{background:var(--hdr);color:#fff}

/* Floating: Top button and the help chat */
.to-top,.chat-toggle{position:fixed;right:1.25rem;z-index:30;font:700 .95rem system-ui,-apple-system,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);border-radius:999px;display:flex;align-items:center;gap:.45rem}
.to-top{bottom:5.2rem;min-height:2.9rem;background:#fff;color:var(--accent);border:2px solid var(--accent);padding:.55rem 1.1rem}
.to-top span{font-size:1.15rem;line-height:1}
.to-top[hidden]{display:none}
.chat-toggle{bottom:1.25rem;border:0;background:var(--accent);color:#fff;padding:.7rem 1.1rem}
.chat-toggle .short{display:none}
.chat-toggle .q{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:rgba(255,255,255,.2)}
body.chat-open .chat-toggle,body.chat-open .to-top,body.menu-open .chat-toggle,body.menu-open .to-top{display:none}
.chat{position:fixed;right:1.25rem;bottom:1.25rem;z-index:45;width:23rem;max-width:calc(100vw - 2rem);height:min(32rem,calc(100vh - 7rem));padding:0;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;font-size:.95rem}
.chat[hidden]{display:none}
.chat header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--hdr);color:#fff}
.chat header button{background:transparent;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg)}
.msg{margin:0;padding:.6rem .8rem;border-radius:12px;max-width:88%;line-height:1.45}
.msg.bot{background:var(--paper);border:1px solid var(--line);align-self:flex-start}
.msg.you{background:var(--accent);color:#fff;align-self:flex-end}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips button{font:inherit;font-size:.86rem;text-align:left;background:var(--paper);color:var(--accent);border:1px solid var(--accent-soft);border-radius:999px;padding:.35rem .75rem;cursor:pointer}
.chips button.more{color:var(--muted);border-style:dashed}
.chat-input{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line);background:var(--paper)}
.chat-input input{flex:1;min-width:0;font:inherit;font-size:16px;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:#151b2b}
.chat-input button{font:inherit;font-weight:600;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:.55rem .9rem;cursor:pointer}
.chat-note{margin:0;padding:0 .8rem .6rem;font-size:.75rem;color:var(--muted);background:var(--paper)}
.to-top:focus-visible,.chat-toggle:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Phone home list and phone menu: the nine areas as a numbered list */
.phone-home{display:none}
.plist{list-style:none;margin:0;padding:0}
.plist a{display:flex;gap:1.1rem;align-items:baseline;padding:1rem .4rem;font-size:1.15rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.plist a span{color:var(--gold);font-size:.9rem;font-variant-numeric:tabular-nums;min-width:1.6rem}
.plist a:active{background:var(--accent-soft)}

/* Wide screens: the numbered menu on the left of the content, as before; it stays in place */
.wrap.two{max-width:82rem;display:grid;grid-template-columns:17.5rem minmax(0,1fr);gap:2.5rem}
.lmenu{font-family:var(--head);font-variant-numeric:lining-nums tabular-nums;position:sticky;top:calc(var(--hdr-h) + 1rem);align-self:start;padding:2rem 0 1rem}
/* Home page: same top space as the Explore section, so the Home box lines up with the heading */
.lmenu.home{padding-top:1.4rem}
.lmenu .homeln{display:block;padding:.7rem .8rem;color:var(--ink);text-decoration:none;border-radius:8px;font-size:1.14rem}
.snav{list-style:none;margin:0;padding:0}
.snav a{display:flex;gap:.9rem;align-items:baseline;padding:.7rem .8rem;color:var(--ink);text-decoration:none;border-radius:8px;font-size:1.14rem}
.snav a span{color:var(--gold);font-size:.95rem;font-variant-numeric:tabular-nums;min-width:1.4rem}
.snav a:hover,.lmenu .homeln:hover{background:var(--accent-soft)}
.snav a[aria-current=page],.lmenu .homeln[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* Below 1280px the top bar has no room for LinkedIn and Email next to the links; they stay in the footer */
@media (max-width:80rem){.top .contact{display:none}.nav a{white-space:nowrap}}
/* App and book cards: one per row until the screen is wide enough for two (text was squeezed at 1024) */
@media (max-width:80rem){.cards{grid-template-columns:1fr}}
.bk .dlinks{margin-top:.5rem}
/* Tablets: tighter header, two-column grids */
@media (max-width:72rem){
  .brand small{display:none}
  .nav a{padding:.45rem .5rem;font-size:.9rem}
  .tiles{grid-template-columns:1fr 1fr}
  .tiles.small{grid-template-columns:1fr 1fr}
  .numbers{grid-template-columns:repeat(3,1fr)}
  .grid3{grid-template-columns:1fr 1fr}
}
/* Phones and small tablets: Menu button instead of the navigation row */
@media (max-width:56rem){
  :root{--hdr-h:3.5rem}
  body{font-size:16px}
  .wrap,.top .in{padding:0 1rem}
  .wrap.two{display:block}
  .lmenu{display:none}
  .nav,.foot .fstyle,.contact,.foot .fcontact{display:none}
  .foot{padding:1.8rem 0 7rem}
  .foot .flinks{display:block}
  .foot .fline{display:block;margin:.3rem 0}
  .hero .me{justify-self:auto}
  #menu-btn{display:block;margin-left:auto;font:700 .95rem system-ui,-apple-system,sans-serif;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.45rem 1rem;cursor:pointer}
  .mmenu:not([hidden]){display:block;position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;z-index:39;overflow-y:auto;background:var(--paper)}
  .mmenu .plist a{padding:1rem 1.4rem}
  .phone-home{display:block;padding:.6rem 0 1rem}
  .desk-only{display:none}
  .mstyle{display:flex;align-items:center;gap:.6rem;padding:1.2rem 1.4rem;font-weight:600;color:var(--muted)}
  .mswitch{background:var(--bg);color:var(--ink)}
  .mswitch button{padding:.5rem 1rem;font-size:.9rem}
  .mswitch button[aria-pressed=true]{background:#151b2b;color:#fff}
  .hero{padding:1.2rem 0 1.3rem}
  .hero .in{grid-template-columns:auto 1fr;gap:1rem;align-items:start}
  .hero .me{width:72px;height:72px;border-radius:14px;border-width:2px}
  .hero .kicker{font-size:.66rem;letter-spacing:.1em}
  .hero h1{font-size:1.6rem;margin:.25rem 0 .4rem}
  .hero p{font-size:.95rem;line-height:1.5}
  .hero .in{align-items:center}
  .ptitle{padding:1.6rem 0 .8rem}
  section{padding:1.5rem 0}
  .sh p{display:none}
  .tiles{grid-template-columns:1fr 1fr;gap:.8rem}
  .tile{padding:.75rem}
  .tile .vis{height:6.5rem}
  .tile span{font-size:.85rem}
  .feature,.tf,.cards{grid-template-columns:1fr}
  .feature{padding:1rem;gap:1rem}
  .shot{max-height:11rem;object-fit:cover;object-position:top}
  .entry{grid-template-columns:6.5rem 1fr;gap:.9rem;padding:1.1rem 0}
  .dcard{grid-template-columns:6.5rem 1fr;gap:.9rem;padding:.75rem;align-items:start}
  .dcard h3{font-size:1.05rem}
  .dcard p{font-size:.92rem}
  /* Phones: no pictures, just the icon in a small green box */
  .dcard img,.shot.emblem{display:none}
  .feature.aecc{grid-template-columns:1fr}
  .dcard{grid-template-columns:3.6rem 1fr}
  .article dl.svc{grid-template-columns:1fr}
  .article h2{font-size:1.25rem}
  .mbadge{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:14px;background:linear-gradient(155deg,#1b4a45,#0d2725);box-shadow:0 4px 10px rgba(13,39,37,.18)}
  .feature.aecc .mbadge{margin-bottom:.9rem}
  .thumb{aspect-ratio:4/3}
  .entry h3{font-size:1.05rem}
  .entry p{font-size:.92rem}
  .act{font-size:.9rem}
  .bk{grid-template-columns:64px 1fr}
  .bk .cover,.bk .appicon{width:64px}
  .bk .appicon{height:64px;border-radius:14px}
  .bk .qr{display:none}
  .numbers{grid-template-columns:1fr 1fr}
  .role{grid-template-columns:1fr;gap:.2rem}
  .chat-toggle{right:.75rem;bottom:.75rem;padding:.5rem .85rem;font-size:.88rem}
  .to-top{right:.75rem;bottom:3.9rem;min-height:2.4rem;padding:.35rem .8rem;font-size:.88rem}
  .chat{left:.5rem;right:.5rem;bottom:.5rem;width:auto;max-width:none;height:min(78vh,38rem)}
  th,td{padding:.6rem .5rem}
}
@media (max-width:30rem){
  .chat-toggle .long{display:none}
  .chat-toggle .short{display:inline}
  .tiles{grid-template-columns:1fr}
  .tile{flex-direction:row;align-items:center;gap:.8rem}
  .tile .vis{flex:0 0 5.5rem;height:4.5rem;margin:0}
  .tile .stat{font-size:.8rem;padding:.3rem}
  .tile b{display:block}
}

/* /ITEDemo grid on phones: still two across, picture on top, smaller text. */
@media (max-width:40rem){.dgrid{gap:.7rem}.dtile{grid-template-columns:1fr;gap:.5rem;padding:.6rem}.dtile h3{font-size:.95rem}.dtile p{font-size:.82rem}.dtile .meta{font-size:.6rem}.dtile .dlinks{flex-direction:column;gap:.25rem}.dtile .dlinks a{font-size:.82rem}}

/* Srini, 9 Nov 2026: /ITEDemo with logos only, 2 x 2, 2 x 2, 1 x 2; each emblem is the link. */
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,13.5rem));gap:1.3rem}
.dlogo{display:block;border-radius:18px;transition:transform .15s,box-shadow .15s}
.dlogo img{width:100%;aspect-ratio:1/1;border-radius:18px;display:block;box-shadow:0 8px 20px rgba(13,39,37,.22)}
.dlogo:hover{transform:translateY(-3px)}
.dlogo:hover img{box-shadow:0 14px 30px rgba(13,39,37,.3)}
.dlogo:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media (max-width:40rem){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}}

/* Srini, 9 Nov 2026: /ITEDemo after the UI/UX review: in-page jumps, three groups, cards with a drawn icon, a
   "what you need" tag and the whole card tappable (the title link stretches over it). */
.pk-jump{display:flex;flex-wrap:wrap;gap:.5rem}
.pk-jump a{padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:700;font-size:.9rem;text-decoration:none}
.pk-jump a:hover{border-color:var(--accent);color:var(--accent)}
.pk-group{scroll-margin-top:5rem}
.pk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.pick{position:relative;display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:1.1rem;transition:box-shadow .15s,transform .15s,border-color .15s}
.pick:hover{box-shadow:0 10px 24px rgba(13,39,37,.14);transform:translateY(-2px);border-color:var(--accent)}
.pick:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.pk-icon{display:grid;place-items:center;width:4.2rem;height:4.2rem;border-radius:16px;background:linear-gradient(155deg,#1b4a45,#0d2725);box-shadow:0 6px 14px rgba(13,39,37,.2)}
.pick h3{font-size:1.12rem;margin:.1rem 0 .3rem;line-height:1.25}
.pk-go{color:var(--ink);text-decoration:none}
.pk-go:focus{outline:none}
.pk-go::after{content:"";position:absolute;inset:0;border-radius:var(--r2)}
.pick p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.pk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:.75rem}
.pk-need{font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:.2rem .6rem;border-radius:999px;background:#e8f0ee;color:#1b4a45}
.pk-try{font-weight:700;font-size:.9rem;color:var(--accent)}
.pk-foot .sub{position:relative;z-index:1;font-size:.84rem;font-weight:700;color:var(--muted);text-decoration:none}
.pk-foot .sub:hover{color:var(--accent)}
.pk-light .pick{background:transparent;box-shadow:none}
.pk-light .pk-icon{width:3.4rem;height:3.4rem;background:#5b7470}
.pk-light .pick{grid-template-columns:3.4rem 1fr}
.pk-more{margin-top:2rem;color:var(--muted);font-size:.95rem}
.pk-more a{color:var(--accent);font-weight:700}
@media (max-width:48rem){.pk-grid{grid-template-columns:1fr}}
@media (max-width:30rem){.pick{grid-template-columns:3.2rem 1fr;gap:.8rem;padding:.9rem}.pk-icon{width:3.2rem;height:3.2rem;border-radius:13px}.pk-icon svg{width:34px;height:34px}.pick h3{font-size:1.02rem}.pick p{font-size:.88rem}}

/* /ITEDemo (Academic Demos): one slim title line with the group links, then straight into the cards. */
.ptitle.slim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;padding-bottom:1rem;margin-bottom:.5rem}
.ptitle.slim h1{margin:0;font-size:1.9rem}
.ptitle.slim .pk-jump a{padding:.35rem .85rem;font-size:.85rem}
.pk-group:first-of-type .sh{margin-top:.5rem}
@media (max-width:30rem){.ptitle.slim h1{font-size:1.5rem}.ptitle.slim .pk-jump{gap:.35rem}.ptitle.slim .pk-jump a{padding:.3rem .7rem;font-size:.8rem}}

/* Srini, 9 Nov 2026: on a phone each group of four demos fits on one screen: tight title line, one sliding row of
   group links, no divider, small group headings, compact cards with the line cut to two rows. Laptop unchanged. */
@media (max-width:40rem){
  .ptitle.slim{padding:.9rem 0 .2rem;border-bottom:0;margin-bottom:0;gap:.45rem}
  .ptitle.slim h1{font-size:1.35rem}
  .ptitle.slim .pk-jump{flex-wrap:nowrap;overflow-x:auto;gap:.35rem;width:100%;scrollbar-width:none;padding-bottom:.15rem}
  .ptitle.slim .pk-jump::-webkit-scrollbar{display:none}
  .ptitle.slim .pk-jump a{flex:none;padding:.28rem .7rem;font-size:.78rem}
  .pk-group{padding:.7rem 0}
  .pk-group .sh{margin:0 0 .5rem}
  .pk-group .sh h2{font-size:1.15rem}
  .pk-grid{gap:.5rem}
  .pick{grid-template-columns:2.6rem 1fr;gap:.7rem;padding:.65rem .8rem}
  .pk-icon{width:2.6rem;height:2.6rem;border-radius:11px}
  .pk-icon svg{width:28px;height:28px}
  .pick h3{font-size:.98rem;margin:0 0 .12rem}
  .pick p{font-size:.84rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pk-foot{margin-top:.35rem;gap:.3rem .7rem}
  .pk-need{font-size:.66rem;padding:.12rem .5rem}
  .pk-try,.pk-foot .sub{font-size:.8rem}
  .pk-light .pick{grid-template-columns:2.6rem 1fr}
  .pk-light .pk-icon{width:2.6rem;height:2.6rem}
  .pk-more{margin-top:.8rem;font-size:.85rem}
}

@media (max-width:40rem){
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .pick,.pk-light .pick{grid-template-columns:2.2rem 1fr;gap:.55rem;padding:.6rem .65rem;align-items:center}
  .pk-icon,.pk-light .pk-icon{width:2.2rem;height:2.2rem;border-radius:9px}
  .pk-icon svg{width:24px;height:24px}
  .pick h3{font-size:.86rem;line-height:1.2;margin:0}
  .pick p,.pick .pk-foot{display:none}
  .pk-group{padding:.55rem 0}
  .pk-group .sh h2{font-size:1.05rem}
}

/* Srini, 9 Nov 2026: "In phone ... grid with just images and titles below them": like app icons, three across. */
@media (max-width:40rem){
  .pk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
  .pick,.pk-light .pick{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:.75rem .35rem .7rem}
  .pk-icon,.pk-light .pk-icon{width:3.3rem;height:3.3rem;border-radius:14px}
  .pk-icon svg{width:36px;height:36px}
  .pick h3{font-size:.78rem;line-height:1.22;font-family:inherit;font-weight:700}
}
/* Four across on phones: each group of four is one row (no orphan tile), like a phone home screen; no card boxes. */
@media (max-width:40rem){
  .pk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem .3rem}
  .pick,.pk-light .pick{background:transparent;border:0;box-shadow:none;padding:.35rem .1rem;gap:.35rem}
  .pick:hover{transform:none;box-shadow:none}
  .pk-icon,.pk-light .pk-icon{width:3.4rem;height:3.4rem;border-radius:15px}
  .pk-light .pk-icon{background:#5b7470}
  .pick h3{font-size:.7rem;line-height:1.2}
}

/* Srini, 9 Nov 2026 ("i asked exactly this"): the page opens straight on "Agentic AI & Gen AI" with the 2 x 2 cards;
   the title line and group links are not shown (the h1 stays for screen readers; the tab title says Academic Demos). */
.ptitle.slim{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Srini, 9 Nov 2026: "Phone as well make 2 x 2 grid": two across, a bigger picture with the name under it. */
@media (max-width:40rem){
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .6rem}
  .pick,.pk-light .pick{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:.9rem .5rem .8rem;gap:.5rem}
  .pk-icon,.pk-light .pk-icon{width:4.2rem;height:4.2rem;border-radius:18px}
  .pk-icon svg{width:44px;height:44px}
  .pick h3{font-size:.9rem;line-height:1.25}
}

/* A demo whose emblem is a real logo (Yoga Guru) shows that logo as its small icon, filling the rounded square. */
.pk-icon.pk-logo,.mbadge:has(img){overflow:hidden;padding:0}
.pk-icon.pk-logo img,.mbadge img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* /demos and /ml-demos (Srini, 9 Nov 2026): "How it's built" folds the Built-with list on each card; it sits above the
   card-wide link so it opens instead of following it. */
.pk-foot{flex-wrap:wrap}
.pk-built{position:relative;z-index:1;flex-basis:100%;margin-top:.15rem;font-size:.85rem;color:var(--muted)}
.pk-built summary{cursor:pointer;font-weight:600;list-style:none;white-space:nowrap}
.pk-built summary::-webkit-details-marker{display:none}
.pk-built summary::after{content:" ▸"}
.pk-built[open] summary::after{content:" ▾"}
.pk-built p{margin:.4rem 0 0;font-size:.85rem;line-height:1.5}
/* A heading with a chosen line break (H1_LINES) keeps it on wide screens; phones wrap it naturally, no orphan word. */
@media (max-width:700px){.ptitle h1 br{display:none}}