/* Product pages, and the other inner pages built from the same parts
   (Hosting, Development, Design, About, How we work). Pills, cards, the story scene and the
   contact block come from site.css, shared with the homepage; this file holds
   only what is particular to an inner page. All diagrams are illustrative
   HTML/CSS. */

/* Hero: one existing illustration at full width behind the product mark, the
   headline, one sentence and one button. */
.product-hero { --art-position: center; --art-scale: 1; position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: min(820px,calc(100svh - 88px)); }
.product-hero-art { position: absolute; inset: 0; z-index: -2; }
.product-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--art-position); transform: scale(var(--art-scale)); transform-origin: var(--art-position); }
.product-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.84) 36%,rgba(10,10,11,.58) 62%,rgba(10,10,11,.14) 90%),linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.55) 24%,transparent 56%),linear-gradient(180deg,rgba(10,10,11,.55),transparent 24%); }
.product-hero-content { display: flex; flex-direction: column; align-items: flex-start; padding-block: clamp(120px,13vw,190px) clamp(48px,5.5vw,88px); }
.product-hero .offering-brand img { width: 154px; }
.product-hero h1 { margin-top: clamp(24px,2.6vw,36px); font-size: clamp(44px,6.2vw,96px); line-height: 1; letter-spacing: -.06em; }
.product-lead { max-width: 560px; margin-block: clamp(20px,2.2vw,30px) clamp(26px,2.6vw,36px); color: var(--text); font-size: clamp(16px,1.25vw,18px); line-height: 1.55; }
/* The hero button, with the homepage's round scroll cue at the other end of its row. */
.product-hero-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.product-ai .product-hero { --art-position: 84% 34%; --art-scale: 1.18; }
.product-replayful .product-hero { --art-position: 58% 40%; }
.product-uptimeful .product-hero { --art-position: 50% 36%; }
/* The full-width picture enlarges slowly as the hero scrolls away, where the
   browser can run that from the scroll position; see the story scene in site.css. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .product-hero:not(.hero-drawn) .product-hero-art img { animation: scene-zoom linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
/* Hero with a film (voyage.js). The picture and the copy sit on a stage inside
   the section; where the film will be used the section is 260svh long and the
   stage holds under the header while the film plays behind the copy. The
   shading covers the lower left, where the copy is, on every frame. */
.hero-film { --header-height: 89px; display: block; min-height: 0; }
.hero-film::after { content: none; }
.hero-stage { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: min(820px,calc(100svh - 88px)); }
.hero-film { --film-shade: radial-gradient(82% 100% at 0% 100%,rgba(10,10,11,.95) 0%,rgba(10,10,11,.9) 50%,rgba(10,10,11,.6) 76%,transparent 100%); }
.hero-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--film-shade),linear-gradient(0deg,var(--ink) 0%,transparent 16%),linear-gradient(180deg,rgba(10,10,11,.5),transparent 20%); }
/* The sail is bright where Design's right-hand beats sit in the static layout: a deeper band there. */
.page-design .hero-film:not(.film-on) .hero-stage::after { background: linear-gradient(0deg,var(--ink) 0%,var(--ink) 18%,rgba(10,10,11,.94) 34%,rgba(10,10,11,.7) 48%,transparent 64%),var(--film-shade),linear-gradient(180deg,rgba(10,10,11,.5),transparent 20%); }
/* The product pages pin their still, not a film: the stage keeps the product hero's own shading. */
.product-page .hero-film { --film-shade: linear-gradient(90deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.84) 36%,rgba(10,10,11,.58) 62%,rgba(10,10,11,.14) 90%),linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.55) 24%,transparent 56%),linear-gradient(180deg,rgba(10,10,11,.55),transparent 24%); }
/* Static heroes lay the beats across the full width, so the lower band is shaded all the way across. */
.hero-film:not(.film-on) .hero-stage::after { background: linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.86) 24%,rgba(10,10,11,.5) 40%,transparent 56%),var(--film-shade),linear-gradient(180deg,rgba(10,10,11,.5),transparent 20%); }
/* The harbour film is dark where the copy sits, so it needs less shading. */
.page-hosting .hero-film { --film-shade: radial-gradient(80% 100% at 0% 100%,rgba(10,10,11,.9) 0%,rgba(10,10,11,.8) 52%,rgba(10,10,11,.44) 78%,transparent 100%); }
/* The sail film ends on a bright sail across the middle of the picture, and
   that frame is also the poster. On a desktop the copy keeps to the dark left
   third: the picture is placed so the sail starts 31% in at any window shape,
   and the heading is set in a column that ends before it. Past 1920px the
   picture moves right with the page's column and fades into the background
   on its left. Phones keep the usual stacked hero. */
