/* Public product pages (/products/{key}/), in the same visual language as the governed pilot page. */

.octa-product {
	--opr-ink:#102725;
	--opr-green:#144f48;
	--opr-green-2:#1c665d;
	--opr-mint:#b8ead5;
	--opr-lime:#d9f77e;
	--opr-cream:#f5f3ea;
	--opr-paper:#fbfaf5;
	--opr-line:#d7ddd6;
	--opr-rule:#d8d4c7;
	--opr-muted:#60706c;
	--opr-label:#347c70;
	background:var(--opr-paper);
	color:var(--opr-ink);
}

.octa-product-shell { width:min(calc(100% - 48px),1180px); margin-inline:auto; }
.octa-product :is(h1,h2,h3) { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.038em; text-wrap:balance; }
.octa-product-heading > div:first-child > p,.octa-product-kicker,.octa-product-limits-grid > div > p,.octa-product-pricing-grid > div:first-child > p { margin:0 0 18px; color:var(--opr-label); font-size:10px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }

/* Hero */
.octa-product-hero { padding-block:clamp(64px,8vw,112px); background:var(--opr-green); color:#fff; }
.octa-product-breadcrumb { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:52px; color:#b8d3cd; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.octa-product-breadcrumb a { color:inherit; text-decoration:none; }
.octa-product-breadcrumb a:hover,.octa-product-breadcrumb a:focus-visible { color:#fff; text-decoration:underline; }
.octa-product-hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(310px,.5fr); gap:clamp(55px,9vw,120px); align-items:end; }
.octa-product-eyebrow { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 18px; color:var(--opr-lime); font-size:10px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.octa-product-eyebrow > span { width:28px; height:1px; background:currentColor; }
.octa-product-status { padding:5px 10px; border:1px solid var(--opr-lime); border-radius:999px; color:var(--opr-lime); font-size:9px; letter-spacing:.14em; }
.octa-product-hero h1 { margin:0; color:#fff; font-size:clamp(56px,7vw,96px); line-height:.95; }
.octa-product-lede { max-width:720px; margin:30px 0 0; color:#c4d9d4; font-size:clamp(18px,1.8vw,22px); line-height:1.6; }
.octa-product-actions { display:flex; flex-wrap:wrap; gap:18px 29px; align-items:center; margin-top:38px; }
.octa-product-button { display:inline-flex; gap:13px; align-items:center; padding:16px 23px; background:var(--opr-lime); color:var(--opr-ink); font-size:12px; font-weight:800; text-decoration:none; }
.octa-product-button:hover,.octa-product-button:focus-visible { background:#ebffad; }
.octa-product-button-dark { background:var(--opr-green); color:#fff; }
.octa-product-button-dark:hover,.octa-product-button-dark:focus-visible { background:var(--opr-green-2); }
.octa-product-text-link { display:inline-flex; gap:11px; color:#fff; font-size:12px; font-weight:800; text-decoration:none; }
.octa-product-text-link:hover,.octa-product-text-link:focus-visible { text-decoration:underline; }
.octa-product-text-link-dark { color:var(--opr-green); }
.octa-product a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.octa-product-glance { border:1px solid rgba(255,255,255,.25); background:#103e3a; }
.octa-product-glance > p { margin:0; padding:14px 20px; background:var(--opr-lime); color:var(--opr-ink); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.octa-product-glance dl { margin:0; }
.octa-product-glance dl > div { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:20px; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.13); font-size:11px; line-height:1.45; }
.octa-product-glance dl > div:last-child { border-bottom:0; }
.octa-product-glance dt { color:#9fc0b8; }
.octa-product-glance dd { margin:0; color:#fff; font-weight:800; text-align:right; }

/* Shared section heading */
.octa-product-heading { display:grid; grid-template-columns:1fr .62fr; gap:clamp(55px,9vw,120px); align-items:end; margin-bottom:65px; }
.octa-product-heading h2 { max-width:750px; margin:0; font-size:clamp(40px,4.6vw,62px); line-height:1; }
.octa-product-heading > p { margin:0; color:var(--opr-muted); font-size:14px; line-height:1.75; }
.octa-product-heading-light > div:first-child > p { color:var(--opr-lime); }
.octa-product-heading-light h2 { color:#fff; }
.octa-product-heading-light > p { color:#bdd3ce; }

/* Audience */
.octa-product-audience { padding-block:clamp(82px,10vw,138px); border-bottom:1px solid var(--opr-line); }
.octa-product-audience .octa-product-heading { margin-bottom:0; align-items:start; }
.octa-product-audience-text p { margin:0 0 18px; color:var(--opr-muted); font-size:15px; line-height:1.8; }
.octa-product-audience-text p:last-child { margin-bottom:0; }
.octa-product-audience-text .octa-product-strong { color:var(--opr-ink); font:400 22px/1.35 Georgia,'Times New Roman',serif; }

/* Steps */
.octa-product-steps { padding-block:clamp(82px,10vw,138px); }
.octa-product-step-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:0; border-top:1px solid var(--opr-line); border-left:1px solid var(--opr-line); list-style:none; }
.octa-product-step-grid li { min-height:260px; padding:30px; border-right:1px solid var(--opr-line); border-bottom:1px solid var(--opr-line); }
.octa-product-step-grid li > span { color:var(--opr-label); font:italic 11px Georgia,serif; }
.octa-product-step-grid h3 { margin:54px 0 15px; font-size:28px; line-height:1.05; }
.octa-product-step-grid p { margin:0; color:var(--opr-muted); font-size:13px; line-height:1.72; }

/* AI and people */
.octa-product-roles { padding-block:clamp(82px,10vw,138px); background:var(--opr-green); color:#fff; }
.octa-product-role-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.22); border-left:1px solid rgba(255,255,255,.22); }
.octa-product-role-grid > section { padding:30px; border-right:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22); }
.octa-product-role-grid > section:last-child { background:var(--opr-mint); color:var(--opr-ink); }
.octa-product-role-grid h3 { margin:0 0 22px; color:inherit; font-size:29px; line-height:1.05; }
.octa-product-role-grid ul { margin:0; padding:0; list-style:none; }
.octa-product-role-grid li { position:relative; padding:14px 0 14px 25px; border-top:1px solid rgba(255,255,255,.18); color:#bdd3ce; font-size:14px; line-height:1.65; }
.octa-product-role-grid > section:last-child li { border-top-color:rgba(16,39,37,.15); color:#30504a; }
.octa-product-role-grid li::before { position:absolute; top:23px; left:0; width:7px; height:7px; border:2px solid var(--opr-lime); border-radius:50%; content:''; }
.octa-product-role-grid > section:last-child li::before { border-color:var(--opr-label); }

/* Safeguards */
.octa-product-safeguards { padding-block:clamp(82px,10vw,138px); background:var(--opr-cream); }
.octa-product-safeguard-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--opr-rule); border-left:1px solid var(--opr-rule); }
.octa-product-safeguard-grid article { padding:30px; border-right:1px solid var(--opr-rule); border-bottom:1px solid var(--opr-rule); }
.octa-product-safeguard-grid h3 { margin:0 0 14px; font-size:28px; line-height:1.05; }
.octa-product-safeguard-grid p { margin:0; color:var(--opr-muted); font-size:13px; line-height:1.72; }

/* Output */
.octa-product-output { padding-block:clamp(82px,10vw,138px); }
.octa-product-output-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.58fr); gap:clamp(60px,10vw,140px); align-items:start; }
.octa-product-output h2 { max-width:750px; margin:0; font-size:clamp(40px,4.6vw,62px); line-height:1; }
.octa-product-output-grid > div > p:last-child { max-width:720px; margin:28px 0 0; color:var(--opr-muted); font-size:15px; line-height:1.8; }
.octa-product-output aside { border-top:4px solid var(--opr-green); background:var(--opr-cream); padding:30px; }
.octa-product-output aside > strong { display:block; font:400 29px/1.05 Georgia,serif; }
.octa-product-output ul { margin:26px 0 0; padding:0; border-top:1px solid var(--opr-rule); list-style:none; }
.octa-product-output li { position:relative; padding:16px 0 16px 25px; border-bottom:1px solid var(--opr-rule); color:#526560; font-size:13px; line-height:1.65; }
.octa-product-output li::before { position:absolute; top:25px; left:0; width:7px; height:7px; border:2px solid var(--opr-label); border-radius:50%; content:''; }

/* Limits */
.octa-product-limits { padding-block:clamp(82px,10vw,138px); background:var(--opr-ink); color:#fff; }
.octa-product-limits-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,.72fr); gap:clamp(60px,10vw,140px); }
.octa-product-limits-grid > div > p { color:var(--opr-mint); }
.octa-product-limits h2 { max-width:660px; margin:0; color:#fff; font-size:clamp(40px,4.6vw,62px); line-height:1; }
.octa-product-limits ul { margin:0; padding:0; border-top:1px solid rgba(255,255,255,.2); list-style:none; }
.octa-product-limits li { position:relative; padding:20px 0 20px 27px; border-bottom:1px solid rgba(255,255,255,.2); color:#bdd1cd; font-size:14px; line-height:1.7; }
.octa-product-limits li::before { position:absolute; top:29px; left:0; width:7px; height:7px; border:2px solid var(--opr-mint); border-radius:50%; content:''; }

/* Pricing */
.octa-product-pricing { padding-block:clamp(82px,10vw,138px); background:var(--opr-cream); }
.octa-product-pricing-grid { display:grid; grid-template-columns:1fr .62fr; gap:clamp(60px,10vw,140px); align-items:end; }
.octa-product-pricing h2 { max-width:760px; margin:0; font-size:clamp(40px,4.6vw,64px); line-height:1; }
.octa-product-pricing-grid > div:last-child > p { margin:0; color:var(--opr-muted); font-size:15px; line-height:1.8; }
.octa-product-pricing .octa-product-actions { margin-top:30px; }

/* Products overview */
.octa-products-list { padding-block:clamp(82px,10vw,138px); }
.octa-products-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--opr-line); border-left:1px solid var(--opr-line); }
.octa-products-card { display:flex; flex-direction:column; align-items:flex-start; padding:30px; border-right:1px solid var(--opr-line); border-bottom:1px solid var(--opr-line); }
.octa-products-status { margin:0; padding:5px 10px; border:1px solid var(--opr-label); border-radius:999px; color:var(--opr-label); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.octa-products-card h3 { margin:34px 0 14px; font-size:34px; line-height:1.05; }
.octa-products-promise { margin:0 0 22px; color:var(--opr-muted); font-size:14px; line-height:1.7; }
.octa-products-when { align-self:stretch; margin:0 0 22px; padding:16px 18px; background:var(--opr-cream); color:var(--opr-ink); font-size:13px; line-height:1.6; }
.octa-products-when strong { display:block; margin-bottom:4px; color:var(--opr-label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.octa-products-card dl { align-self:stretch; margin:0 0 30px; border-top:1px solid var(--opr-line); }
.octa-products-card dl > div { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--opr-line); font-size:12px; line-height:1.5; }
.octa-products-card dt { color:var(--opr-muted); }
.octa-products-card dd { margin:0; font-weight:800; }
.octa-products-card .octa-product-text-link { margin-top:auto; }
.octa-products-shared-grid { grid-template-columns:repeat(4,1fr); }

@media (max-width:1000px) {
	.octa-product-hero-grid,.octa-product-heading,.octa-product-output-grid,.octa-product-limits-grid,.octa-product-pricing-grid,.octa-products-grid { grid-template-columns:1fr; }
	.octa-product-heading { gap:24px; }
	.octa-product-glance { max-width:560px; }
	.octa-product-step-grid,.octa-product-safeguard-grid,.octa-products-shared-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px) {
	.octa-product-shell { width:min(calc(100% - 32px),1180px); }
	.octa-product-hero { padding-block:54px 70px; }
	.octa-product-hero h1 { font-size:clamp(48px,14vw,64px); }
	.octa-product-step-grid,.octa-product-safeguard-grid,.octa-product-role-grid,.octa-products-shared-grid { grid-template-columns:1fr; }
	.octa-products-card dl > div { grid-template-columns:1fr; gap:3px; }
	.octa-product-step-grid li { min-height:0; }
	.octa-product-step-grid h3 { margin-top:28px; }
	.octa-product-glance dl > div { grid-template-columns:1fr; gap:3px; }
	.octa-product-glance dd { text-align:left; }
}