/* Marketing page sections, built on brand.css and core.css. */

/* === 6 shared sections === */

/* heading accents: the coloured half of a heading, the softer tail, the underlined word */
.h-accent { color: var(--blue); }
.h-tail { color: var(--ink-2); }
.h-underline { text-decoration: underline; text-decoration-color: var(--blue-line); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* a p or h3 that reads at h2 size; inside a stack the gap does the spacing */
.display { margin: 0 0 var(--s-3); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.25; color: var(--ink); }
.stack > .display { margin: 0; }

/* split rows: a run of image|copy rows with quotes between them */
.split-rows { display: flex; flex-direction: column; gap: var(--s-12); }
.split-rows .split-copy h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; }
@media (min-width: 900px) { .split-rows { gap: var(--s-24); } }

/* media cards: the whole card is the link, a fixed-ratio image on top */
.card-media { color: var(--ink); }
.card-media:hover .btn-link, .card-media:focus-visible .btn-link { text-decoration: underline; }
.card-media-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-xs); background: var(--bg-2); }
.card-media-img.tall { aspect-ratio: 4 / 3; }
.card-media-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: auto; }
.more-link { margin-top: var(--s-8); }

/* the highlighted card that follows a grid or steps */
.card-lead { margin-top: var(--s-6); }

/* customer story cards (casestudy include, legacy homepage) */
.story-card { display: flex; flex-direction: column; gap: var(--s-4); color: var(--ink); text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.story-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.story-logo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-s); }
.story-card .quote { margin: 0; flex: 1; padding: 0; border: 0; background: none; }
.story-card .quote blockquote { font-size: .95rem; }
.story-card .quote-who { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: center; }
.story-card .quote-who .avatar { grid-row: span 2; }
.story-card .btn-link { margin-top: auto; align-self: flex-end; }

/* icons: a tile in a centred card, raster icons in an .ic, the icon under a step */
.ic-tile { margin: 0 auto var(--s-3); }
.ic-tile img { width: 40px; height: 40px; object-fit: contain; }
.ic-img { object-fit: contain; }
.step-ic { display: block; width: 64px; height: auto; margin-top: var(--s-4); }

/* logos in a table head */
.table-logo { display: inline-block; width: 75px; height: auto; vertical-align: middle; }

/* embeds: the live widget mount (the widget script styles what it writes) */
.embed { width: 100%; min-width: 0; }
.embed.narrow { max-width: 820px; margin: 0 auto; }
.embed.framed { margin-top: var(--s-6); padding: var(--s-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.embed.framed > * { max-width: 100%; }
.prose .embed { margin: var(--s-6) 0; }

/* sample photos under an image embed, dragged onto the widget */
.embed-samples { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-8); }
.embed-samples img { display: block; width: 125px; max-width: 28vw; height: auto; border-radius: var(--r-xs); box-shadow: var(--shadow); }

/* a YouTube frame in running text */
.embed-16x9 { margin: var(--s-8) 0; }

/* Arcade walkthroughs; .tall keeps the old 3:2 frame */
.arcade { position: relative; aspect-ratio: 16 / 10; }
.arcade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; color-scheme: light; }
.arcade.tall { max-width: 900px; margin: 0 auto; aspect-ratio: 3 / 2; }

