/* Offer pages (new services). Extends seo-pages/page.css. Prefix: op-.
   Components: price chips, problem cards, compare panels, ownership grid, price card, mock spec card. */
/* hero with a wider diagram card */
.op-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;}
.op-hero h1{font-size:48px;}
.op-visual{min-width:0;}
.op-visual .il-path{grid-template-columns:1fr;}
.op-visual .il-arrow{width:2px;height:24px;margin:0 auto;background:repeating-linear-gradient(var(--ac-primary) 0 4px,transparent 4px 10px);animation:none;}
.op-visual .il-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
.op-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.op-chip{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;padding:8px 16px;border:1px solid rgba(55,214,206,.45);border-radius:var(--r-pill);background:rgba(55,214,206,.08);color:var(--ac-body);font-size:var(--fs-sm);font-weight:600;}
.op-chip b{color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-lg);font-weight:800;}
.op-num{color:var(--ac-action);font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:800;letter-spacing:.12em;}
.seo-grid--four{grid-template-columns:repeat(4,minmax(0,1fr));}
.op-card{min-height:0;}
.op-card h3{margin-top:12px;}
.seo-section .op-quiet{color:var(--ac-muted);font-size:var(--fs-sm);line-height:1.45;margin-top:16px;}

/* catalogue blocks */
.op-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px;}
.op-offer{display:flex;flex-direction:column;padding:var(--card-pad);}
.op-offer__tag{color:var(--ac-action);font-family:var(--ac-font-body);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.op-offer h3{margin:10px 0 0;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subcard);line-height:1.2;}
.seo-section .op-offer>p{margin:8px 0 0;color:var(--ac-body);font-size:var(--fs-md);line-height:1.55;}
.op-offer .ac-list{margin-top:16px;}
.op-offer__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 18px;margin-top:auto;padding-top:22px;}
.op-offer__price{color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:800;}
.op-offer__price--quiet{color:var(--ac-muted);font-family:var(--ac-font-body);font-weight:600;}
.op-offer__foot a{color:var(--ac-action);font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:600;}
.op-hero--solo .op-visual{align-self:center;}

/* compare (two products side by side) */
.op-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px;}
.op-compare .seo-panel h3{font-size:var(--h-subcard);}
.op-compare dl{margin:20px 0 0;display:grid;gap:14px;}
.op-compare dt{color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.op-compare dd{margin:4px 0 0;color:var(--ac-ink);font-size:var(--fs-md);line-height:1.55;}
.op-compare a{display:inline-block;margin-top:20px;color:var(--ac-action);font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:600;}

/* price card */
.op-price{max-width:var(--w-read);margin:34px auto 0;padding:var(--panel-pad);text-align:center;border-color:rgba(55,214,206,.45);}
.op-price__name{color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subcard);font-weight:700;}
.seo-section .op-price__fig{margin:10px 0 0;color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.2;}   /* same price style as the step cards (.il-pc__p), Rod 24 Oct */
.seo-section .op-price__fig small{font-size:inherit;}
.seo-section .op-price__meta{margin:14px 0 0;color:var(--ac-body);font-family:var(--ac-font-mono);font-size:var(--fs-xs);font-weight:500;}
.op-ticks{list-style:none;margin:28px auto 0;padding:0;display:grid;gap:12px;max-width:520px;text-align:left;}
.op-ticks li{position:relative;padding-left:30px;color:var(--ac-ink);font-size:var(--fs-md);line-height:1.55;}
.op-ticks li::before{content:'';position:absolute;left:0;top:.25em;width:14px;height:14px;border:1px solid var(--ac-primary);border-radius:var(--r-xs);background:rgba(55,214,206,.18);}
.op-price .ac-btn{margin-top:30px;}

.op-quote{margin:0;color:var(--ac-ink);font-family:var(--ac-font-display);font-size:var(--fs-2xl);font-weight:500;font-style:italic;line-height:1.45;}

