:root {
  --ink: #121c35;
  --slate: #505c70;
  --blue: #304fd9;
  --paper: #f8f9fb;
  --line: #d5dae3;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid #ec9e22; outline-offset: 4px; }
img { max-width: 100%; display: block; }
.wrap { width: min(1320px, 89%); margin-inline: auto; }
.skip { position: fixed; z-index: 3; top: -8rem; left: 1rem; background: white; padding: 1rem; }
.skip:focus { top: .5rem; }
.top { border-bottom: 1px solid var(--line); }
.bar, .bar nav, .brand, .actions, .button, .nav-cta, .text-link, .eyebrow { display: flex; align-items: center; }
.bar { justify-content: space-between; min-height: 82px; gap: 22px; }
.brand { gap: 7px; font-size: 22px; font-weight: 740; letter-spacing: -1.2px; white-space: nowrap; }
.brand img { object-fit: contain; }
.brand-light { font-weight: 450; }
.bar nav { gap: clamp(20px, 3vw, 48px); font-size: 14px; font-weight: 550; }
.bar nav a, .foot nav a { padding-block: 8px; }
nav a:hover, .text-link:hover, .company dd a:hover, .back:hover { color: var(--blue); }
.nav-cta, .button, .text-link { gap: 16px; font-weight: 600; font-size: 14px; }
.nav-cta { border: 1px solid #bcc3d2; border-radius: 5px; padding: 11px 15px; }
.nav-cta:hover { background: white; border-color: var(--blue); color: var(--blue); }
.nav-cta span, .button span { font-size: 18px; line-height: 1; }
.hero { display: grid; grid-template-columns: 1.01fr 1fr; gap: 5.6%; align-items: center; padding-block: clamp(45px, 5.3vw, 80px); }
.eyebrow { gap: 11px; margin: 0 0 22px; text-transform: uppercase; font: 600 11px/1.4 var(--mono); letter-spacing: .09em; color: #4e5c73; }
.eyebrow i { width: 18px; height: 2px; background: var(--blue); display: inline-block; flex-shrink: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.hero h1 { font-size: clamp(49px, 5.25vw, 85px); line-height: .995; letter-spacing: -.063em; font-weight: 605; }
.hero h1 em { color: var(--blue); font-style: normal; }
.intro, .lede { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.65; color: var(--slate); }
.intro { max-width: 430px; margin-top: 22px; }
.actions { gap: 25px; margin-top: 29px; flex-wrap: wrap; }
.button { justify-content: center; width: fit-content; min-height: 46px; border-radius: 5px; padding: 13px 19px; background: var(--blue); color: white; transition: background .16s; }
.button:hover { background: #1c39bd; }
.text-link { padding: 10px 0; gap: 10px; }
.cover { border-radius: 8px; overflow: hidden; background: #101b32; }
.cover img { width: 100%; height: auto; }
.services { border-block: 1px solid var(--line); background: white; padding: 60px 0 65px; }
h2 { font-size: clamp(37px, 4vw, 65px); line-height: 1.06; letter-spacing: -.055em; font-weight: 600; }
h2 span, .legal h1 span { color: var(--blue); }
.services .eyebrow, .company .eyebrow, .process .eyebrow { margin-bottom: 14px; }
.cards { margin-top: 31px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards article { min-width: 0; }
.cards h3 { font-size: clamp(21px, 2vw, 30px); letter-spacing: -.045em; margin: 19px 0 9px; font-weight: 625; }
.cards p, .steps p { color: var(--slate); line-height: 1.65; font-size: 15px; }
.diagram { position: relative; display: grid; place-items: center; height: clamp(145px, 15vw, 220px); border-radius: 5px; overflow: hidden; isolation: isolate; }
.diagram::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(currentColor .7px, transparent .9px); background-size: 10px 10px; opacity: .2; }
.diagram-web { background: #e6edff; color: #5069be; }
.window { width: 56%; aspect-ratio: 1.65; background: #f8faff; border: 1.6px solid #6481cb; border-radius: 5px; transform: rotate(-7deg); box-shadow: 7px 8px 0 #b5c5ec; }
.browserbar { display: flex; align-items: center; gap: 3px; height: 17%; border-bottom: 1px solid #b1c0e1; padding-left: 6%; }
.browserbar b { width: 3px; height: 3px; border-radius: 50%; background: #7b8fc3; }
.browserbody { position: relative; padding: 11% 8%; }
.browserbody span { display: block; width: 38%; height: 5px; background: #4562ba; border-radius: 1px; }
.window-lines, .phone i { margin: 5% 0; height: 3px; width: 45%; background: #b8c8ed; }
.fake-button { width: 18%; height: 7px; background: #4b67bf; }
.browserbody::after { content: ""; position: absolute; right: 9%; top: 18%; width: 29%; aspect-ratio: 1; border: 1px solid #99afe2; background: linear-gradient(135deg,#d7e2fa 50%,#a3b8ed 50%); }
.diagram-app { color: #9fb4ee; background: #1d2c50; }
.appwindow { display: flex; width: 57%; aspect-ratio: 1.64; border: 1px solid #859bce; border-radius: 5px; background: #344975; transform: rotate(-5deg); box-shadow: 6px 6px 0 #172544; overflow: hidden; }
.sidebar { width: 22%; padding: 8% 4%; background: #26375d; }
.sidebar b, .sidebar i, .appbody b, .app-row { display: block; height: 3px; background: #92a8dd; margin-bottom: 6px; }
.sidebar b { width: 55%; background: #cfdcff; margin-bottom: 12px; }
.appbody { flex: 1; padding: 9% 8% 5%; }
.appbody b { width: 44%; }
.bars { display: flex; align-items: end; gap: 7%; height: 65%; border-bottom: 1px solid #8fa3d0; }
.bars i { width: 13%; height: 32%; background: #95adf5; }
.bars i:nth-child(2) { height: 58%; }.bars i:nth-child(3) { height: 45%; }.bars i:nth-child(4) { height: 80%; }.bars i:nth-child(5) { height: 95%; }
.app-row { width: 65%; margin-top: 6%; opacity: .6; }
.diagram-mobile { background: #e9e7fb; color: #7063af; }
.phone { position: absolute; top: 50%; width: 19%; aspect-ratio: .54; background: #f9f9ff; border: 2px solid #7e79b6; border-radius: 10px; padding: 3%; box-shadow: 3px 4px 0 #b9b3d9; }
.phone-back { left: 32%; transform: translateY(-54%) rotate(-12deg); background: #cdc9ec; }
.phone-front { left: 47%; transform: translateY(-44%) rotate(9deg); }
.phone b { display: block; width: 37%; margin: 0 auto 22%; height: 3px; border-radius: 3px; background: #8f87bb; }
.phone i { display: block; width: 94%; margin: 10% 0; background: #bbb3df; }
.phone-tile { width: 100%; aspect-ratio: 1.2; background: linear-gradient(135deg,#d8d2f5 50%,#aaa0d8 50%); border-radius: 4px; }
.section, .company, .contact { padding-block: clamp(58px, 7vw, 105px); }
.process, .company-grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; }
.lede { margin-top: 20px; max-width: 420px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: baseline; gap: 21px; border-top: 1px solid var(--line); padding: 20px 0; counter-increment: step; }
.steps li:before { content: counter(step, decimal-leading-zero); color: var(--blue); font: 600 12px/1.5 var(--mono); }
.steps h3 { font-size: 21px; font-weight: 610; letter-spacing: -.035em; margin-bottom: 7px; }
.company { background: #eef1f7; border-top: 1px solid var(--line); }
.company dl, .contact-info { align-self: center; }
.company dl div, .contact-info dl div { display: grid; grid-template-columns: 145px 1fr; gap: 12px; border-top: 1px solid #cdd3df; padding: 17px 0; }
dt { color: var(--slate); font-size: 14px; }
dd { line-height: 1.5; }
dd a { text-decoration: underline; text-underline-offset: 4px; }
.contact { background: #101b34; color: #fff; }
.contact .eyebrow, .contact dt { color: #b8c4de; }
.contact .eyebrow i, .light { background: #b2c4ff; }
.contact h2 span { color: #90a8ff; }
.contact h2 { font-size: clamp(44px, 5vw, 75px); }
.light { color: #101b34; margin-top: 24px; }
.light:hover { background: white; }
.contact-info p { max-width: 385px; margin-bottom: 24px; color: #dde4f4; font-size: 18px; line-height: 1.55; }
.contact-info dl div { border-color: #39455e; grid-template-columns: 65px 1fr; }
.contact-info a:hover { color: #b2c4ff; }
.foot { display: flex; justify-content: space-between; gap: 20px; padding-block: 36px; }
.foot p { color: var(--slate); font-size: 12px; line-height: 1.65; margin-top: 12px; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; align-content: center; align-items: center; font-size: 13px; }
.legal { max-width: 760px; padding-block: 48px 72px; }
.legal h1 { font-size: clamp(48px,6vw,76px); letter-spacing: -.065em; line-height: 1; margin: 36px 0 16px; }
.legal .lede { max-width: 100%; margin-bottom: 37px; }
.legal section { border-top: 1px solid var(--line); padding: 23px 0; }
.legal section h2 { font-size: 23px; letter-spacing: -.03em; margin-bottom: 10px; }
.legal section p { line-height: 1.7; color: var(--slate); }
.legal section a { color: var(--blue); text-decoration: underline; overflow-wrap: anywhere; }
.back { font-size: 14px; color: var(--slate); }
@media (max-width: 900px) {
  .wrap { width: 91%; }
  .hero { gap: 4%; }
  .hero h1 { font-size: clamp(44px, 5.8vw, 56px); }
  .actions { gap: 16px; }
  .cards { gap: 16px; }
  .company dl div { grid-template-columns: 118px 1fr; }
}
@media (max-width: 700px) {
  .bar { flex-wrap: wrap; gap: 0 12px; min-height: auto; padding-top: 14px; }
  .brand { font-size: 20px; }
  .bar nav { order: 3; width: 100%; justify-content: center; gap: 34px; padding: 6px 0 4px; }
  .bar nav a { padding: 10px 0; }
  .nav-cta { padding: 9px 11px; font-size: 13px; gap: 9px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
  .hero h1 { font-size: clamp(47px, 9.5vw, 66px); }
  .hero .eyebrow { margin-bottom: 18px; }
  .intro { margin-top: 17px; }
  .actions { margin-top: 22px; }
  .cover { max-width: 540px; width: 100%; justify-self: center; }
  .services { padding-block: 44px; }
  .cards { grid-template-columns: 1fr; gap: 32px; }
  .diagram { height: clamp(160px, 45vw, 235px); }
  .window, .appwindow { width: min(55%,215px); }
  .phone { width: min(20%,72px); }
  .cards p { max-width: 540px; }
  .process, .company-grid, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .process h2 br { display: none; }
  .company dl div { grid-template-columns: 120px 1fr; }
  .foot { flex-direction: column; }
  .foot nav { gap: 18px; }
  .contact-info dl div { grid-template-columns: 55px 1fr; }
  .contact-info a { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Studio navigation and interior page layouts */
.bar [aria-current], .crumbs a:hover { color: var(--blue); }
.section-title, .split, .detail-hero, .brief-panel, .catalog-grid, .contact-columns {
  display: grid;
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.section-title { grid-template-columns: 1fr auto; align-items: end; }
.section-title .text-link { white-space: nowrap; }
.service-card a { display: block; }
.service-card a:hover h3, .more-services a:hover, .related a:hover { color: var(--blue); }
.service-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.service-card h3 span { font-size: .7em; color: var(--blue); }
.more-services { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 22px; margin-top: 30px; border-top: 1px solid var(--line); }
.more-services a { font-size: 14px; font-weight: 550; padding-block: 6px; }
.more-services a span { margin-left: 5px; color: var(--blue); }
.story-link { margin-top: 22px; }
.narrative p, .brief-panel p, .feature-title p, .channel-list p, .brief-box p {
  font-size: clamp(16px, 1.25vw, 19px); color: var(--slate); line-height: 1.65;
}
.narrative p + p, .narrative h2 + p, .narrative .text-link { margin-top: 16px; }
.narrative .eyebrow { font: 600 11px/1.4 var(--mono); }
.narrative { align-self: center; }
.contact-info .actions { align-items: center; gap: 20px; margin-top: 0; }
.contact .light { margin: 0; }
.inline-light { font-weight: 550; text-decoration: underline; text-underline-offset: 5px; padding: 10px 0; }
.inline-light:hover { color: #b2c4ff; }
.site-footer { border-top: 1px solid var(--line); }
.footer-grid { padding-block: 48px; display: grid; grid-template-columns: 1.4fr .65fr .95fr 1.05fr; gap: clamp(18px, 3vw, 44px); }
.footer-grid nav { display: flex; flex-direction: column; align-items: start; gap: 6px; }
.footer-grid nav h2 { font-size: 14px; letter-spacing: -.02em; margin-bottom: 9px; }
.footer-grid nav a { font-size: 13px; color: var(--slate); padding-block: 4px; }
.footer-grid nav a:hover, .footer-grid p a:hover { color: var(--blue); text-decoration: underline; }
.footer-grid p { max-width: 265px; margin-top: 13px; font-size: 12px; line-height: 1.6; color: var(--slate); }
.page-intro, .detail-hero { padding-block: clamp(40px, 6vw, 92px); }
.page-intro h1, .detail-hero h1 { font-size: clamp(44px, 5.6vw, 78px); letter-spacing: -.058em; line-height: 1.03; font-weight: 610; }
.page-intro h1 em, .detail-hero h1 em { font-style: normal; color: var(--blue); }
.page-intro > p:last-child { max-width: 690px; margin-top: 20px; color: var(--slate); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }
.catalog, .detail-body, .white-band, .about-band, .contact-band { background: white; border-top: 1px solid var(--line); padding-block: clamp(38px, 5vw, 75px); }
.catalog-grid { grid-template-columns: 1fr 2.7fr; }
.catalog-grid h2, .brief-panel h2, .brief-box h2 { font-size: clamp(33px, 3.3vw, 48px); }
.catalog-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.catalog-pair h3 { font-size: clamp(21px, 2vw, 28px); letter-spacing: -.04em; font-weight: 625; margin: 16px 0 8px; }
.catalog-pair p, .feature-list p { color: var(--slate); font-size: 15px; line-height: 1.65; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; font-size: 13px; color: var(--slate); padding-top: 27px; }
.crumbs span[aria-current] { color: var(--ink); }
.detail-hero, .brief-panel, .split, .contact-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.detail-hero { align-items: center; padding-top: clamp(24px, 3vw, 45px); }
.detail-hero .diagram { height: auto; width: 100%; aspect-ratio: 1.5; }
.detail-hero .phone { width: 17%; }
.feature-title { grid-template-columns: 1fr 1.15fr; align-items: start; }
.feature-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: clamp(25px, 4vw, 52px); }
.feature-list article { border-top: 2px solid var(--line); padding-top: 18px; }
.feature-list h3, .channel-list h3, .related h3 { font-size: 21px; letter-spacing: -.03em; margin-bottom: 10px; }
.brief-panel { padding-block: clamp(40px, 5vw, 72px); }
.brief-panel p, .brief-panel .text-link { margin-top: 16px; }
.related a { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; border-top: 1px solid var(--line); padding: 15px 0; color: var(--blue); }
.related p { margin: 0 0 16px; }
.brief-box { background: #e9edfb; border: 1px solid #d8dff6; border-radius: 8px; padding: clamp(24px, 4vw, 55px); }
.brief-box .eyebrow { font: 600 11px/1.4 var(--mono); }
.brief-box h2 + p, .brief-box .button { margin-top: 20px; }
.brief-box .direct-email { margin-top: 14px; font-size: 14px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.channel-list article { border-top: 1px solid var(--line); padding-block: 19px; }
.channel-list p { font-size: 16px; }
.channel-list .text-link { color: var(--blue); width: fit-content; }
.legal h1 { overflow-wrap: break-word; }
.legal .eyebrow { margin-bottom: 0; }
.legal h1 { margin-top: 18px; }
.text-link { width: fit-content; }

/* Platform illustrations share the scale and geometry of the original marks. */
.diagram-shop { --accent: #47745b; --tint: #bee2ca; background: #e0f0e5; color: #608670; }
.diagram-woo { --accent: #70568b; --tint: #d5c4e5; background: #f1eaf7; color: #8c75a2; }
.store-window, .editor-window, .prototype, .support-panel { position: relative; width: 56%; aspect-ratio: 1.63; border: 1.5px solid var(--accent); border-radius: 5px; background: white; transform: rotate(-6deg); box-shadow: 6px 7px 0 var(--tint); }
.store-window { padding: 5%; }
.store-top { width: 30%; height: 4px; background: var(--accent); margin-bottom: 8%; }
.products { height: 57%; display: flex; gap: 5%; }
.products i { flex: 1; border-radius: 2px; background: linear-gradient(130deg, var(--tint) 58%, var(--accent) 58%); }
.products i:nth-child(2) { transform: scaleY(.84); transform-origin: bottom; }
.store-rule { height: 3px; width: 52%; background: var(--tint); margin-top: 5%; }
.diagram-cms { --accent: #536e98; --tint: #bbcde8; color: #728baa; background: #e7eef7; }
.editor-window { display: flex; overflow: hidden; }
.editor-rail { width: 24%; background: var(--accent); }
.editor-sheet { flex: 1; padding: 10% 6%; }
.editor-sheet b, .editor-sheet i, .editor-sheet strong { display: block; height: 4px; margin-bottom: 7%; background: var(--tint); }
.editor-sheet b { width: 55%; background: var(--accent); }
.editor-sheet strong { height: 28%; }
.diagram-design { --accent: #99673e; --tint: #e2c6ac; color: #a7876a; background: #f5e9dd; }
.prototype { background: #fff9f3; }
.prototype i { width: 7%; aspect-ratio: 1; position: absolute; border: 2px solid var(--accent); background: white; }
.prototype i:nth-child(1) { top: -3%; left: -3%; }.prototype i:nth-child(2) { top: -3%; right: -3%; }
.prototype i:nth-child(3) { bottom: -3%; left: -3%; }.prototype i:nth-child(4) { bottom: -3%; right: -3%; }
.prototype b, .prototype span { position: absolute; inset: 22% 45% 22% 10%; background: var(--tint); border-radius: 2px; }
.prototype span { inset: 25% 10% 65% 63%; background: var(--accent); box-shadow: 0 14px 0 var(--tint); }
.diagram-care { --accent: #4a7076; --tint: #abd4d3; background: #ddedee; color: #6e979c; }
.support-panel { display: grid; align-content: center; padding-inline: 10%; gap: 13%; }
.support-panel i { height: 3px; background: var(--tint); position: relative; }
.support-panel i::after { content: ""; position: absolute; top: -3px; left: 22%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.support-panel i:nth-child(2)::after { left: 64%; }
.support-panel i:nth-child(3)::after { left: 43%; }
@media (max-width: 950px) {
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 30px; }
  .catalog-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 700px) {
  .section-title, .detail-hero, .split, .brief-panel, .contact-columns, .feature-list { grid-template-columns: 1fr; }
  .section-title { gap: 10px; }
  .catalog-pair { grid-template-columns: 1fr; gap: 28px; }
  .detail-hero .diagram { aspect-ratio: 1.9; }
  .feature-list { gap: 18px; }
  .more-services { gap: 6px 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div, .footer-grid nav:last-child { grid-column: 1 / -1; }
  .bar nav { gap: clamp(19px, 6vw, 34px); }
  .contact .actions { flex-wrap: wrap; }
  .brief-box .eyebrow { margin-bottom: 12px; }
}