/* figures: a captioned image inside running text */
.fig { margin: var(--s-8) auto; text-align: center; }
.fig .media { width: fit-content; max-width: 100%; margin: 0 auto; }
.fig .media img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.fig figcaption { margin-top: var(--s-2); }
.fig-boxed .media { box-shadow: var(--shadow); max-width: 80%; }
.fig-s .media { max-width: 80%; }
.fig-vs .media { max-width: 75%; }
.fig-l .media { max-width: 100%; }
.fig-w-25 .media { max-width: 25%; }
.fig-w-30 .media { max-width: 30%; }
.fig-w-40 .media { max-width: 40%; }
.fig-w-45 .media { max-width: 45%; }
.fig-w-50 .media { max-width: 50%; }
.fig-w-60 .media { max-width: 60%; }
.fig-w-70 .media { max-width: 70%; }
.fig-w-75 .media { max-width: 75%; }
.fig-w-80 .media { max-width: 80%; }
.fig-w-90 .media { max-width: 90%; }
@media (max-width: 640px) {
  .fig .media, .fig-boxed .media { max-width: 100%; }
}
/* the arcade include: the padding keeps Arcade's own ratio plus its toolbar */
.fig .arcade { display: block; width: 100%; max-width: none; height: 0; padding-bottom: calc(67.5676% + 41px); }

/* a logo row, the quote, a logo row */
.logos-quote .quote { margin: 0; max-width: 760px; text-align: center; }
.logos-quote .quote-who { justify-content: center; }

/* a looping clip in the media frame */
.clip { margin: var(--s-6) 0; }

/* the poster swaps for the Vimeo player on click (assets/js/video.js) */
.overview-video img { cursor: pointer; }

.purpose h2 { margin: 0 0 var(--s-5); }
.cover { margin: 0 0 var(--s-8); }

/* certification badges */
.badge { display: block; width: 80px; height: 80px; object-fit: contain; margin: 0 auto var(--s-3); }

/* one closing sentence under a block */
.note { margin: var(--s-8) auto 0; max-width: 680px; text-align: center; color: var(--ink-2); font-size: 1.05rem; }

/* rows of links under a use case or a "Related" heading */
.link-rows { gap: var(--s-2) var(--s-5); margin-top: var(--s-1); }
.stack.link-rows { align-items: center; gap: var(--s-3); }
.stack.link-rows .btn-link { text-align: center; }

/* tables written in markdown */
.table-wrapper { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.night .table-wrapper { background: var(--n-bg-2); border-color: var(--n-line); }

/* === 7 homepage === */

/* hero */
.hp-hero-video { margin: 0 auto; max-width: 860px; }
.hp-hero-video video { display: block; width: 100%; height: auto; }
.hp-hero-quote { margin: 0 auto; padding: 0; border: 0; background: none; align-items: center; }
.hp-hero-quote blockquote { font-style: italic; }

/* tab demo: the confidence bar is the signature element */
.hp-tabcard { max-width: 900px; margin: 0 auto; padding: 0; overflow: hidden; }
.hp-tabcard .tab-panel { padding: var(--s-6); }
.hp-tabcard .tab svg { vertical-align: -2px; margin-right: var(--s-1); }
@media (min-width: 860px) { .split.hp-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.hp-input { margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg-2); }
.hp-input-image img { display: block; width: 100%; height: auto; border-radius: var(--r-xs); }
.hp-input figcaption { display: flex; flex-direction: column; margin-top: var(--s-2); font-size: .84rem; color: var(--blue-ink); }
.hp-textquote { margin: var(--s-2) 0 0; font-style: italic; color: var(--ink-2); }
.hp-csv td { font-family: var(--mono); font-size: .8rem; }
.hp-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.hp-top-name { font-size: 1.05rem; }
.hp-top-pct { font-size: 1.4rem; color: var(--blue); }
.hp-top-pct.red { color: var(--red); }
.hp-bar { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.hp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--line-2); }
.hp-bar i.blue { background: var(--blue); }
.hp-bar i.red { background: var(--red); }
.hp-bar-sm { height: 4px; flex: 1; }
.hp-bar [data-w="98"] { width: 98%; }
.hp-bar [data-w="96"] { width: 96%; }
.hp-bar [data-w="3"] { width: 3%; }
.hp-bar [data-w="1.5"] { width: 1.5%; }
.hp-bar [data-w="1"] { width: 1%; }
.hp-bar [data-w="0.2"] { width: .2%; }
.hp-bar [data-w="0.01"] { width: .01%; }
.hp-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.hp-others li { display: flex; align-items: center; gap: var(--s-3); font-size: .9rem; color: var(--muted); }
.hp-others li > span:first-child { flex: 0 0 110px; }
.hp-uses { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }

