/* contigi.css - the new Contigi look, for the pages built from the prototype
   (home, Build your AI agent, Workshops). Light only, as live today (port decision 7).
   From the prototype styles.css (V14, 19/10/2026). The site header lives in
   contigi-header.css because every page carries it; the footer rules below are the live
   footer's, because the live footer stays (port plan). */
:root{
  --bg:#F4ECD8; --plaster:#FBF5E6; --line:#E4DAC2;
  --ink:#211C16; --muted:#6B6253;
  --blue:#0066CC; --blue-deep:#004A99; --spark:#F6873A; --spark-ink:#C7611F;
  --shadow:0 18px 50px rgba(63,48,25,.12);
  --maxw:1120px;
  --d-font:"Bricolage Grotesque",system-ui,sans-serif;
  --b-font:"Instrument Sans",system-ui,sans-serif;
  --m-font:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--b-font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--d-font);text-wrap:balance;margin:0;line-height:1.05;letter-spacing:-.02em}
.eyebrow{font-family:var(--m-font);font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--spark-ink)}
.muted{color:var(--muted)}
.btn{font-family:var(--b-font);font-weight:600;font-size:15px;border-radius:999px;
  padding:11px 20px;border:1.5px solid var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;background:none;color:var(--ink);display:inline-block}
.btn.primary{background:var(--spark);border-color:var(--spark);color:#2a1709}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}

/* hero */
.hero{padding:48px 0 30px}
.hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:800;margin:14px 0 0;max-width:18ch}
.hero p.lede{font-size:clamp(16px,2vw,21px);color:var(--muted);margin:18px 0 0;max-width:36em}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .btn{padding:14px 24px;font-size:16px}
.banner{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#efe6d0}
.banner img{width:100%;max-height:440px;object-fit:cover;object-position:center 30%}

section{padding-block:clamp(50px,7vw,92px)}
.sec-head{max-width:650px}
.sec-head h2{font-size:clamp(26px,4vw,44px);font-weight:700;margin-top:12px}
.sec-head p{color:var(--muted);margin-top:14px}
.rule{height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 22px);border:0;margin:0}

/* cards / grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.card{background:var(--plaster);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow);min-width:0}
.card .k{font-family:var(--m-font);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--spark-ink)}
.card h3{font-size:20px;font-weight:700;margin-top:10px}
.card p{color:var(--muted);font-size:15.5px;margin:8px 0 0}
.card .btn{margin-top:18px}
.card .pl{font-family:var(--d-font);font-weight:800;font-size:30px;letter-spacing:-.03em;margin-top:14px}
.card .pl small{display:block;font-family:var(--b-font);font-weight:500;font-size:14px;letter-spacing:0;color:var(--muted)}
@media(max-width:820px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

/* list with spark bullets */
ul.list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:11px;max-width:44em}
ul.list li{display:flex;gap:10px;font-size:16px}
ul.list li::before{content:"";flex:none;margin-top:.55em;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFE4B8,var(--spark) 60%,var(--spark-ink));box-shadow:0 0 8px rgba(246,135,58,.5)}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;align-items:stretch}
.tier{background:var(--plaster);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tier.feat{border:2px solid var(--spark);position:relative}
.tier .tag{font-family:var(--m-font);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tier.feat .flag{position:absolute;top:-13px;left:28px;background:var(--spark);color:#2a1709;
  font-family:var(--m-font);font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.tier h3{font-size:22px;font-weight:700;margin-top:10px}
.tier .price{font-family:var(--d-font);font-weight:800;font-size:40px;margin-top:14px;letter-spacing:-.03em}
.tier ul{list-style:none;padding:0;margin:18px 0 24px;display:flex;flex-direction:column;gap:11px}
.tier li{display:flex;gap:10px;font-size:15px}
.tier li::before{content:"";flex:none;margin-top:.5em;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFE4B8,var(--spark) 60%,var(--spark-ink));box-shadow:0 0 8px rgba(246,135,58,.5)}
.tier .btn{margin-top:auto;text-align:center}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}

/* two-offer */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.offer{border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--plaster);box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.offer.b{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.offer.b .muted,.offer.b h3{color:var(--bg)}
.offer .k{font-family:var(--m-font);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--spark-ink)}
.offer.b .k{color:var(--spark)}
.offer h3{font-size:24px;font-weight:800;margin-top:12px}
.offer .muted{margin-top:12px;font-size:16px}
.offer .btn{margin-top:22px;align-self:flex-start;white-space:normal}
@media(max-width:760px){.offers{grid-template-columns:1fr}}

/* strip / cta band */
.band{background:linear-gradient(180deg,color-mix(in srgb,var(--spark) 10%,var(--bg)),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.final{text-align:center;padding-block:clamp(56px,8vw,110px)}
.final h2{font-size:clamp(28px,5vw,54px);font-weight:800}
.final p{color:var(--muted);margin:16px auto 0;max-width:32em}
.final .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* the live footer (copied from the live pages' own rules, on these tokens) */
footer{border-top:1px solid var(--line);color:var(--ink);padding:40px 0 24px;font-size:14px;margin-top:10px;line-height:1.55}
footer p{margin:0}
.wordmark{font-family:var(--d-font);font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.wordmark .dot{color:var(--blue)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:26px}
.foot-col{min-width:0}
.foot-col strong{display:block;color:var(--ink);font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.foot-col a{display:block;color:var(--ink);text-decoration:none;margin-bottom:7px;font-size:14.5px}
.foot-col a:hover{text-decoration:underline}
.foot-col p{max-width:32ch}
.foot-col p a{display:inline;color:var(--blue)}
.foot-legal{border-top:1px solid var(--line);padding-top:18px;font-size:14px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}}
/* the roles list under Who is this for, Build your AI agent page */
.personas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.personas span{background:var(--plaster);border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:15px}
/* a framed photo inside a section, Build your AI agent page */
.shot{margin-bottom:clamp(36px,5vw,56px)}
.shot img{width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow)}