@media (min-width: 761px) {
  .page-design .hero-film { --art-position: 31% center; --film-shift: max(0px,(100vw - 1920px) / 2); --film-copy: calc(31vw + var(--film-shift) - max(0px,(100vw - 1600px) / 2) - var(--gutter) - 16px); --film-shade: linear-gradient(90deg,rgba(10,10,11,.8) 0%,rgba(10,10,11,.6) 20%,transparent 31%); }
  .page-design .hero-film .product-hero-art { transform: translateX(var(--film-shift)); }
  .page-design .hero-film .product-hero-content { padding-top: 32px; }
  .page-design .hero-film h1 { max-width: 4.7em; font-size: min(76px,var(--film-copy) / 4.7,7.4svh); }
  .page-design .hero-film .product-lead { max-width: var(--film-copy); }
  .page-design .hero-film.film-on .voyage-beats li { max-width: var(--film-copy); }
  .page-design .hero-film.film-on h1 { font-size: min(76px,var(--film-copy) / 4.7,5.4svh); }
  .page-design .hero-slides.film-on .voyage-beats p { max-width: 4.7em; font-size: min(76px,var(--film-copy) / 4.7,5.4svh); }
  .page-design .hero-slides.film-on .voyage-beats li .beat-text { max-width: var(--film-copy); }
  .page-design .hero-film .offering-brand img { width: min(154px,var(--film-copy) - 78px); }
}
@media (min-width: 1921px) {
  .page-design .hero-film .product-hero-art { -webkit-mask: linear-gradient(90deg,transparent,#000 12%); mask: linear-gradient(90deg,transparent,#000 12%); }
}
@media (max-width: 760px) {
  .page-design .hero-film { --art-position: 42% center; }
}
.hero-film .product-hero-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--art-position); opacity: 0; transition: opacity var(--slow); }
.hero-film .video-ready video { opacity: 1; }
.hero-film.film-on { height: var(--hero-segment,300svh); }
.hero-film.film-on .hero-stage { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); min-height: 0; }
.page-development .hero-film { --hero-segment: 500svh; }
/* Hero beats: the page's capability cards again, as on the homepage opening.
   Side by side while the hero is static; while it is pinned, voyage.js shows one
   at a time (.is-active) and fills the track line (--voyage-progress). */
.product-hero .voyage-beats { flex-wrap: wrap; gap: 24px 32px; margin-top: clamp(4px,.8vw,12px); margin-bottom: clamp(26px,2.6vw,36px); }
.product-hero .voyage-beats li { flex: 1 1 calc(33.333% - 22px); min-width: 0; }
.product-hero .voyage-beats p { margin-top: 8px; }
.product-hero .voyage-beats .beat-text { font: 400 clamp(14px,1.05vw,16px)/1.5 var(--sans); letter-spacing: 0; color: var(--body); max-width: 46ch; }
.product-hero .voyage-beats .beat-list { font-size: clamp(17px,1.35vw,22px); line-height: 1.35; }
.hero-film.film-on .product-hero-content { padding-block: 24px min(clamp(48px,5.5vw,88px),4svh); }
.hero-film.film-on h1 { margin-top: min(26px,3svh); font-size: min(clamp(44px,6.2vw,96px),10.5svh); }
.hero-film.film-on .product-lead { margin-block: min(clamp(20px,2.2vw,30px),2.6svh) 0; font-size: min(clamp(16px,1.25vw,18px),2.1svh); }
.hero-film.film-on .voyage-beats { display: grid; margin-top: clamp(12px,2.4svh,28px); margin-bottom: clamp(16px,3svh,32px); }
.hero-film.film-on .voyage-beats li { grid-area: 1 / 1; align-self: end; max-width: 560px; opacity: 0; transition: opacity var(--fast) ease-out; }
.hero-film.film-on .voyage-beats li.is-active { opacity: 1; }
.hero-film.film-on .voyage-beats p { font-size: min(clamp(22px,2vw,30px),3.6svh); }
.hero-film.film-on .voyage-beats li .beat-text { font-size: min(clamp(14px,1.05vw,16px),1.9svh); }
.hero-film.film-on .voyage-beats li .beat-list { font-size: min(clamp(17px,1.35vw,22px),2.4svh); line-height: 1.25; }
.hero-film .voyage-track { display: none; }
/* Hero slides (.hero-slides): while the hero is pinned, slide one is the headline
   and the lead as they are; each later slide is one beat in their place at their
   size: the label as the eyebrow, the title in the headline's type, the sentence in
   the lead's type. voyage.js sets .on-beat while a beat's chapter is current. The
   content is a grid so the brand line and the button keep their place: the beats
   share the headline's rows, and the rows take the tallest of them. Static heroes
   (no .film-on) keep the headline with the beats side by side below it. */