/* mock spec card (a sample of the deliverable) */
.op-mock{padding:var(--card-pad);}
.op-mock__tag{display:inline-block;color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.op-mock h3{margin:10px 0 0;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subcard);line-height:1.2;}
.op-mock dl{margin:18px 0 0;display:grid;gap:14px;}
.op-mock dt{color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.op-mock dd{margin:4px 0 0;color:var(--ac-ink);font-size:var(--fs-md);line-height:1.55;}

@media(max-width:980px){.op-hero{grid-template-columns:1fr;}.op-hero h1{font-size:52px;}}
@media(max-width:940px){.seo-grid--four{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:940px){.op-offers{grid-template-columns:1fr;}}
@media(max-width:760px){
  .op-hero h1{font-size:38px;line-height:1.08;}
  .seo-grid--four,.op-compare{grid-template-columns:1fr;}
  .op-chip{min-height:38px;}
}

/* one-column splits must not grow past the screen on phones (1fr would size to the widest table) */
@media(max-width:980px){.seo-split{grid-template-columns:minmax(0,1fr);}}
.ac-ill:has(.il-table){overflow-x:auto;}

/* Home problem blocks: copy beside a before-and-after illustration, sides alternate */
.op-problem{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;}
.op-problem--flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.op-problem--flip .op-problem__copy{order:2;}
.op-problem__copy h2{margin:10px 0 16px;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subsection);line-height:1.1;font-weight:800;letter-spacing:-.03em;text-wrap:balance;}
.op-problem__copy p{margin:0 0 18px;}
.op-problem__copy a.op-more{color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:600;}
.op-problem__copy a.op-more:hover{text-decoration:underline;}
@media(max-width:980px){.op-problem{grid-template-columns:minmax(0,1fr);gap:28px;}.op-problem--flip .op-problem__copy{order:0;}}

/* About and author pages: matched founder portraits */
.op-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.op-person{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:start;padding:var(--card-pad);}
.op-person img,.op-author__photo{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top center;border-radius:var(--r-md);display:block;}
.op-person h3{margin:0;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subcard);font-weight:700;}
.op-person .op-role{margin:4px 0 12px;color:var(--ac-primary);font-size:var(--fs-xs);font-weight:600;}
.op-person p{margin:0 0 12px;}
.op-person a{color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:600;}
.op-author{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:44px;align-items:center;}
.op-author p:not([class]){color:var(--ac-body);font-size:var(--fs-lg);line-height:1.62;}
@media(max-width:860px){.op-people{grid-template-columns:minmax(0,1fr);}.op-author{grid-template-columns:minmax(0,1fr);}.op-author__photo{max-width:280px;}}
@media(max-width:520px){.op-person{grid-template-columns:minmax(0,1fr);}.op-person img{max-width:200px;}}

/* Results page: case figures, review wall, logo row */
.op-case .op-big{display:block;margin:6px 0 12px;color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--h-section-narrow);font-weight:800;letter-spacing:-.02em;line-height:1;}

