/* Trinico Cloud, cPanel AI Website Hosting (/ai-website-hosting/). Loaded only by trinico-ai-hosting.tpl.
   Round 2, 31 October 2026 (taste-skill + impeccable). House tokens throughout: green #ABC441 primary with
   dark ink, cobalt #1B77C9 accent, ground #f4f6f9, 18px card law, pill buttons, Montserrat display and
   Open Sans body as served. New element: the connection console, dark navy in both modes.
   Motion: one authored moment (the console reply arriving), plus the flow wire. Transform and opacity
   only; everything off under prefers-reduced-motion. Signed-in dark mapping through body.tc-dark.
   Bump the ?v= in trinico-ai-hosting.tpl on any change. */

.trinico-aih{
  --aih-ink:#0F2037;--aih-text:#212529;--aih-text2:#5B6573;--aih-label:#46566A;--aih-link:#1A5FAF;--aih-accent:#1B77C9;
  --aih-surface:#fff;--aih-ground:#f4f6f9;--aih-border:#E8EEF4;--aih-line:#e7edf3;--aih-tint:#eaf3fb;--aih-tint-ink:#0f3f73;--aih-ok:#6f8a18;
  --aih-navy:#0E1824;--aih-navy-2:#152234;--aih-navy-3:#1d2d44;--aih-navy-line:#263a54;--aih-code:#D7E3F0;--aih-code-dim:#93a8bf;--aih-code-key:#9FD0FF;--aih-code-str:#CFE58A;
  --aih-shadow:0 4px 18px rgba(15,32,55,.08);--aih-shadow-up:0 14px 34px rgba(15,32,55,.12);--aih-shadow-stage:0 30px 70px rgba(15,32,55,.24);
  --aih-ease:cubic-bezier(.16,1,.3,1);
  --aih-display:Montserrat,"Open Sans",system-ui,sans-serif;
  --aih-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  container-type:inline-size;max-width:1180px;margin:0 auto;padding-bottom:48px;color:var(--aih-text);
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55}
body.tc-dark .trinico-aih{
  --aih-ink:var(--tc-text,#e9f1f8);--aih-text:var(--tc-text,#e9f1f8);--aih-text2:var(--tc-text-2,#9fb1c2);--aih-label:var(--tc-text-2,#9fb1c2);
  --aih-link:#7cc4ee;--aih-accent:#54b6e6;--aih-surface:var(--tc-surface,#141b22);--aih-ground:#0c1116;--aih-border:var(--tc-border,#222c37);--aih-line:var(--tc-border,#222c37);
  --aih-tint:rgba(84,182,230,.12);--aih-tint-ink:#bfe3f7;--aih-ok:#cfe08a;--aih-navy:#0a121b;--aih-navy-2:#101b28;
  --aih-shadow:none;--aih-shadow-up:none;--aih-shadow-stage:none}
body:not(.tc-dark):has(.trinico-aih) #main-body{background:#f4f6f9}

.trinico-aih *,.trinico-aih *::before,.trinico-aih *::after{box-sizing:border-box}
.trinico-aih ::selection{background:#cfe58a;color:#13202E}
.trinico-aih :focus-visible{outline:3px solid var(--aih-accent);outline-offset:3px}
.trinico-aih h1,.trinico-aih h2,.trinico-aih h3{font-family:var(--aih-display);color:var(--aih-ink);margin:0;text-wrap:balance}
.trinico-aih p{margin:0;text-wrap:pretty}
.trinico-aih section{scroll-margin-top:110px}

.aih-h1{font-size:clamp(36px,calc(20px + 3.2cqi),56px);font-weight:800;letter-spacing:-.032em;line-height:1.04}
.aih-h1 span{color:var(--aih-accent)}
.aih-h2{font-size:clamp(26px,calc(17px + 1.9cqi),38px);font-weight:700;letter-spacing:-.02em;line-height:1.12;max-width:24ch}
.aih-lead{font-size:clamp(18px,calc(15px + .45cqi),21px);line-height:1.5;color:var(--aih-text2);max-width:34ch}
.aih-body{font-size:16px;line-height:1.6;max-width:64ch}
.aih-small{font-size:14px;color:var(--aih-text2);max-width:72ch}

/* buttons, the house pill */
.aih-btns{display:flex;flex-wrap:wrap;gap:12px}
.aih-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 30px;border-radius:999px;
  font:600 16px/1 var(--aih-display);text-decoration:none!important;white-space:nowrap;transition:transform .25s var(--aih-ease),box-shadow .25s var(--aih-ease)}
.aih-btn:hover{transform:translateY(-3px)}
.aih-btn:active{transform:translateY(-1px)}
.aih-pri{background:linear-gradient(135deg,#b9d04d 0%,#ABC441 60%,#98ad33 100%);color:#13202E!important;box-shadow:0 6px 16px rgba(15,32,55,.12)}
.aih-sec{background:var(--aih-surface);color:var(--aih-link)!important;border:2px solid var(--aih-accent)}

/* ------------------------------------------------------------------ hero */
.aih-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:24px 0 40px}
.aih-hero-copy{display:grid;gap:22px;align-content:center}
.aih-launch{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:6px 16px 6px 8px;border-radius:999px;background:var(--aih-surface);
  border:1px solid var(--aih-line);box-shadow:var(--aih-shadow);font:600 14px/1.3 var(--aih-display);color:var(--aih-label)}
.aih-launch span{padding:6px 11px;border-radius:999px;background:#13202E;color:#CFE58A;font:700 12.5px/1 var(--aih-display);letter-spacing:.02em}
body.tc-dark .aih-launch span{background:#CFE58A;color:#13202E}
.aih-from{font-size:15px;color:var(--aih-text2)}
.aih-from strong{font:800 17px/1 var(--aih-display);color:var(--aih-ink);font-variant-numeric:tabular-nums}

.aih-stage{position:relative;min-width:0;padding:8px 0 8px 40px}

/* the real screenshot in a browser frame */
.aih-shot{margin:0;position:relative;z-index:1;border-radius:18px;overflow:hidden;background:var(--aih-surface);box-shadow:var(--aih-shadow-stage)}
.aih-shot-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef2f6;border-bottom:1px solid var(--aih-border)}
body.tc-dark .aih-shot-bar{background:var(--aih-navy-2);border-color:var(--aih-navy-line)}
.aih-shot-bar i{width:9px;height:9px;border-radius:50%;background:#cfd8e3}
.aih-shot-bar span{margin-left:10px;font:600 12px/1 var(--aih-display);color:var(--aih-text2)}
.aih-shot img{display:block;width:100%;height:auto;aspect-ratio:1450/545}

/* the connect card, overlapping the screenshot */
.aih-connect{position:relative;z-index:2;width:min(400px,78%);margin:-36px 0 0 -40px;padding:20px 20px 18px;border-radius:18px;background:var(--aih-navy);color:var(--aih-code);
  box-shadow:0 24px 50px rgba(15,32,55,.30);animation:aih-arrive .7s var(--aih-ease) .3s both}
.aih-connect-solo{margin:0;width:100%;animation:none}
.aih-connect-h{font:700 15px/1.2 var(--aih-display);color:#fff;margin-bottom:12px!important}
.aih-connect-steps{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:10px;counter-reset:aihc}
.aih-connect-steps li{counter-increment:aihc;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.45;color:#dbe6f2}
.aih-connect-steps li::before{content:counter(aihc);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ABC441;color:#13202E;font:800 13px/1 var(--aih-display)}
.aih-connect-steps strong{color:#fff}
.aih-chat{display:grid;gap:10px;padding:14px 0 0;margin-top:14px;border-top:1px solid var(--aih-navy-line)}
.aih-chat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aih-chat-label{font:700 11.5px/1 var(--aih-display);letter-spacing:.06em;text-transform:uppercase;color:var(--aih-code-dim)}
.aih-chat-pause{min-height:44px;min-width:44px;padding:0 12px;border-radius:9px;border:1px solid var(--aih-navy-line);background:var(--aih-navy-2);color:#dbe6f2;font:600 12.5px/1 var(--aih-display);cursor:pointer}
.aih-chat-pause:hover{color:#fff}
.aih-chat-pause:focus-visible{outline:3px solid #9FD0FF;outline-offset:2px}
.aih-chat-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.aih-chat.is-live .aih-chat-feed{height:280px;overflow:hidden;justify-content:flex-end}
.aih-chat.is-live .aih-msg{display:none}
.aih-chat.is-live .aih-msg.is-shown{display:block;animation:aih-arrive .45s var(--aih-ease) both}
.aih-chat:not(.is-live) .aih-msg:nth-child(n+5){display:none}
.aih-msg{flex:none}
.aih-who{display:block;font:700 11.5px/1 var(--aih-display);letter-spacing:.06em;text-transform:uppercase;color:var(--aih-code-dim);margin-bottom:6px}
.aih-ask{align-self:flex-end;max-width:86%;padding:12px 14px;border-radius:14px 14px 4px 14px;background:#e9f1fa;color:#13202E;font-size:14.5px}
.aih-ask .aih-who{color:#46566A}
.aih-reply{align-self:flex-start;max-width:92%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--aih-navy-3);border:1px solid var(--aih-navy-line);font-size:14.5px;color:#eef4fa}
.aih-typing{display:none;align-self:flex-start;gap:5px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--aih-navy-3);border:1px solid var(--aih-navy-line);width:max-content}
.aih-chat.is-typing .aih-typing{display:inline-flex}
.aih-typing span{width:7px;height:7px;border-radius:50%;background:#93a8bf;animation:aih-dot 1.1s ease-in-out infinite}
.aih-typing span:nth-child(2){animation-delay:.15s}.aih-typing span:nth-child(3){animation-delay:.3s}
@keyframes aih-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes aih-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ trust row (one strip, not cards) */
.aih-trust{list-style:none;margin:8px 0 72px;padding:22px 26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  border-radius:18px;background:var(--aih-surface);border:1px solid var(--aih-border);box-shadow:var(--aih-shadow)}
.aih-trust li{max-width:40ch;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.45;color:var(--aih-text2)}
.aih-trust svg{width:26px;height:26px;color:var(--aih-accent)}
.aih-trust strong{display:block;font:700 15px/1.3 var(--aih-display);color:var(--aih-ink);margin-bottom:2px}

/* ------------------------------------------------------------------ AI Assistant, built in */
.aih-assist{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;margin-bottom:84px}
.aih-shot-flat img{aspect-ratio:1330/990}
.aih-assist-copy{display:grid;gap:18px;align-content:center}
.aih-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aih-ticks li{position:relative;padding-left:30px;font-size:15.5px;color:var(--aih-text)}
.aih-ticks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:#f1f6e1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4a12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/12px no-repeat}
.aih-cost{font-size:14.5px;color:var(--aih-text2);padding:14px 18px;border-radius:18px;background:var(--aih-ground);max-width:80ch}

/* ------------------------------------------------------------------ request mosaic */
.aih-asks{display:grid;gap:26px;margin-bottom:80px}
.aih-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:18px}
.aih-tile{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:18px;background:var(--aih-surface);border:1px solid var(--aih-border);box-shadow:var(--aih-shadow);
  transition:transform .25s var(--aih-ease),box-shadow .25s var(--aih-ease)}
.aih-tile:hover{transform:translateY(-3px);box-shadow:var(--aih-shadow-up)}
.aih-tile-big{grid-row:span 2;justify-content:flex-end;padding:30px;
  background:linear-gradient(160deg,#ffffff 0%,#f2f8e2 100%);border-color:#dfe9c1}
body.tc-dark .aih-tile-big{background:linear-gradient(160deg,var(--aih-surface) 0%,rgba(171,196,65,.12) 100%);border-color:var(--aih-border)}
.aih-tile-tint{background:var(--aih-tint);border-color:transparent}
.aih-tile-dark{background:var(--aih-navy);border-color:var(--aih-navy)}
.aih-q{font:600 19px/1.35 var(--aih-display);color:var(--aih-ink);letter-spacing:-.01em}
.aih-tile-big .aih-q{font-size:clamp(22px,calc(16px + 1.2cqi),30px);font-weight:700;line-height:1.2}
.aih-tile-tint .aih-q{color:var(--aih-tint-ink)}
.aih-tile-dark .aih-q{color:#fff}
.aih-a{font-size:15.5px;color:var(--aih-text2);max-width:46ch}
.aih-tag{margin-top:auto!important;align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--aih-ground);border:1px solid var(--aih-line);
  font:600 12.5px/1 var(--aih-mono);color:var(--aih-label)}
.aih-tile-tint .aih-tag{background:var(--aih-surface)}
.aih-tile-dark .aih-tag{background:var(--aih-navy-3);border-color:var(--aih-navy-line);color:var(--aih-code-str)}

/* ------------------------------------------------------------------ how it connects */
.aih-how{display:grid;gap:30px;margin-bottom:80px;padding:44px;border-radius:18px;background:var(--aih-surface);border:1px solid var(--aih-border);box-shadow:var(--aih-shadow)}
.aih-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr) 88px minmax(0,1fr);align-items:center}
.aih-node{display:grid;gap:6px;padding:20px 22px;border-radius:18px;background:var(--aih-ground);border:1px solid var(--aih-border);min-width:0}
.aih-node-k{font:700 12px/1 var(--aih-display);letter-spacing:.06em;text-transform:uppercase;color:var(--aih-text2)}
.aih-node-n{font:700 17px/1.3 var(--aih-display);color:var(--aih-ink)}
.aih-node-m{font:12.5px/1.3 var(--aih-mono);color:var(--aih-code-str)}
.aih-node-hub{background:var(--aih-navy);border-color:var(--aih-navy)}
.aih-node-hub .aih-node-k{color:var(--aih-code-dim)}.aih-node-hub .aih-node-n{color:#fff}
.aih-wire{height:2px;margin:0 10px;position:relative;overflow:hidden;background:var(--aih-accent)}
.aih-wire span{position:absolute;top:-4px;left:0;width:100%;height:10px;animation:aih-flowx 2.4s var(--aih-ease) 4 forwards}
.aih-wire span::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#ABC441;box-shadow:0 0 0 3px var(--aih-surface)}
@keyframes aih-flowx{from{transform:translateX(-10px)}to{transform:translateX(100%)}}
@keyframes aih-flowy{from{transform:translateY(-10px)}to{transform:translateY(100%)}}
.aih-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;counter-reset:aihstep}
.aih-steps li{counter-increment:aihstep;position:relative;padding:8px 0 0 54px;min-height:40px;font-size:15.5px;line-height:1.5;color:var(--aih-text2)}
.aih-steps li::before{content:counter(aihstep);position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--aih-tint);color:var(--aih-tint-ink);font:800 16px/1 var(--aih-display)}
.aih-steps strong{color:var(--aih-ink)}

/* ------------------------------------------------------------------ plans */
.aih-plans{display:grid;gap:24px;margin-bottom:80px}
.aih-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.aih-plan-grid .aih-plan{padding:24px}
.aih-plan{display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:10px;padding:28px;border-radius:18px;background:var(--aih-surface);border:1px solid var(--aih-border);
  box-shadow:var(--aih-shadow);transition:transform .25s var(--aih-ease),box-shadow .25s var(--aih-ease)}
.aih-plan:hover{transform:translateY(-3px);box-shadow:var(--aih-shadow-up)}
.aih-badge{justify-self:start;padding:6px 11px;border-radius:999px;background:#f1f6e1;color:#3d4a12;font:700 12px/1 var(--aih-display)}
body.tc-dark .aih-badge{background:rgba(171,196,65,.16);color:#cfe08a}
.aih-plan-name{font-size:24px;font-weight:800;letter-spacing:-.02em}
.aih-price{font:800 46px/1 var(--aih-display);color:var(--aih-ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px!important}
.aih-price small{font:600 15px/1 "Open Sans",sans-serif;color:var(--aih-text2);letter-spacing:0;margin-left:4px}
.aih-yr{font-size:14px;color:var(--aih-text2);font-variant-numeric:tabular-nums}
.aih-plan ul{list-style:none;margin:10px 0 8px;padding:16px 0 0;border-top:1px solid var(--aih-border);display:grid;gap:10px;align-content:start}
.aih-plan li{position:relative;padding-left:28px;font-size:15px;line-height:1.45}
.aih-plan li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:#f1f6e1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4a12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/12px no-repeat}
.aih-plan .aih-btn{width:100%}

/* ------------------------------------------------------------------ closing band */
.aih-close{display:grid;justify-items:start;gap:16px;padding:48px;border-radius:18px;color:#fff;background-color:#1A5FAF;
  background-image:linear-gradient(135deg,#1A5FAF,#1B77C9)}
.aih-close h2{color:#fff;font-size:clamp(26px,calc(17px + 1.9cqi),38px);font-weight:800;letter-spacing:-.02em;line-height:1.12;max-width:20ch}
.aih-close p{color:#fff;font-size:17px;max-width:60ch}
.aih-close .aih-support{font-size:14px}

/* ------------------------------------------------------------------ tablet and phone */
@container (max-width:980px){
  .aih-hero{grid-template-columns:1fr;gap:36px;padding-top:8px}
  .aih-lead{max-width:44ch}
  .aih-stage{padding-left:0}
  .aih-connect{width:auto;margin:-48px 12px 0}
  .aih-assist{grid-template-columns:1fr;gap:32px;margin-bottom:64px}
  .aih-trust{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:56px}
  .aih-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aih-tile-big{grid-column:span 2;grid-row:auto}
  .aih-flow{grid-template-columns:1fr}
  .aih-wire{width:2px;height:40px;margin:6px auto;overflow:visible}
  .aih-wire span{top:0;left:-4px;width:10px;height:100%;animation-name:aih-flowy}
  .aih-steps{grid-template-columns:1fr}
  .aih-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aih-how{padding:30px 22px}
  .aih-close{padding:34px 24px}
}
@container (max-width:560px){
  .aih-trust,.aih-mosaic,.aih-plan-grid{grid-template-columns:1fr}
  .aih-tile-big{grid-column:auto}
  .aih-btns .aih-btn{flex:1 1 100%}
  .aih-connect{margin:16px 0 0}
}

@media (prefers-reduced-motion:reduce){
  .aih-connect,.aih-chat.is-live .aih-msg.is-shown,.aih-typing span{animation:none}
  .aih-wire span{animation:none}
  .aih-btn,.aih-tile,.aih-plan{transition:none}
  .aih-btn:hover,.aih-tile:hover,.aih-plan:hover{transform:none}
}