.hero-slides.film-on .product-hero-content { display: grid; grid-template-columns: minmax(0,1fr); align-content: end; justify-items: start; }
.hero-slides.film-on .offering-brand { grid-area: 1 / 1; }
.hero-slides.film-on h1 { grid-area: 2 / 1; }
.hero-slides.film-on .product-lead { grid-area: 3 / 1; }
.hero-slides.film-on .voyage-beats { grid-area: 2 / 1 / 4 / 2; align-self: end; width: 100%; margin: 0; }
.hero-slides.film-on .product-hero-actions { grid-area: 4 / 1; margin-top: clamp(26px,2.6vw,36px); }
/* Hiding waits for the fade; showing is immediate. The arrive animation only fills backwards here, so the headline's opacity is its own once it has arrived. */
.hero-slides.film-on h1,.hero-slides.film-on .product-lead { animation-fill-mode: backwards; transition: opacity var(--fast) ease-out, visibility 0s; }
.hero-slides.film-on.on-beat h1,.hero-slides.film-on.on-beat .product-lead { opacity: 0; visibility: hidden; transition-delay: 0s, var(--fast); }
/* Keep the one semantic page heading available to assistive technology on every slide. */
.hero-slides.film-on.on-beat h1 { visibility: visible; pointer-events: none; }
.hero-slides.film-on .voyage-beats li { max-width: none; visibility: hidden; transition: opacity var(--fast) ease-out, visibility 0s linear var(--fast); }
.hero-slides.film-on .voyage-beats li.is-active { visibility: visible; transition-delay: 0s; }
.hero-slides.film-on .voyage-beats .eyebrow { display: block; margin-top: min(26px,3svh); }
.hero-slides.film-on .voyage-beats p { margin-top: 10px; font-weight: 500; font-size: min(clamp(44px,6.2vw,96px),10.5svh); line-height: 1; letter-spacing: -.06em; color: var(--text); }
.hero-slides.film-on .voyage-beats li .beat-text { max-width: 560px; margin-top: min(clamp(20px,2.2vw,30px),2.6svh); font-weight: 400; font-size: min(clamp(16px,1.25vw,18px),2.1svh); line-height: 1.55; letter-spacing: 0; color: var(--text); }
/* Design's list of five names would not fit at headline size: it keeps the beat size of item O. */
.hero-slides.film-on .voyage-beats li .beat-list { max-width: none; font-size: min(clamp(22px,2vw,30px),3.6svh); line-height: 1.25; letter-spacing: -.025em; }
.hero-film.film-on .voyage-track { display: block; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; height: 2px; background: var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .product-hero-content > * { animation: arrive var(--slow) var(--ease) both; }
  .product-hero-content > :nth-child(2) { animation-delay: 70ms; }
  .product-hero-content > :nth-child(3) { animation-delay: 140ms; }
  .product-hero-content > :nth-child(4) { animation-delay: 210ms; }
  .product-hero-content > :nth-child(5) { animation-delay: 280ms; }
}

/* Capability cards: the homepage card anatomy without artwork or a button.
   With no artwork to give them an edge, they keep a faint outline. */
.card-text::before { border-color: var(--card-edge); }
.card-text { --glow: transparent; justify-content: flex-start; min-height: clamp(280px,23vw,350px); background: radial-gradient(110% 80% at 0% 0%,rgba(45,212,191,.11),transparent 62%),var(--surface); }
.card-text:nth-child(2) { background: radial-gradient(110% 80% at 50% 0%,rgba(251,146,60,.11),transparent 62%),var(--surface); }
.card-text:nth-child(3) { background: radial-gradient(110% 80% at 100% 0%,rgba(45,212,191,.11),transparent 62%),var(--surface); }
.card-text::after { content: none; }
.cards-3 .card-text .card-body { min-height: 0; }
.card-text .card-body > p { margin-bottom: 0; }
/* Consulting engagements use the existing card paragraph-to-action rhythm. */
.page-ai-service #capabilities .card-text .card-body > p + .pill { margin-top: 22px; }
.card-index { padding: clamp(22px,2.1vw,32px) clamp(22px,2.1vw,32px) clamp(28px,4.4vw,72px); color: var(--frost); font: 500 13px/1 var(--display); }
.card-text .card-body { padding-top: 0; }
.card-label { color: var(--brand-mint); font: 500 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .16em; }

/* The product's existing diagram, as one wide card under its capabilities. */
.figure-card { position: relative; isolation: isolate; overflow: clip; margin-top: clamp(14px,1.5vw,24px); padding: clamp(28px,4.4vw,72px) clamp(22px,4.4vw,72px); border-radius: var(--radius-card); background: radial-gradient(ellipse at 22% 30%,#2dd4bf14,transparent 62%),radial-gradient(ellipse at 88% 92%,#fb923c14,transparent 60%),var(--surface); }
.figure-card::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--card-edge); border-radius: inherit; pointer-events: none; }
.figure-card .capability-visual { max-width: 900px; margin: 0 auto; padding: 0; border: 0; background: none; }
.figure-card .capability-visual figcaption,.figure-note { color: var(--body); font-size: 12px; line-height: 1.5; margin-top: clamp(24px,3vw,40px); border-top: 1px solid var(--line); padding-top: 14px; }
.figure-card .diagram-label,.figure-card .journey-steps { font-size: 12px; }
.figure-card .monitoring-flow > div { font-size: 13px; }
.figure-card .diagram-bars { height: 140px; gap: 14px; }
.figure-card .diagram-bars i { width: 22px; }
.figure-card .journey-line { margin-block: 65px 26px; }
.figure-card .monitoring-flow { min-height: 150px; align-items: center; }
.figure-card .ai-toolkit { padding: 0; border: 0; background: none; }
.figure-card .ai-toolkit dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 clamp(20px,3vw,48px); }
.figure-card .ai-toolkit dl > div,.figure-card .ai-toolkit dl > div:last-child { padding-block: 18px 0; }
.figure-card .ai-toolkit dt span,.figure-card .ai-toolkit dd { color: var(--body); }
.figure-card .ai-toolkit dd { font-size: 13px; }