.op-case blockquote{margin:14px 0 0;color:#fff;font-size:var(--fs-sm);font-style:italic;}
.op-reviews{columns:3 300px;column-gap:20px;}
.op-review{break-inside:avoid;margin:0 0 20px;padding:var(--card-pad);}
.op-review blockquote{margin:0;}
.op-review blockquote p{margin:0 0 10px;font-size:var(--fs-md);color:rgba(255,255,255,.9);}
.op-review figcaption{margin-top:12px;color:#fff;font-size:var(--fs-md);font-weight:600;}
.op-review figcaption small{display:block;color:var(--ac-primary);font-weight:600;font-size:var(--fs-sm);}
.op-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 40px;padding:28px;}
.op-logos img{height:40px;width:auto;max-width:150px;object-fit:contain;opacity:.9;}
.op-logos img.sq{height:56px;}

/* Blog: index cards, theme lists and the post layout */
.op-post{max-width:var(--w-read);margin:0 auto;padding:0 var(--ac-gutter) 40px;}
.op-post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:20px;color:rgba(255,255,255,.9);font-size:var(--fs-sm);}
.op-post__meta a{color:var(--ac-primary);font-weight:700;}
.op-post h3{margin:32px 0 10px;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subcard);line-height:1.2;font-weight:700;letter-spacing:-.02em;}
.op-post h2{margin:44px 0 14px;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-card);line-height:1.2;font-weight:700;letter-spacing:-.02em;}
.op-post p,.op-post li{color:rgba(255,255,255,.88);font-size:var(--fs-lg);line-height:1.62;}
.op-post p{margin:0 0 16px;}
.op-post ul,.op-post ol{margin:0 0 18px;padding-left:22px;}
.op-post li{margin-bottom:8px;}
.op-post a{color:var(--ac-primary);text-decoration:underline;text-underline-offset:3px;}
.op-post__lead{font-size:var(--fs-xl)!important;line-height:1.55!important;color:#fff!important;}
.op-callout{margin:28px 0;padding:22px 24px;border:1px solid rgba(55,214,206,.45);border-radius:var(--r-md);background:rgba(55,214,206,.08);}
.op-callout b{display:block;margin-bottom:6px;color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;}
.op-callout p{margin:0;color:#fff;font-size:var(--fs-lg);}
.op-example{margin:24px 0;padding:20px 22px;border-left:3px solid var(--ac-action);background:rgba(255,255,255,.04);border-radius:0 var(--r-md) var(--r-md) 0;}
.op-example small{display:block;margin-bottom:8px;color:var(--ac-action);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.op-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;}
.op-related a{display:block;padding:18px 20px;text-decoration:none;}
.op-related a b{display:block;color:#fff;font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:600;margin-bottom:6px;}
.op-related a span{color:rgba(255,255,255,.85);font-size:var(--fs-sm);}
.op-postcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;}

.op-postcard h3{margin:0;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subcard);line-height:1.1;}
.op-postcard p{margin:0;}
.op-postcard small{color:var(--ac-primary);font-size:var(--fs-sm);font-weight:600;}
.op-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.op-list a{display:block;padding:14px 18px;color:#fff;font-size:var(--fs-md);font-weight:600;text-decoration:none;}
.op-list a small{display:block;color:var(--ac-primary);font-size:var(--fs-sm);font-weight:500;margin-top:4px;}
@media(max-width:760px){.op-related{grid-template-columns:minmax(0,1fr);}}
.seo-hero.op-posthead{grid-template-columns:minmax(0,1fr);max-width:calc(var(--w-read) + 2 * var(--ac-gutter));padding-bottom:20px;}
.op-posthead h1{font-size:clamp(32px,4.2vw,48px);line-height:1.1;text-wrap:balance;}
.op-posthead .ac-kicker a{color:inherit;}
/* Logo row: one line, auto-scrolling, edges fade (matches the home page) */
.op-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.op-marquee__run{display:flex;flex:none;align-items:center;gap:76px;padding-right:76px;animation:opMarquee 45s linear infinite;}
.op-marquee:hover .op-marquee__run{animation-play-state:paused;}
.op-marquee img{height:32px;width:auto;opacity:.78;}
.op-marquee img.sq{height:50px;}
@keyframes opMarquee{to{transform:translateX(-100%);}}
@media(max-width:760px){.op-marquee__run{gap:48px;padding-right:48px;animation-duration:34s;}.op-marquee img{height:26px;}.op-marquee img.sq{height:40px;}}
@media(prefers-reduced-motion:reduce){.op-marquee__run{animation:none;}.op-marquee__run[aria-hidden]{display:none;}.op-marquee{overflow-x:auto;}}

/* Mono label (design system: tags and card labels, 11px, 0.12em, aqua) - one definition for every card label */
.op-ind{display:block;color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}

/* How it works: four steps as a balanced 2x2 grid, with the side note as a slim full-width bar beneath */
.op-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:34px;}
.op-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:16px;padding:20px 24px;border:1px solid var(--ac-glass-border);border-radius:var(--r-xl);background:rgba(55,214,206,.06);}
.op-note b{color:#fff;font-family:var(--ac-font-display);font-size:var(--fs-lg);}
.seo-section .op-note p{margin:0;font-size:var(--fs-md);}
@media(max-width:760px){.op-steps{grid-template-columns:minmax(0,1fr);}}

/* Card links: white at rest, aqua on hover or keyboard focus (Rod 24 Oct). Whole-card links turn their title aqua. */
.op-person a,.op-offer a:not(.ac-btn),.op-compare a,.contact-card a,.op-list a,.op-related a b,.op-postcard h3{transition:color .2s}
.op-person a:hover,.op-person a:focus-visible,
.op-offer a:not(.ac-btn):hover,.op-offer a:not(.ac-btn):focus-visible,
.op-compare a:hover,.op-compare a:focus-visible,
.contact-card a:hover,.contact-card a:focus-visible,
.op-list a:hover,.op-list a:focus-visible,
.op-related a:hover b,.op-related a:focus-visible b,
a.op-postcard:hover h3,a.op-postcard:focus-visible h3,
body.is-home .ep:hover h4,body.is-home .ep:focus-visible h4,body.is-home .toolkit:hover b,body.is-home .toolkit:focus-visible b{color:var(--ac-primary)}
body.is-home .ep h4,body.is-home .toolkit b{transition:color .2s}

.op-ticks li{text-wrap:pretty;}
.op-note p a{color:var(--ac-primary);font-weight:600;}
.op-note p a:hover,.op-note p a:focus-visible{text-decoration:underline;}
