*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0b101b;color:#f2f5fa;font:16px/1.8 Inter,Arial,sans-serif}h1,h2,h3,.brand{font-family:Manrope,Inter,Arial,sans-serif;letter-spacing:-.035em;line-height:1.18}h1{font-size:clamp(2.8rem,6vw,5.2rem);margin:16px 0 18px}h2{font-size:clamp(1.9rem,3vw,2.65rem);margin:0 0 25px}h3{font-size:1.4rem;margin:0 0 12px}p{margin:0 0 22px}a{color:inherit;text-decoration:none}a:hover{color:#9bc7df}.shell{max-width:1180px;padding:0 28px;margin:0 auto}.reading{max-width:720px;margin-left:auto;margin-right:auto}.header{border-bottom:1px solid #26374a}.header .shell{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:800;font-size:19px}.brand em{font-style:normal;color:#6290ab}.nav{display:flex;gap:24px;font-size:13px;color:#c5d2df}.crumbs{padding-top:34px;font-size:13px;color:#a9bac9}.crumbs a{color:#9bc7df}.crumbs span{padding:0 8px;color:#61758a}.intro{padding:64px 0 35px}.intro .summary{font-size:19px;color:#b9c8d6;max-width:700px}.hero-art{height:clamp(350px,53vw,610px);background:radial-gradient(ellipse at 48% 42%,#304a66 0%,#17283d 48%,#101a2a 100%);border:1px solid #2d4156;border-radius:22px;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:clamp(10px,4vw,70px);padding:35px 25px;box-shadow:0 30px 65px #0006}.phone{height:100%;width:auto;max-width:43%;object-fit:contain;filter:drop-shadow(0 18px 24px #0009)}.phone:nth-child(2){transform:translateY(24px)}.hero-note{font-size:12px;color:#8fa3b5;text-align:center;margin:12px 0 0}.section{padding:95px 0 0}.section p{color:#c4d0dc}.wide{margin:42px auto 0;max-width:1124px}.frame{background:#142033;border:1px solid #293d51;border-radius:16px;padding:20px;box-shadow:0 18px 45px #0004}.frame img{display:block;width:100%;height:auto;border-radius:5px}.caption{font-size:13px;color:#9eafc1;margin:12px 0 0}.journey{margin:32px 0 0}.bar{height:17px;display:flex;border-radius:5px;overflow:hidden}.bar div:first-child{background:#6290ab;width:75%}.bar div:last-child{background:#9386d2;width:25%}.journey-labels{display:grid;grid-template-columns:3fr 1fr;gap:20px;margin-top:14px}.journey-labels strong{font:700 28px Manrope}.journey-labels small{display:block;color:#aebdca;font-size:13px}.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;margin-top:48px}.split .frame{margin:0}.split .text p{font-size:15px}.lens-wrap{position:relative}.lens{position:absolute;right:-16px;bottom:-35px;width:clamp(110px,18vw,220px);aspect-ratio:1;border-radius:50%;border:7px solid #b1c7db;background:#152132;box-shadow:0 10px 40px #000b;overflow:hidden}.lens img{width:380%;max-width:none;height:auto;position:absolute;left:-85%;top:-70%}.lens-caption{font-size:12px;color:#9eafc1;margin-top:48px}.results{display:flex;gap:24px;flex-wrap:wrap;margin:28px 0 24px}.metric{flex:1;min-width:210px;padding:22px 26px;border:1px solid #293d51;background:#142033;border-radius:14px}.metric strong{font:800 clamp(2rem,4vw,3.5rem) Manrope;display:block;line-height:1.2}.metric small{color:#aabccb}.footer{margin-top:110px;border-top:1px solid #26374a;padding:40px 0;color:#9eafc1;font-size:13px}.draft{background:#172b3d;color:#d4e6f2;text-align:center;font-size:12px;padding:7px}.provisional{border-left:3px solid #9386d2;padding-left:20px;color:#c8bff0!important}.note{font-size:12px;color:#9eafc1}@media(max-width:760px){.shell{padding:0 19px}.header .shell{padding-top:16px;padding-bottom:16px;align-items:flex-start;flex-direction:column;gap:7px}.nav{gap:14px;flex-wrap:wrap;font-size:11px}.intro{padding-top:42px}.hero-art{height:400px;padding:20px 10px}.section{padding-top:66px}.split{grid-template-columns:1fr;gap:15px}.lens{right:0;bottom:-22px}.lens-caption{margin-top:34px}.frame{padding:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Full-bleed hero matching the original PIX! gradient band */
.hero-fullbleed{width:100%;margin:12px 0 72px;background:linear-gradient(90deg,#24364E 0%,#6290AB 50%,#24364E 100%);overflow:hidden}
.hero-fullbleed .hero-art{height:clamp(360px,48vw,540px);max-width:1180px;margin:auto;background:none;border:0;border-radius:0;box-shadow:none;padding:30px 24px;gap:clamp(8px,3vw,55px)}
.hero-fullbleed .phone{filter:drop-shadow(0 16px 24px #0009)}
.hero-fullbleed .phone:nth-child(2){transform:none}
@media(max-width:760px){.hero-fullbleed{margin:0 0 40px}.hero-fullbleed .hero-art{height:380px;padding:18px 12px;gap:14px}}

/* Native SVG user journey, kept wider than the reading column */
.flow-figure{width:min(1120px,calc(100vw - 40px));max-width:none;position:relative;left:50%;transform:translateX(-50%);margin:46px 0 10px}.flow-scroll{background:#101b2a;border:1px solid #26394e;border-radius:14px;overflow-x:auto;padding:16px}.flow-scroll svg{display:block;width:100%;min-width:690px;height:auto;font-family:Inter,Arial,sans-serif}.flow-node{fill:#1b2b3e;stroke:#49647d;stroke-width:1.5}.flow-node.subdued{fill:#162334;stroke:#3b4f64}.flow-node.result{fill:#213b53;stroke:#8ac3e5;stroke-width:2}.flow-node-label{fill:#eef4fa;font-size:19px;font-weight:600;text-anchor:middle;dominant-baseline:middle}.flow-muted{fill:none;stroke:#8398ab;stroke-width:2}.flow-highlight{fill:none;stroke:#9bd5f6;stroke-width:3}.flow-muted-label{fill:#a9bbca;font-size:16px;font-weight:500;text-anchor:middle}.flow-primary-label{fill:#c5e9ff;font-size:16px;font-weight:700;text-anchor:middle}.flow-figure figcaption{font-size:13px;line-height:1.6;color:#9eafc1;margin:12px 0 0;text-align:center}@media(max-width:760px){.flow-figure{width:calc(100vw - 26px)}.flow-scroll{padding:8px}}



/* Shared site identity and alignment: same 1180px shell for logo, breadcrumbs and title. */
.header .shell, .shell.crumbs, .shell.intro {max-width:1180px;width:100%;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px;}
.brand {font-family:Manrope,Inter,Arial,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.05em;white-space:nowrap;line-height:1.14;}
.brand span {color:#81b5d1;}
.shell.intro h1 {margin-left:0;margin-right:0;}
@media(max-width:700px){.header .shell,.shell.crumbs,.shell.intro{padding-left:20px;padding-right:20px;}}

/* Search case study: title and crumbs share the same content edge as the header. */
.crumbs,.intro{margin-left:0;margin-right:0;}



/* Search case study refinements */
.issues-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:start;margin-top:24px}
.issues-copy{max-width:540px}
.issues-copy p{color:#c4d0dc}
.issue-image{margin:0}
.issue-image img{display:block;width:100%;height:auto;border-radius:5px;cursor:zoom-in}
.issue-schematic{margin:26px 0 18px}
.issue-stack{display:grid;gap:12px}
.issue-row{padding:16px 18px;border:1px solid #2a3d51;border-radius:14px;background:#142033}
.issue-row .issue-label{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#90a8ba;margin-bottom:4px}
.issue-row strong{display:block;font:700 18px/1.35 Manrope,Inter,Arial,sans-serif;color:#f2f5fa;letter-spacing:-.02em}
.issue-schematic figcaption{font-size:13px;line-height:1.6;color:#9eafc1;margin:12px 0 0}
@media(max-width:900px){.issues-layout{grid-template-columns:1fr;gap:24px}.issues-copy{max-width:none}}

/* Reuse the product-page lightbox styling on the search case study */
.lightbox{position:fixed;inset:0;background:rgba(3,7,14,.95);z-index:200;display:none;align-items:center;justify-content:center;padding:65px 38px 38px}.lightbox.open{display:flex}.lightbox img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.lightbox button{position:absolute;background:#182638;border:1px solid #476178;color:#fff;border-radius:9px;font-size:23px;cursor:pointer;width:42px;height:42px}.lightbox-close{right:20px;top:17px}.lightbox-prev{left:12px;top:50%}.lightbox-next{right:12px;top:50%}body.viewer-open{overflow:hidden}@media(max-width:720px){.lightbox{padding:64px 12px 40px}}

/* Search case study: revised background-to-solutions content */
.issues-section .issues-intro { margin-bottom: 34px; }
.issues-layout { grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); gap: 42px; margin-top: 0; }
.issues-copy { max-width: none; min-width: 0; }
.issues-copy h3 { font-size: 1.48rem; margin: 0 0 14px; }
.issues-copy h3:not(:first-child) { margin-top: 44px; }
.issues-copy p { font-size: 16px; line-height: 1.75; }
.issue-image { margin: 0; align-self: start; }
.issue-image img { display: block; max-width: 100%; width: 100%; border-radius: 5px; cursor: zoom-in; }
.category-schematic { border: 1px solid #344d65; border-radius: 14px; background: #111e2e; margin: 28px 0 38px; padding: 17px; box-shadow: 0 10px 28px #0003; }
.schematic-heading { font: 700 14px/1.45 Manrope,Inter,sans-serif; color: #d5e6f2; margin: 0 0 14px 2px; }
.category-schematic__section { border-top: 1px solid #304258; padding: 14px 2px 15px; }
.category-schematic__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 11px; }
.category-schematic__head strong { font: 600 13px/1.6 Inter,sans-serif; color: #d4e3ef; }
.category-schematic__number { flex: 0 0 auto; font: 800 12px/1.7 Manrope,sans-serif; color: #8bbbd7; }
.schematic-users { display: flex; gap: 10px; padding: 4px 4px 5px 34px; }
.schematic-users span { width: 34px; height: 34px; background: linear-gradient(145deg,#42627c,#23374c); border: 1px solid #57768e; border-radius: 50%; }
.schematic-items { display: grid; gap: 7px; margin-left: 34px; }
.schematic-items--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.schematic-items--six { grid-template-columns: repeat(6,minmax(0,1fr)); }
.schematic-items span { aspect-ratio: .78; background: linear-gradient(180deg,#3f5d75 0%,#2c4258 70%,#1c2f42 70%); border: 1px solid #53738e; border-radius: 4px; }
.schematic-cta { margin: 10px 0 0 34px; display: flex; justify-content: flex-end; gap: 5px; color: #9dc8e2; font-size: 11px; }
.issues-conclusion { margin: 64px auto 0; max-width: 770px; padding: 0 0 0 25px; border-left: 3px solid #81b5d1; font: 600 clamp(19px,2.3vw,25px)/1.6 Manrope,Inter,sans-serif; letter-spacing: -.025em; color: #d8e9f4; }
.solution-criteria { margin: -1px 0 32px; padding: 0 0 0 26px; color: #e2ebf3; }
.solution-criteria li { margin: 7px 0; padding-left: 3px; line-height: 1.7; }
.solution-criteria li::marker { color: #81b5d1; }
@media(max-width:900px) { .issues-layout { grid-template-columns: 1fr; gap: 28px; } .issue-image { max-width: 730px; margin: 0 auto; } .issues-copy { max-width: 730px; margin: 0 auto; } }
@media(max-width:600px) { .issues-section .issues-intro { margin-bottom: 22px; } .category-schematic { padding: 12px; } .issues-conclusion { margin-top: 42px; font-size: 18px; } .issues-copy h3:not(:first-child) { margin-top: 32px; } }



/* Search case study preview v2: consistent alignment and reading hierarchy */
body > .shell { padding-left:30px; padding-right:30px; }
body > .shell > .site-breadcrumbs {
  max-width:none; width:100%; margin:0;
  padding:35px 0 0;
}
.section h2 {
  font-size:clamp(2.35rem,3.6vw,3.15rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.048em;
  margin-bottom:30px;
}
/* Optional detail: no large diagram interrupting the primary reading flow. */
.structure-accordion {
  margin:26px 0 36px;
  border:1px solid #38516a;
  border-radius:14px;
  background:#111f30;
  overflow:hidden;
}
.structure-accordion__summary {
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  cursor:pointer;
  padding:17px 20px;
  list-style:none;
  color:#eaf3fb;
  transition:background-color .16s ease;
}
.structure-accordion__summary::-webkit-details-marker { display:none; }
.structure-accordion__summary:hover { background:#1a2c41; }
.structure-accordion__summary:focus-visible { outline:2px solid #9bd5f6; outline-offset:-3px; }
.structure-accordion__text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.structure-accordion__text strong { font:700 15px/1.4 Manrope,Inter,sans-serif; }
.structure-accordion__text small { font:400 12px/1.5 Inter,sans-serif; color:#a7bbcb; }
.structure-accordion__chevron {
  flex:0 0 10px;
  width:10px; height:10px;
  border-right:2px solid #96c9e7;
  border-bottom:2px solid #96c9e7;
  transform:rotate(45deg);
  transition:transform .16s ease;
}
.structure-accordion[open] .structure-accordion__chevron { transform:rotate(225deg); }
.structure-accordion__content { padding:0 16px 16px; }
.structure-accordion .category-schematic {
  margin:0;
  box-shadow:none;
  border-color:#2b4054;
  background:#0f1928;
}
/* Preview links were above each card row in the original search interface. */
.structure-accordion .schematic-cta {
  margin:0 0 10px 34px;
  justify-content:flex-end;
  align-items:center;
}
.final-design-heading {
  margin:0 0 21px;
  font-size:clamp(1.45rem,2.3vw,1.85rem);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.25;
}
.final-design-section { margin-top:36px; }
@media(max-width:700px) {
  body > .shell { padding-left:20px; padding-right:20px; }
  body > .shell > .site-breadcrumbs { padding-top:28px; }
  .section h2 { margin-bottom:24px; }
  .structure-accordion__summary { padding:15px; }
  .structure-accordion__content { padding:0 10px 10px; }
}
@media(prefers-reduced-motion:reduce) {
 .structure-accordion__summary,.structure-accordion__chevron { transition:none; }
}


/* Search preview v3 — match the approved PIX case-study typography and rhythm. */
body > .shell > .site-breadcrumbs { padding-top:34px; }
body > .shell .intro { padding:55px 0 42px; }
body > .shell .intro h1 {
  font-size:clamp(2.8rem,6vw,5rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.035em;
  margin:0;
}
/* The PIX hero follows its title without an additional outer margin. */
.hero-fullbleed { margin-top:0; }
.section h2 {
  font-size:clamp(1.8rem,3vw,2.5rem);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.2;
  margin-bottom:28px;
}
/* Match PIX's section rhythm, with mobile adjustments. */
.section { padding-top:96px; }
main > .section:first-child { padding-top:132px; }
.issues-conclusion {
  width:100%;
  max-width:720px;
  margin:64px auto 0;
  text-align:left;
}
.final-design-heading {
  width:100%;
  max-width:720px;
  margin:0 auto 24px;
  text-align:left;
}
@media(max-width:700px) {
  body > .shell > .site-breadcrumbs { padding-top:34px; }
  body > .shell .intro { padding:55px 0 42px; }
  main > .section:first-child { padding-top:80px; }
  .section { padding-top:72px; }
  .issues-conclusion { margin-top:42px; }
}

/* Preview v4: comfortable reading measure without shrinking visual content. */
.reading {
  max-width: min(100%, 62ch);
}
/* Keep visual statistics at the established width, independently of prose. */
.reading > .results {
  width: min(720px, calc(100vw - 40px));
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
/* The final image has no accompanying text; centre its heading above it. */
.final-design-heading {
  text-align: center;
}


/* Preview v5: stronger distinction between main section headings and subheadings. */
.section h2 {
  font-size: clamp(2.15rem, 3.8vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.04em;
}

/* The two Results metrics belong to the reading column, not the wider image area. */
.reading > .results {
  position: static;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
}