/* Key statement: the homepage story scene with a shorter statement, so it is
   set larger and is not held once it has risen over the picture. */
.story-brief .story-text { max-width: 1280px; font-size: clamp(26px,4.3vw,68px); line-height: 1.1; letter-spacing: -.045em; }
.story-brief.scene-scroll .story-after::after { content: none; }
.story-brief.scene-scroll .story-after-pin { position: static; }
/* The chart film brightens behind How we work's wide second heading line. */
.page-how .story-film .story-stage::after { background: linear-gradient(180deg,rgba(10,10,11,.85) 0%,rgba(10,10,11,.8) 48%,rgba(10,10,11,.3) 75%,transparent 100%),linear-gradient(0deg,var(--ink) 0%,transparent 14%); }
.story-label { width: fit-content; margin-bottom: 22px; padding: 6px 12px; border: 1px solid #7a4a25; border-radius: 999px; color: var(--ember); font: 500 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .16em; }

/* Related cards: the homepage cards, two abreast on desktop and so laid out
   tall. Up to 1000px they keep the homepage's own layouts. */
.cards-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (min-width: 1001px) {
  .cards-2 .card-wide { --art-position: var(--tall-position,center); --art-scale: 1; --art-inset: var(--tall-inset,0); --scrim: var(--scrim-tall); align-items: stretch; min-height: min(clamp(480px,42vw,620px),66svh); }
  .cards-2 .card-wide .card-body { width: auto; min-height: min(clamp(300px,24vw,350px),40svh); }
  .cards-2 .card-wide .card-heading { font-size: min(clamp(30px,3.4vw,52px),5.6svh); }
  /* Two up, drawn artwork: as the three-up cards, the drawing takes the room above the copy. */
  .cards-2 .card-drawn .card-art { position: relative; inset: auto; flex: 1 1 0; min-height: 0; margin: 5% 3% 0; }
}

/* Inner pages that are not products. */
/* Hero with a transparent drawing: held whole on the right over a glow, as on
   the service cards, instead of a full-width picture. */
.product-hero.hero-drawn { background: radial-gradient(46% 62% at 73% 46%,rgba(251,146,60,.2),transparent 72%),var(--surface); }
.product-hero.hero-frost { background: radial-gradient(46% 62% at 73% 46%,rgba(45,212,191,.17),transparent 72%),var(--surface); }
.hero-drawn .product-hero-art { inset: 4% 1% 12% 52%; }
.hero-drawn .product-hero-art img { object-fit: contain; object-position: right center; transform: none; }
.product-hero .eyebrow { font-size: 12px; }
.page-about .product-hero { --art-position: 34% 64%; }
/* About's joined scene sits its heading over the bright top of the cloud picture, so its shade is a step deeper than the homepage's (the gradient line measured 2.99 to 1 against 3 needed at 1440): the corner shade above 600px, the top-down one of the phone layout below. */
@media (min-width: 601px) { .page-about .story-film .story-stage::after { background: radial-gradient(74% 68% at 0% 0%,rgba(10,10,11,.88) 0%,rgba(10,10,11,.76) 52%,rgba(10,10,11,.36) 78%,transparent 100%),linear-gradient(0deg,var(--ink) 0%,transparent 14%); } }
@media (max-width: 600px) { .page-about .story-film .story-stage::after { background: linear-gradient(180deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.74) 26%,rgba(10,10,11,.2) 48%,transparent 60%),linear-gradient(0deg,var(--ink) 0%,transparent 14%); } }
/* A short list set as pills inside a figure card. */
.pill-list { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.pill-list li { padding: 10px 20px; border: 1px solid #45635e; border-radius: 999px; font: 500 clamp(17px,1.7vw,26px)/1.2 var(--display); letter-spacing: -.03em; }
/* Related cards with a text label: About shares the opening picture's card
   settings and How we work the drawn cards', both in site.css. */
.card-about { --tall-position: 34% 46%; }

/* Contact: the homepage block, plus the way back to all products. */
.product-page .contact h2 { font-size: clamp(38px,6vw,96px); }
.sibling-products { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(20px,3vw,48px); width: 100%; margin-top: clamp(56px,6vw,96px); padding-top: 20px; border-top: 1px solid var(--line); }
.sibling-products a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--body); font-size: 13px; transition: color var(--fast); }
.sibling-products a:hover { color: var(--text); }
.sibling-products a span { color: var(--frost); }

