/* ============================================================================================
   The sections of the second design — Product, How it works, AndyAI, Pricing, About.

   site.css was built against the first mockup and carries the tokens, the header, the hero, the
   buttons, the product panel, the footer and the closing band, all of which this page reuses. What
   follows is only what the longer page adds, so the two files do not fight: site.css is the system,
   this is the page.
   ============================================================================================ */

/* --- shared: a band with its heading on the left and a link on the right ------------------ */
.band--products{background:#fbfdfe}
.band__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.band__head .learn{margin-top:6px;white-space:nowrap}
.h2{margin:0;font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.16}
.band__lede{margin:14px 0 0;max-width:64ch;font-size:14.5px;color:var(--body)}
.band__lede--left{margin-left:0}
.band .eyebrow{margin-bottom:10px}

/* --- product: the six capabilities ------------------------------------------------------- */
.caps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:34px}
.caps li{display:flex;flex-direction:column;gap:9px}
.caps strong{font-size:12.5px;color:var(--navy);font-weight:700}
.caps li>span:last-child{font-size:11px;color:#6b7c92;line-height:1.55}

/* --- how it works: six steps, then the levels and the tree -------------------------------- */
.how__cta{margin-top:16px}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:34px 0 0;padding:0;list-style:none}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 6px}
.step::after{ /* the connector between one step and the next */
	content:"";position:absolute;top:17px;left:calc(50% + 26px);right:calc(-50% + 26px);height:1.5px;
	background:linear-gradient(90deg,#c7d7ea,#dbe6f2);
}
.step:last-child::after{display:none}
.step__mark{
	display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
	background:var(--blue);color:#fff;
}
.step__mark svg{width:17px;height:17px}
.step strong{font-size:12.5px;color:var(--navy);font-weight:700}
.step span:last-child{font-size:10.5px;color:#6b7c92;line-height:1.5;max-width:16ch}

.levels{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,.5fr);gap:26px;margin-top:44px;align-items:center}
.levels__list{display:flex;flex-direction:column;gap:2px}
.levels__list li{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:9px;background:#fff}
.levels__list li:nth-child(odd){background:#fff}
.levels__list strong{display:block;font-size:12px;color:var(--navy)}
.levels__list li>span:last-child{font-size:10.5px;color:#6b7c92}
.lvl__icon{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:#eaf1fb;color:var(--blue);font-size:11px}

.orgmap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:14px 16px}
.orgmap__head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.orgmap__head strong{font-size:12.5px;color:var(--navy)}
.orgmap__chip{margin-left:auto;font-size:9.5px;font-weight:700;color:#0f7a4f;background:#e6f7ef;border-radius:20px;padding:3px 9px}
.orgmap__note{margin:10px 0 12px;font-size:11px;color:#6b7c92}
.orgmap__note span{color:#9aa7b8}

/* The tree is nested lists; the connectors are the borders of the items themselves. */
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree ul{margin-left:14px;padding-left:16px;border-left:1.5px solid #dbe6f2}
.tree li{position:relative;padding:4px 0}
.tree ul>li::before{content:"";position:absolute;left:-16px;top:16px;width:14px;height:1.5px;background:#dbe6f2}
.tree__node{display:inline-block;font-size:11.5px;color:#3d4d63;background:#f7fafd;border:1px solid var(--line-soft);border-radius:7px;padding:4px 9px}
.tree__node--root{color:var(--navy);font-weight:600;background:#fff;border-color:#d9e6f7}
.tree__person{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#3d4d63}
.tree__person strong{display:block;font-size:11px;color:var(--navy)}
.tree__person small{font-size:9.5px;color:#8b97a8}
.tree__kpi{display:inline-block;font-size:10.5px;color:#42526b;background:#eef4fb;border-radius:6px;padding:3px 8px}
.avatar--sm{width:22px;height:22px;flex:0 0 22px;font-size:8.5px;display:inline-grid;place-items:center;background:#dbe7f5;color:#1b3358;font-weight:700}

/* The hand-drawn annotation in the design: an italic aside with a curved arrow. */
.annot{
	margin:0;font-size:12.5px;font-style:italic;line-height:1.5;color:var(--blue);
	border-left:2px solid #cfe0f7;padding-left:12px;
}
.annot::before{content:"↷";display:block;font-size:20px;font-style:normal;color:#9dc0ea;margin-bottom:6px}
.annot em{font-style:italic;font-weight:700;display:block}

/* --- andyai ------------------------------------------------------------------------------ */
.andyai{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.72fr);gap:30px;align-items:start}
.andyai__copy p{margin:14px 0 18px;font-size:14px;color:var(--body);max-width:42ch}
.chat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}
.chat__head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.chat__head strong{font-size:12.5px;color:var(--navy)}
.chat__body{padding:14px}
.bubble{
	margin:0 0 12px auto;max-width:78%;background:#eef4ff;color:#1f3a63;font-size:11.5px;
	border-radius:12px 12px 3px 12px;padding:9px 12px;
}
.answer{background:#f8fbfe;border:1px solid var(--line-soft);border-radius:12px;padding:12px}
.answer p{margin:0 0 8px;font-size:11.5px;color:#33445c}
.checks{display:flex;flex-direction:column;gap:7px}
.checks li{position:relative;padding-left:20px;font-size:11px;color:#3d4d63;line-height:1.5}
.checks li::before{
	content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:14px;height:14px;
	border-radius:50%;background:#e6f7ef;color:#0f7a4f;font-size:8.5px;font-weight:800;
}
.chat__actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.btn--outline{background:#fff;border-color:#cfdcf0;color:#1f3a63}
.btn--outline:hover{border-color:var(--blue);color:var(--blue)}
.assure{display:flex;flex-direction:column;gap:12px}
.assure li{display:flex;gap:9px;font-size:11.5px;color:#4c5c72;line-height:1.5}
.tick{
	display:grid;place-items:center;width:17px;height:17px;flex:0 0 17px;border-radius:50%;
	background:#e6f7ef;color:#0f7a4f;font-size:9px;font-weight:800;margin-top:1px;
}

/* --- pricing ----------------------------------------------------------------------------- */
.toggle{display:inline-flex;background:#e8eef5;border-radius:8px;padding:3px;font-size:11.5px;font-weight:600;color:#5b6b7f}
.toggle span{padding:6px 14px;border-radius:6px}
.toggle .is-active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,24,56,.1)}

.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:32px}
.plan{
	display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
	border-radius:var(--radius);padding:20px;box-shadow:0 4px 14px rgba(0,24,56,.04);
}
.plan h3{margin:0;font-size:15px;font-weight:800;color:var(--navy)}
.plan__tag{font-size:11.5px;color:#6b7c92;min-height:34px}
.plan__price{margin:2px 0 0;font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.plan__price--text{font-size:17px}
.plan__note{font-size:11px;color:#8b97a8}
.plan__list{display:flex;flex-direction:column;gap:7px;margin:10px 0 16px}
.plan__list li{position:relative;padding-left:18px;font-size:11.5px;color:#3d4d63}
.plan__list li::before{content:"✓";position:absolute;left:0;color:#12a370;font-size:10px;font-weight:800}
.plan .btn{margin-top:auto;width:100%}
.plan--featured{border-color:#bcd4f7;box-shadow:0 8px 24px rgba(0,104,248,.10)}
.plan--help{background:#f4f8ff;border-color:#dce8fb;gap:10px}
.plan--help h3{font-size:14px;line-height:1.3}

/* --- about ------------------------------------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:40px;align-items:center}
.about__copy>p{margin:14px 0 20px;font-size:14px;color:var(--body);max-width:52ch}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pillars li{display:flex;flex-direction:column;gap:9px;font-size:11.5px;color:#4c5c72;line-height:1.55}
.pillars strong{display:block;font-size:12px;color:var(--navy)}
/* The About panel carries the same photograph as the closing band — that is what the design shows, and
   it is the reason a separate "people" shot is NOT needed. The crop is taken slightly high so the peak
   stays in frame above the statement, which sits over the darker lower-left. */
.about__shot{
	position:relative;margin:0;min-height:260px;border-radius:var(--radius);overflow:hidden;
	background-image:
		linear-gradient(180deg,rgba(0,24,56,.34) 0%,rgba(0,18,42,.62) 55%,rgba(0,14,34,.86) 100%),
		url("../img/about-team.jpg");
	background-size:cover,cover;
	background-position:center,center 45%;
	background-repeat:no-repeat,no-repeat;
	display:flex;align-items:flex-end;padding:22px;
}
.about__shot figcaption{position:relative;color:#fff}
.about__shot strong{display:block;font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.about__shot span{display:block;margin-top:6px;font-size:12px;color:#cfe0f1}

/* --- the closing band's eyebrow is on a dark surface --------------------------------------- */
.cta .eyebrow{color:#38bdf8;margin-bottom:12px}

/* --- the closing band now carries the supplied photograph ----------------------------------
   site.css drew a gradient with a silhouette standing in for the missing picture; the picture has
   arrived, so the silhouette is switched off and the photograph goes under the same overlay. The crop
   is taken through the peaks (`range-band.jpg`, cut from the portrait original). */
.cta{
	background-image:linear-gradient(180deg,rgba(0,24,56,.72),rgba(0,14,34,.92)),
		url("../img/range-band.jpg");
	background-size:cover,cover;
	background-position:center,center;
	background-repeat:no-repeat,no-repeat;
}
.cta::after{display:none}

/* --- responsive -------------------------------------------------------------------------- */
@media (max-width:1180px){
	.caps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
	.steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
	.step:nth-child(3n)::after{display:none}
	.levels{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}
	.annot{grid-column:1 / -1}
	.andyai{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:26px}
	.assure{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
	.assure li{flex:1 1 240px}
	.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
	.about{grid-template-columns:minmax(0,1fr)}
	.about__shot{min-height:200px}
	.h2{font-size:25px}
}
@media (max-width:760px){
	.caps{grid-template-columns:repeat(2,minmax(0,1fr))}
	.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
	.step:nth-child(2n)::after{display:none}
	.levels{grid-template-columns:minmax(0,1fr)}
	.andyai{grid-template-columns:minmax(0,1fr)}
	.plans{grid-template-columns:minmax(0,1fr)}
	.band__head{flex-direction:column;gap:12px}
	.h2{font-size:22px}
}

/* The capability and level icons are drawn, not glyphs - a Unicode shape is not an icon set. */
.tile svg{width:20px;height:20px}
.lvl__icon svg{width:12px;height:12px}

/* --- contact ---------------------------------------------------------------------------------
   The form fields restate the login card's field styling, which lives in auth.css because the login
   page was the first to need it. It belongs in site.css with the rest of the system, and this
   duplication is the cost of not loading a login stylesheet on a marketing page. */
.band--contact{background:#fff;border-top:1px solid var(--line)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:44px;align-items:start}
.contact__copy p{margin:14px 0 18px;font-size:14px;color:var(--body);max-width:46ch}
.contact__points{display:flex;flex-direction:column;gap:10px}
.contact__points li{position:relative;padding-left:24px;font-size:13px;color:#3d4d63}
.contact__points li::before{
	content:"\2713";position:absolute;left:0;top:0;display:grid;place-items:center;width:16px;height:16px;
	border-radius:50%;background:#e6f7ef;color:#0f7a4f;font-size:9px;font-weight:800;
}
.contact__form{background:#f7fafd;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.contact__form .field{margin-bottom:14px}
.contact__form label{display:block;margin-bottom:6px;color:#33445c;font-size:12px;font-weight:600}
.contact__form input,.contact__form textarea{
	width:100%;padding:11px 12px;border:1px solid #dde5ef;border-radius:9px;background:#fff;
	color:var(--navy);font:inherit;font-size:13px;
}
.contact__form input::placeholder,.contact__form textarea::placeholder{color:#a7b3c2}
.contact__form textarea{resize:vertical;min-height:84px}
.contact__form input:focus,.contact__form textarea:focus{outline:none;border-color:#9dc0ea;box-shadow:0 0 0 3px rgba(0,104,248,.12)}
.contact__note{margin:12px 0 0;text-align:center;font-size:11.5px;color:#8b97a8}
.contact__note a{color:var(--blue);font-weight:600}
.contact__thanks{color:#1c7a45;font-weight:600}
.contact__error{color:#b42318;font-weight:600}
/* The honeypot: a field a person cannot see or reach, so only a script fills it in. */
.contact__form .field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:1024px){.contact{grid-template-columns:minmax(0,1fr)}}

/* --- the pricing ladder ----------------------------------------------------------------------
   Four rungs, so nothing falls off a cliff between the free tier and the first paid one. The annual
   figures are separate elements rather than copy the script rewrites, so the page still reads correctly
   with JavaScript switched off - it shows the monthly prices. */
.plan{position:relative}
.plan__badge{
	display:inline-block;align-self:flex-start;margin-bottom:2px;background:var(--blue);color:#fff;
	font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:20px;padding:3px 9px;
}
.plan__price small{display:block;margin-top:3px;font-size:10.5px;font-weight:600;line-height:1.35;color:#8b97a8;letter-spacing:0}
.plan__note{display:none}
.price-a{display:none}
.plans[data-period="annual"] .price-m{display:none}
.plans[data-period="annual"] .price-a{display:block}
.toggle button{background:none;border:0;font:inherit;font-size:11.5px;font-weight:600;color:#5b6b7f;cursor:pointer;padding:5px 14px;border-radius:6px}
.toggle button.is-active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,24,56,.1)}
.toggle__save{display:block;font-size:9px;font-weight:700;color:#0f7a4f}
.plan--helper{
	display:flex;align-items:center;gap:16px;margin-top:18px;padding:18px 22px;
	background:#f4f8ff;border:1px solid #dce8fb;border-radius:var(--radius);
}
.plan--helper h3{margin:0 0 4px;font-size:14px;color:var(--navy)}
.plan--helper p{margin:0;font-size:12.5px;color:var(--body);max-width:70ch}
.plan--helper .btn{margin-left:auto;flex:0 0 auto}
@media(max-width:760px){
	.plan--helper{flex-direction:column;align-items:flex-start}
	.plan--helper .btn{margin-left:0}
}

/* The pack's icons are 24x24 outlines drawn to be masked, so they are sized here rather than by
   font-size: white inside the capability discs, brand blue inside the level chips. */
.tile .as-icon{width:20px;height:20px;color:#fff}
.lvl__icon .as-icon{width:13px;height:13px;color:var(--blue)}

/* --- legal / policy pages (privacy.html) -------------------------------------------------- */
/* The base sheet sets h1..h4 { margin:0 }, so every bit of the policy's rhythm lives here. */
.policy{display:grid;grid-template-columns:230px minmax(0,1fr);gap:46px;align-items:start}
.policy__body{max-width:760px}
.policy__body h2{
	margin:38px 0 12px;font-size:19px;font-weight:750;color:var(--navy);
	padding-top:18px;border-top:1px solid var(--line);scroll-margin-top:18px;
}
.policy__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.policy__body h3{margin:24px 0 6px;font-size:14.5px;font-weight:700;color:var(--navy)}
.policy__body p,.policy__body li{font-size:14px;line-height:1.72;color:var(--body)}
.policy__body p{margin:0 0 13px}
.policy__body ul{margin:0 0 14px 20px;padding:0}
.policy__body li{margin-bottom:8px}
.policy__body a{color:var(--blue);font-weight:600}
.policy__updated{
	display:inline-block;margin:16px 0 0;padding:5px 11px;border-radius:20px;
	background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);
}

/* the contents list */
.policy__toc{position:sticky;top:22px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#f7fafd}
.policy__toc-title{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8b97a8}
.policy__toc ol{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.policy__toc li{margin-bottom:7px}
.policy__toc a{color:#42526b;text-decoration:none;font-weight:500}
.policy__toc a:hover{color:var(--blue);text-decoration:underline}

/* the cookie table, and the cookie names in it as chips rather than code */
.policy__table{width:100%;border-collapse:collapse;margin:4px 0 18px;font-size:13px}
.policy__table th,.policy__table td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.policy__table th{color:var(--navy);font-weight:700;background:#f7fafd;font-size:12px;letter-spacing:.02em}
.policy__table tr:last-child td{border-bottom:0}
.policy__table td small{color:var(--muted)}
.policy__term{
	display:inline-block;padding:1px 7px;border-radius:6px;background:#eef4fb;border:1px solid #dbe6f4;
	color:#22406b;font-size:12px;font-weight:600;white-space:nowrap;
}
@media(max-width:900px){
	.policy{grid-template-columns:minmax(0,1fr);gap:26px}
	.policy__toc{position:static}
	.policy__body{max-width:none}
}
@media(max-width:640px){
	.policy__table,.policy__table thead,.policy__table tbody,.policy__table th,.policy__table td,.policy__table tr{display:block}
	.policy__table thead{display:none}
	.policy__table td{border:0;padding:2px 0}
	.policy__table tr{border-bottom:1px solid var(--line);padding:12px 0}
}