/* prompts vs predictions */
.hp-items { list-style: none; margin: 0; padding: 0; }
.hp-items li { padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--card); color: var(--ink-2); }
.hp-items li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--s-2); border-radius: 50%; background: var(--blue); vertical-align: 2px; }
.hp-req h3 { margin: 0; font-size: 1rem; }
.hp-closing { margin-top: var(--s-12); color: var(--blue-ink); font-weight: 600; }

/* how it works: the diagrams fill and stroke from the palette */
.hp-hiw svg { display: block; margin: 0 auto var(--s-3); }
.hp-f-soft { fill: var(--blue-soft); }
.hp-f-line { fill: var(--blue-line); }
.hp-f-blue { fill: var(--blue); }
.hp-f-amber { fill: var(--amber); }
.hp-s-line { stroke: var(--blue-line); }
.hp-s-blue { stroke: var(--blue); }
.hp-s-amber { stroke: var(--amber); }

/* legacy homepage */
.hp-pair { max-width: 760px; margin: 0 auto; }
.hp-rows { gap: var(--s-16); }

/* === 8 products === */

@media (max-width: 991px) { .desk-only { display: none; } }

/* feature rows on computer-vision and bounding-box */
.product-rows { gap: var(--s-12); }
.product-rows .h-underline { text-underline-offset: 5px; }

/* comparison table: the first column reads as the row label, the Nyckel column is tinted */
.compare-table th[scope=row] { text-align: left; font-weight: 600; color: var(--ink); }
.compare-table td:last-child, .compare-table thead th:last-child { background: var(--blue-soft); }
.compare-table thead th { white-space: normal; }
.compare-table th, .compare-table td { min-width: 96px; }
@media (max-width: 639px) {
  .compare-table th, .compare-table td { min-width: 0; padding: var(--s-2); font-size: .8125rem; }
  .compare-table .table-logo, .compare-table .vendor-logo { width: 56px; height: auto; max-width: none; }
}