@media (max-width: 1000px) {
  .product-hero .voyage-beats li { flex-basis: calc(50% - 16px); }
  .cards-2 { grid-template-columns: 1fr; }
  .cards-3 .card-text,.cards-2 .card-text { justify-content: flex-start; align-items: stretch; min-height: 0; }
  .card-index { padding-bottom: 28px; }
  .cards-3 .card-text .card-body { width: auto; }
  .card-text,.card-text:nth-child(2),.card-text:nth-child(3) { background: radial-gradient(90% 120% at 0% 0%,rgba(45,212,191,.1),transparent 60%),var(--surface); }
}
@media (max-width: 760px) {
  .product-hero .voyage-beats { display: block; margin-top: 8px; }
  .product-hero .voyage-beats li { border-top: 1px solid var(--line); padding-block: 16px; display: grid; grid-template-columns: 108px 1fr; column-gap: 16px; align-items: start; }
  .product-hero .voyage-beats .eyebrow { grid-row: 1 / 3; font-size: 10px; margin-top: 3px; }
  .product-hero .voyage-beats p { grid-column: 2; margin: 0; font-size: 17px; }
  .product-hero .voyage-beats .beat-text { font-size: 14px; margin-top: 6px; }
  /* Phone width: the beats are not shown, so the scroll cue stays in the first screen; the cards below carry the same copy.
     To show them stacked under the headline instead, remove the rule below. */
  .product-hero .voyage-beats { display: none; }
  .product-hero { min-height: min(700px,calc(100svh - 76px)); }
  .product-hero::after,.hero-stage::after,.hero-film:not(.film-on) .hero-stage::after { background: linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.92) 38%,rgba(10,10,11,.7) 64%,rgba(10,10,11,.3) 100%); }
  .hero-stage { min-height: min(700px,calc(100svh - 76px)); }
  .product-hero-content { padding-top: 200px; }
  .product-hero .offering-brand img { width: 128px; }
  .hero-drawn .product-hero-art { inset: 22px 10% auto 10%; height: 168px; }
  .hero-drawn .product-hero-art img { object-position: center; }
  .figure-card .ai-toolkit dl { grid-template-columns: 1fr; }
  .figure-card .diagram-bars { height: 80px; gap: 8px; }
  .figure-card .diagram-bars i { width: 14px; }
  .figure-card .journey-line { margin-block: 44px 22px; }
  .figure-card .monitoring-flow { min-height: 0; }
}
@media (max-width: 600px) {
  .cards-3 .card-text { padding-top: 0; }
  .card-index { padding: 22px 22px 24px; }
  .cards-3 .card-text .card-body { padding-top: 0; }
  .sibling-products { flex-direction: column; align-items: center; gap: 0; }
}
@media (forced-colors: active) { .product-hero-art { visibility: hidden; } .product-hero::after,.hero-stage::after { background: none; } .figure-card::before { border-color: CanvasText; } .story-label { border-color: CanvasText; } }

/* AI for web: two screenshot-led workflows, followed by a compact editor guide. */
.product-ai .web-workflow { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: clamp(28px,4vw,64px); align-items: center; margin-top: clamp(56px,8vw,120px); }
.product-ai .web-workflow h3,.product-ai .web-workspace h3 { margin: 14px 0 22px; font: 500 clamp(30px,3.4vw,48px)/1.08 var(--display); letter-spacing: -.045em; }
.product-ai .web-workflow p,.product-ai .web-workspace p,.product-ai .web-faq p { max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--body); }
.product-ai .web-workflow .eyebrow { color: var(--brand-mint); font-size: 12px; }
.product-ai .web-workflow ul { list-style: none; padding: 0; margin: 28px 0; }
.product-ai .web-workflow li + li { margin-top: 24px; }
.product-ai .web-workflow h4,.product-ai .web-workspace h4 { font: 500 19px/1.3 var(--display); margin: 0 0 8px; }
.product-ai .web-workspace { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: clamp(28px,4vw,64px); align-items: center; margin-top: clamp(56px,8vw,120px); padding: clamp(24px,4vw,56px); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.product-ai .web-workspace h3 { margin-top: 0; }
.product-ai .web-workspace-copy > p { max-width: 72ch; }
.product-ai .web-workspace ol { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; list-style: none; padding: 0; margin: 32px 0 0; }
.product-ai .web-workspace li { border-top: 1px solid var(--line); padding-top: 22px; }
.product-ai .web-faq details { border-bottom: 1px solid var(--line); padding: 0 0 20px; margin-top: 20px; }
.product-ai .web-faq summary { cursor: pointer; padding: 16px 0; font: 500 clamp(19px,2vw,25px)/1.4 var(--display); }
.product-ai .web-faq p { padding: 0 0 8px; max-width: 76ch; }


/* Source-backed UI walkthroughs. All sample fields are read-only illustrations. */
.product-ai .web-demo-column { min-width: 0; }
.product-ai .web-workflow:nth-of-type(even) > .web-demo-column { grid-column: 2; grid-row: 1; }
.product-ai .web-walkthrough { padding: clamp(16px,2vw,24px); border: 1px solid #414147; border-radius: 18px; background: #171719; color: #f6f6f5; font-family: var(--body-font,system-ui,sans-serif); }
.product-ai .web-walkthrough .walk-example { margin: 0 0 20px; color: #a2f1df; font-size: 12px; line-height: 1.5; }
.product-ai .walk-title { font: 600 24px/1.2 var(--display); letter-spacing: -.025em; }
.product-ai .walk-status { font-size: 12px; line-height: 1.5; padding: 10px 12px; margin: 0 0 22px; background: #29312f; border-radius: 8px; color: #b2eedf; }
.product-ai .walk-field { position: relative; margin: 18px 0; min-width: 0; }
.product-ai .walk-field label,.product-ai .walk-label { display: block; padding: 12px 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.product-ai .walk-field textarea { display: block; width: 100%; box-sizing: border-box; resize: none; min-height: 92px; padding: 12px; border: 1px solid #5c5c64; border-radius: 8px; background: #262629; color: #f6f6f5; font: 14px/1.55 system-ui,sans-serif; }
.product-ai .walk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: start; }
.product-ai .walk-image-example { display: grid; gap: 10px; place-items: center; min-height: 100px; padding: 16px; border: 1px dashed #777781; border-radius: 8px; text-align: center; color: #d0d0d6; font-size: 13px; line-height: 1.5; }
.product-ai .walk-image-example > span:first-child { font-size: 32px; }
.product-ai .walk-output { display: block; padding: 14px; background: #29292e; border: 1px solid #5c5c64; border-radius: 8px; font-size: 14px; }
.product-ai .walk-result { display: grid; gap: 8px; padding: 16px; border: 1px solid #5c5c64; border-radius: 8px; font-size: 14px; }
.product-ai .walk-result > span { font-size: 12px; color: #ceced5; }
.product-ai .walk-result .walk-badge { justify-self: start; color: #ffcca8; background: #3a251c; border-radius: 6px; padding: 6px 8px; }
@media (max-width: 900px) {
 .product-ai .web-workflow:nth-of-type(even) > .web-demo-column { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) { .product-ai .web-explorer-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Shared outline icons and a local, illustrative workspace overview. */
.product-ai .web-tool-icon { display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; color: currentColor; vertical-align: middle; }
.product-ai .walk-title { display: flex; align-items: center; gap: 10px; }
.product-ai .walk-title .web-tool-icon,.product-ai .walk-workspace-tools .web-tool-icon { color: var(--brand-mint); }
.product-ai .web-workspace-demo { width: 100%; min-width: 0; }
.product-ai .walk-workspace-tools { display: grid; gap: 12px; }
.product-ai .walk-workspace-tools a { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #202524; color: var(--text); font-size: 14px; line-height: 1.4; text-decoration: none; }
.product-ai .walk-workspace-tools a > span:not([aria-hidden]) { flex: 1; min-width: 0; }
.product-ai .walk-workspace-tools a:hover { border-color: var(--brand-mint); background: #25342f; }
.product-ai .walk-workspace-tools a:focus-visible { outline: 3px solid var(--brand-mint); outline-offset: 3px; }

/* One cinematic native-scroll story. Only this product component is enhanced. */
.product-ai .web-features { padding-top: clamp(64px,8vw,120px); padding-bottom: clamp(64px,8vw,120px); }
.product-ai .web-features > .section-title { max-width: 14ch; font-size: clamp(44px,5.8vw,88px); line-height: 1; letter-spacing: -.06em; }
.product-ai .web-story-track { margin-top: 48px; }
.product-ai .web-story-stage { position: relative; }
.product-ai .web-explorer-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin: 0 0 36px; border-bottom: 1px solid var(--line); }
.product-ai .web-explorer-tabs a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 0 18px; color: var(--muted); font: 500 14px/1.3 var(--display); }
.product-ai .web-explorer-tabs a::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--ember),var(--brand-mint)); transform: scaleX(0); transform-origin: left; transition: transform var(--normal) var(--ease); }
.product-ai .web-explorer-tabs a[aria-current],.product-ai .web-explorer-tabs a:hover { color: var(--text); }
.product-ai .web-explorer-tabs a[aria-current]::after { transform: scaleX(1); }
.product-ai .web-explorer-tabs a:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 4px; }
.product-ai .web-workflow,.product-ai .web-workflow:nth-of-type(even),.product-ai .web-workspace { grid-template-columns: minmax(0,.47fr) minmax(0,.53fr); gap: clamp(40px,6vw,96px); padding: 0; border: 0; border-radius: 0; background: transparent; }
.product-ai .web-workflow:nth-of-type(even) > .web-demo-column { grid-column: 1; grid-row: 1; }
.product-ai .web-workflow:nth-of-type(even) > .web-workflow-copy { grid-column: 2; grid-row: 1; }
.product-ai .web-workflow h3,.product-ai .web-workspace h3 { font: 500 clamp(38px,4.4vw,68px)/1.01 var(--display); letter-spacing: -.055em; margin: 12px 0 24px; max-width: 14ch; text-wrap: balance; }
.product-ai .web-workflow .eyebrow,.product-ai .web-workspace .eyebrow { color: var(--ember); font-size: 12px; letter-spacing: .16em; }
@media (max-width: 760px) { .product-ai .web-workflow .eyebrow,.product-ai .web-workspace .eyebrow { font-size: 10px; } }
.product-ai .web-workflow-copy > p:not(.eyebrow),.product-ai .web-workspace-copy > p { max-width: 42ch; }
.product-ai .web-walkthrough { padding: clamp(20px,2.6vw,36px); border: 1px solid #454547; border-radius: 14px; background: linear-gradient(145deg,#232326,#131315); box-shadow: 0 24px 60px #0005; }
.product-ai .walk-title { font-size: 22px; font-weight: 500; }
.product-ai .walk-status { border-radius: 0; background: transparent; padding: 0 0 14px; border-bottom: 1px solid var(--line); color: var(--body); font-size: 11px; }
.product-ai .walk-workspace-tools a { border: 0; border-bottom: 1px solid #49494b; border-radius: 0; background: transparent; padding: 16px 0; }
.product-ai .walk-workspace-tools a:hover { background: transparent; color: var(--brand-mint); }
.product-ai .walk-view[hidden],.product-ai .web-story-controls[hidden],.product-ai .web-explorer-panels > [hidden] { display: none !important; }
.product-ai .web-story-controls { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.product-ai .web-story-controls .hero-chevron { position: static; flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; border-radius: 50%; }
.product-ai .web-story-controls .hero-chevron svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.product-ai .web-story-position { min-width: 54px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.product-ai .web-story-position [data-story-current] { color: var(--text); }
.product-ai .web-story-line { height: 1px; margin-left: 12px; flex: 1; background: var(--line); }
.product-ai .web-story-line > span { display: block; height: 100%; background: linear-gradient(90deg,var(--ember),var(--brand-mint)); transform: scaleX(var(--story-progress,0)); transform-origin: left; transition: transform var(--normal) var(--ease); }
.product-ai .is-story .web-story-stage { position: sticky; top: var(--story-top,104px); min-height: var(--story-stage-height,0); display: flex; flex-direction: column; justify-content: center; }
.product-ai .is-story .web-workflow,.product-ai .is-story .web-workspace { margin: 0; min-height: 100%; }
.product-ai .is-story .web-explorer-panels { flex-shrink: 0; }
.product-ai .is-story .web-walkthrough { animation: web-ui-arrive 300ms var(--ease) both; }
.product-ai .is-story .walk-view { animation: web-view-arrive 260ms var(--ease) both; }
.product-ai .is-story .web-workflow-copy,.product-ai .is-story .web-workspace-copy { animation: web-copy-arrive 300ms var(--ease) both; }
@keyframes web-ui-arrive { from { opacity: .45; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes web-view-arrive { from { opacity: .35; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes web-copy-arrive { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1039px) {
 .product-ai .web-explorer-tabs { gap: 12px; }
 .product-ai .web-workflow,.product-ai .web-workflow:nth-of-type(even),.product-ai .web-workspace { grid-template-columns: minmax(0,1fr); gap: 28px; margin-top: 72px; }
 .product-ai .web-workflow:nth-of-type(even) > .web-demo-column,.product-ai .web-workflow:nth-of-type(even) > .web-workflow-copy { grid-column: auto; grid-row: auto; }
 .product-ai .web-workflow-copy,.product-ai .web-workspace-copy { order: -1; justify-self: start; }
 .product-ai .web-workflow h3,.product-ai .web-workspace h3 { max-width: 17ch; }
 .product-ai .web-demo-column,.product-ai .web-workspace-demo { width: 100%; max-width: 640px; }
}
@media (max-width: 600px) {
 .product-ai .web-explorer-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
 .product-ai .web-explorer-tabs a { font-size: 13px; min-height: 64px; }
 .product-ai .web-explorer-tabs .web-tool-icon { width: 20px; height: 20px; flex-basis: 20px; }
 .product-ai .web-features > .section-title { font-size: 44px; }
 .product-ai .web-walkthrough { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
 .product-ai .web-explorer-tabs a::after,.product-ai .web-story-line > span { transition: none; }
 .product-ai .is-story .web-walkthrough,.product-ai .is-story .walk-view,.product-ai .is-story .web-workflow-copy { animation: none; }
}
.product-ai .web-workflow h3,.product-ai .web-workspace h3 { background: linear-gradient(125deg,var(--text) 35%,#a2e9d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .product-ai .web-workflow h3,.product-ai .web-workspace h3 { background: none; color: CanvasText; } }

/* Authored concept views remain in native flow without enhancement. */
.product-ai .web-addon-label { margin: 0 0 12px; color: var(--brand-mint); font: 500 11px/1.5 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.product-ai .walk-view + .walk-view { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.product-ai .is-story .walk-view { margin-top: 0; padding-top: 0; border: 0; }
.product-ai .walk-action-label { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid #666269; border-radius: 8px; background: #252529; color: var(--text); font: 500 14px/1.4 var(--sans); }
@media (forced-colors: active) { .product-ai .walk-action-label { border-color: CanvasText; } }
.product-ai .is-story .web-addon-label { margin-bottom: 8px; }
.product-ai .is-story .web-explorer-tabs { margin-bottom: 24px; }
.product-ai .is-story .web-story-controls { margin-top: 16px; }

/* Reference-matched conceptual raster art, no simulated CMS. */
.product-ai .web-walkthrough { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.product-ai .walk-title { font-size: 16px; }
.product-ai .module-concept { min-width: 0; scroll-margin-top: 140px; }
.product-ai .module-art { display: block; width: 100%; max-width: 540px; height: auto; max-height: 360px; margin-inline: auto; object-fit: contain; aspect-ratio: 3 / 2; border-radius: var(--radius-card); }
.product-ai .web-workspace-demo .module-art { max-height: 360px; }
.product-ai .walk-workspace-tools { gap: 0; }
.product-ai .walk-workspace-tools a { min-height: 44px; padding: 10px 0; font-size: 13px; }
@media (forced-colors: active) { .product-ai .module-art { forced-color-adjust: none; } }

/* Four service story illustrations use the established full-stage background.
   Scope the crop and readability shade here; hero films and story timing stay intact. */
.service-story .story-image img { object-fit: cover; object-position: 50% 50%; }
@media (forced-colors: none) and (min-width: 601px) {
  .service-story .story-stage::after { background: radial-gradient(74% 68% at 0% 0%,rgba(10,10,11,.88) 0%,rgba(10,10,11,.76) 52%,rgba(10,10,11,.36) 78%,transparent 100%),linear-gradient(0deg,var(--ink) 0%,transparent 14%); }
}
@media (max-width: 600px) {
  .service-story .story-image img { object-position: 55% center; }
}
@media (forced-colors: none) and (max-width: 600px) {
  .service-story .story-stage::after { background: linear-gradient(180deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.74) 44%,rgba(10,10,11,.2) 72%,transparent 86%),linear-gradient(0deg,var(--ink) 0%,transparent 14%); }
}

/* Wepop uses the existing static product hero and its authentic wordmark. */
.page-wepop .product-hero-actions { margin-top: 24px; flex-wrap: wrap; justify-content: flex-start; gap: 16px 28px; }

/* Keep monitoring labels readable inside narrow cards, including Spanish. */
@media (max-width: 400px) {
  .product-uptimeful .figure-card .monitoring-flow { grid-template-columns: 1fr; gap: 24px; }
  .product-uptimeful .monitoring-flow > div { flex-direction: row; align-items: center; gap: 16px; }
  .product-uptimeful .monitor-node { flex: none; }
  .product-uptimeful .monitoring-flow > div:not(:last-child)::after { top: calc(50% + 14px); left: 6px; width: 1px; height: calc(50% + 10px); }
}

/* Always-visible offering summaries; native FAQs and chat disclosures stay separate. */
.offering-summary { padding-block: clamp(48px,6vw,88px); }
.offering-summary-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(32px,6vw,96px); border-top: 1px solid var(--line); padding-top: clamp(28px,4vw,56px); }
.offering-summary-heading .eyebrow { color: var(--frost); margin: 0 0 18px; }
.offering-summary-heading h2 { margin: 0; max-width: 14ch; font-size: clamp(32px,3.4vw,50px); line-height: 1.08; }
.offering-summary-content { align-self: start; max-width: 64ch; }
.offering-summary-content > * + * { margin-top: 28px; }
.offering-summary-content p { margin: 0; font-size: clamp(16px,1.3vw,19px); line-height: 1.6; color: var(--body); text-wrap: pretty; }
.offering-summary-group h3 { margin: 0 0 8px; color: var(--text); font-size: 21px; line-height: 1.25; letter-spacing: -.025em; }
@media (max-width: 700px) {
  .offering-summary-layout { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .offering-summary-heading h2 { max-width: 18ch; }
  .offering-summary-content > * + * { margin-top: 24px; }
}

/* About: the practical process keeps its illustrations in native reading order
   whenever a sticky illustration would compete with a short or quiet view. */
.page-about #approach { scroll-margin-top: 112px; }
@media (max-height: 700px), (prefers-reduced-motion: reduce), (scripting: none) {
  .page-about #approach { display: block; }
  .page-about #approach .sticky-intro { position: static; }
  .page-about #approach .approach-art,
  .page-about #approach .chapter-indicator { display: none; }
  .page-about #approach .approach-steps { margin-top: 40px; }
  .page-about #approach .approach-steps li { min-height: 0; }
  .page-about #approach .step-art { visibility: visible; width: 100%; max-width: 450px; max-height: none; }
}

/* Bounded original Orykl editorial image: 512px source, at most 256 CSS pixels. */
.product-orykl .orykl-reflection-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.product-orykl .orykl-reflection-image { width:256px; max-width:100%; margin:24px; }
.product-orykl .orykl-reflection-image img { display:block; width:100%; height:auto; border-radius:10px; }
@media(max-width:600px) {
  .product-orykl .orykl-reflection-card { grid-template-columns:minmax(0,1fr); }
  .product-orykl .orykl-reflection-image { width:min(256px,calc(100% - 44px)); margin:0 22px 22px; }
}