/* function-types explorer */
.ft-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-8); box-shadow: var(--shadow); }
.ft-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-8); }
.ft-h { font-size: 1.15rem; margin: 0 0 var(--s-4); }
.ft-opts { display: flex; flex-direction: column; gap: var(--s-3); }
.ft-opt { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1); border: 1px solid var(--blue-line); border-radius: var(--r-s); background: var(--card); color: var(--ink); font: 500 1rem/1.3 var(--font); text-align: left; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); }
.ft-opt:hover { border-color: var(--blue); }
.ft-opt:focus-visible, .ft-step:focus-visible, .ft-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ft-opt[aria-pressed=true] { background: var(--blue); border-color: var(--blue); color: var(--card); }
.ft-opt.is-off { opacity: .3; cursor: not-allowed; }
.ft-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--blue-soft); }
.ft-ic img { width: 28px; height: 28px; }
.ft-light { display: none; }
.ft-opt[aria-pressed=true] .ft-ic { background: var(--blue-hover); }
.ft-opt[aria-pressed=true] .ft-dark { display: none; }
.ft-opt[aria-pressed=true] .ft-light { display: block; }
.ft-tile p { margin: 0 0 var(--s-3); }
.ft-ex { display: flex; flex-direction: column; gap: var(--s-4); max-height: 360px; overflow-y: auto; }
.ft-ex img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-xs); }
.ft-q { color: var(--ink-2); margin: 0 0 var(--s-4); }
.ft-steps, .ft-back, .ft-q { display: none; }
.ft-back { align-items: center; gap: 6px; margin-top: var(--s-4); padding: var(--s-2) 0; border: 0; background: none; color: var(--blue); font: 600 .95rem var(--font); cursor: pointer; }
.ft-back img { width: 14px; height: 14px; }
/* on a phone the three columns become three steps */
@media (max-width: 900px) {
  .ft-box { padding: var(--s-5) var(--s-4); }
  .ft-cols { grid-template-columns: minmax(0, 1fr); }
  .ft-q { display: block; }
  .ft-back { display: inline-flex; }
  .ft-steps { display: flex; justify-content: space-between; list-style: none; margin: 0 0 var(--s-5); padding: 0; border-bottom: 1px solid var(--line); }
  .ft-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-1) var(--s-2) var(--s-3); border: 0; background: none; color: var(--muted); font: 600 .9rem var(--font); cursor: pointer; }
  .ft-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue-line); }
  .ft-step[aria-current=step] { color: var(--blue); }
  .ft-step[aria-current=step] .ft-dot { background: var(--blue); }
  .ft-box[data-step="1"] .ft-col:not(#function-types-input),
  .ft-box[data-step="2"] .ft-col:not(#function-types-output),
  .ft-box[data-step="3"] .ft-col:not(#function-types-detail) { display: none; }
}

/* === 9 use cases === */

/* breadcrumb inside the hero eyebrow: inherits the eyebrow's blue */
.crumb { color: inherit; text-decoration: none; }
.crumb:hover { text-decoration: underline; }

/* use-case list (solutions hub, resources): stacked cards, one per use case */
.usecase + .usecase { margin-top: var(--s-5); }
.usecase h2 { font-size: 1.4rem; }
.usecase h2 a { color: inherit; text-decoration: none; }
.usecase h2 a:hover { color: var(--blue); }
.usecase .lede { color: var(--blue-ink); }

/* annotated console screenshot with its caption */
.figure-annot { margin: 0 auto; max-width: 880px; }
.figure-cap { margin: var(--s-4) auto 0; max-width: 680px; color: var(--ink-2); text-align: center; }
.figure-cap a { color: var(--blue); }

/* === 10 alternatives === */

.vendor-rows { gap: var(--s-12); }
@media (min-width: 900px) { .vendor-rows { gap: var(--s-16); } }
.vendor-rows .split-copy p { color: var(--ink-2); }

/* the classifier cards: the bold name that opens the text reads in full ink */
.vendor-card p b { color: var(--ink); }
.vendor-card .card-media-img { background: var(--bg-3); }

/* vendor logos are sized by height so wide and square marks sit level */
.vendor-logo { display: inline-block; height: 28px; width: auto; max-width: 110px; object-fit: contain; vertical-align: middle; }

/* === 11 industries === */

.industry-rows { display: grid; gap: var(--s-16); }
.industry-rows h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .industry-rows { gap: var(--s-24); } }

/* === 12 blog === */

/* author line: avatar, name, date */
.post-author { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0; }
.post-author b { font-weight: 600; }

/* listing card and headliner: the whole card is the link */
a.post-card { gap: var(--s-2); }
a.post-card:hover h3, a.post-hero:hover h2 { color: var(--blue); }
a.post-card:focus-visible, a.post-hero:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.post-card h3, .post-card p, .post-hero h2, .post-hero p { margin: 0; }
.post-card > p:not(.fine) { color: var(--ink-2); }
.post-card .btn-link, .post-hero .btn-link { margin-top: auto; }

/* listing images share one height so the grid lines up */
.post-card .media { margin: 0 0 var(--s-1); aspect-ratio: 16 / 9; overflow: hidden; }
.post-card .media img, .post-hero .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-hero .media { margin: 0; }

.pagination { justify-content: center; }

/* the GreenSphere promo next to its embed */
.post-promo h1 { font-size: 1.5rem; }
.post-promo h1 img { width: 50%; margin: 0 auto var(--s-3); display: block; }

/* === 13 search demos === */

/* the Night panel and the result tiles */
.sf { display: grid; grid-template-columns: 1fr; max-width: 1600px; margin: 0 auto; }
.sf-panel { position: relative; background: var(--n-bg-2); color: var(--n-ink); color-scheme: dark; padding-bottom: var(--s-12); }
.sf-inner { padding: var(--s-10) var(--gutter); text-align: center; background-image: url(/assets/images/search-demo-squiggle.svg); background-size: 60px auto; }
.sf-logo { width: 100%; max-width: 240px; }
.sf-tag { max-width: 90%; margin: var(--s-4) auto var(--s-6); }
.sf-tag p { color: var(--sky); font-size: 1rem; line-height: 1.4; margin: 0; }
.sf-box { background: var(--n-bg-3); border: 1px solid var(--n-line); border-radius: var(--r-s); padding: var(--s-5); max-width: 440px; margin: 0 auto; text-align: left; }
.sf-box label { display: block; color: var(--n-ink); margin-bottom: var(--s-2); }
.sf-field { position: relative; margin-bottom: var(--s-3); }
.sf-field input[type="text"] { width: 100%; height: 52px; box-sizing: border-box; padding: 0 var(--s-12) 0 var(--s-4); font: inherit; color: var(--n-ink); background: var(--n-bg); border: 1px solid var(--n-line-2); border-radius: var(--r-xs); }
.sf-field input[type="text"]::placeholder { color: var(--n-muted); font-style: italic; }
.sf-field input[type="text"]:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
.sf-upload { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; cursor: pointer; line-height: 0; }
.sf-upload img { width: 30px; }
.sf-preview { display: none; position: absolute; top: 60px; left: 0; z-index: 10; width: 120px; padding: var(--s-2); background: var(--n-bg-3); border: 1px solid var(--n-line-2); border-radius: var(--r-xs); }
.sf-preview img { width: 100px; position: relative; z-index: 5; }
.sf-divet { position: absolute; top: -8px; left: 20px; width: 14px; height: 14px; background: var(--n-bg-3); transform: rotate(45deg); }
.sf-box .btn { width: 100%; }
.sf .error-message { display: none; margin-top: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-xs); background: var(--n-bg); color: var(--n-ink); }
.sf-foot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: var(--s-1) var(--s-3); background: var(--n-bg-3); border-radius: var(--r-xs) var(--r-xs) 0 0; white-space: nowrap; }
.sf-foot a { color: var(--n-ink-2); }
.sf-results { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--bg-2); }
.sf-tile { position: relative; min-height: 140px; cursor: pointer; overflow: hidden; }
.sf-tile .image-tile { position: absolute; inset: 0; background-position: center; background-size: cover; }
.sf-link { position: absolute; left: 10px; top: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--n-bg-3); }
.sf-link img { width: 20px; }
.sf-name { position: absolute; left: 5%; right: 5%; bottom: 5px; display: flex; justify-content: center; background: var(--bg-3); border: 2px solid var(--card); }
.sf-name p { font-size: .75rem; line-height: 1rem; margin: 0; overflow-wrap: anywhere; }
#tile-8 { display: none; }
@media (min-width: 700px) {
  .sf-results { grid-template-columns: repeat(3, 1fr); }
  .sf-tile { min-height: 275px; }
  #tile-8 { display: block; }
}
@media (min-width: 900px) {
  .sf { grid-template-columns: 5fr 7fr; min-height: calc(100vh - 64px); }
  .sf-inner { padding-top: var(--s-16); }
}
@media (min-width: 1000px) {
  .sf-link { display: none; }
  .sf-tile:hover .sf-link, .sf-link:focus-visible { display: grid; }
}

/* === 14 demo page === */

.clickplay { display: block; width: 100%; height: auto; cursor: pointer; }

/* === 15 pricing === */

/* bounding-box pricing: two cards, centred */
.price-pair { max-width: 760px; margin: 0 auto; }
.price-pair .price-list { margin-top: var(--s-1); }