:root {
  --blue: #0868f2;
  --blue-dark: #0755c6;
  --navy: #0b1933;
  --muted: #66748a;
  --line: #d8e4f3;
  --pale: #f2f7ff;
  --pale-2: #eaf4ff;
  --yellow: #f6d955;
  --shadow: 0 18px 48px rgba(21, 61, 108, .12);
}

body[data-page="process-home"] {
  margin: 0;
  overflow-x: hidden;
  color: var(--navy);
  background: #fff;
  font-family: Inter, Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[data-page="process-home"] *,
body[data-page="process-home"] *::before,
body[data-page="process-home"] *::after { box-sizing: border-box; }
body[data-page="process-home"] h1,
body[data-page="process-home"] h2,
body[data-page="process-home"] h3,
body[data-page="process-home"] p { margin: 0; }
body[data-page="process-home"] .container { width: min(1260px, calc(100% - 48px)); margin-inline: auto; }
body[data-page="process-home"] .button {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--navy);
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
body[data-page="process-home"] .button:hover { transform: translateY(-2px); }
body[data-page="process-home"] .button.primary { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 10px 26px rgba(8, 104, 242, .2); }
body[data-page="process-home"] .button.secondary { color: var(--blue); border-color: #78aef8; background: rgba(255,255,255,.82); }

/* Header */
.process-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
  border-bottom: 1px solid rgba(210, 224, 243, .9);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
}
.process-header .nav-inner {
  width: min(1320px, calc(100% - 48px));
  min-height: 68px;
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.process-header .logo,
.process-footer .logo { display: inline-flex; align-items: flex-end; color: var(--navy); font-size: 25px; font-weight: 800; letter-spacing: -.065em; line-height: 1; text-decoration: none; }
.process-header .logo span,
.process-footer .logo span { width: 7px; height: 7px; margin: 0 0 1px 4px; border-radius: 50%; background: var(--blue); }
.nav-pages { display: flex; justify-content: center; align-items: center; gap: 37px; }
.nav-pages a,
.nav-login { color: #34445b; font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.nav-pages a:hover,
.nav-login:hover { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 26px; }
.nav-login { color: var(--blue); }
.process-header .nav-cta { min-height: 42px; padding-inline: 19px; font-size: 12px; }
.process-header .menu-toggle { display: none; }

/* Hero */
.process-hero {
  position: relative;
  height: 505px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 36%, rgba(160, 202, 255, .25), transparent 34%),
    linear-gradient(145deg, #fff 0%, #f8fbff 50%, #eef6ff 100%);
}
.hero-grid { height: 100%; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 38px; }
.hero-copy { position: relative; z-index: 5; padding-bottom: 8px; }
.hero-copy h1 { max-width: 560px; color: var(--navy); font-size: clamp(66px, 6.3vw, 91px); font-weight: 800; letter-spacing: -.07em; line-height: .88; }
.hero-lead { margin-top: 20px !important; color: #162640; font-size: 18px; font-weight: 720; line-height: 1.3; }
.hero-note { margin-top: 12px !important; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hero-actions { margin-top: 23px; display: flex; gap: 12px; }
.hand-note { width: 220px; margin: 12px 0 0 105px !important; color: #337fe8; font-family: Caveat, "Segoe Print", cursive; font-size: 12px; font-style: italic; transform: rotate(-4deg); }
.hand-note span { margin-right: 10px; font-size: 21px; font-style: normal; }

.hero-composition { position: relative; height: 420px; min-width: 0; }
.ui-window { position: absolute; overflow: hidden; border: 1px solid #cbd9eb; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.ui-builder { z-index: 1; top: 92px; left: 0; width: 43%; height: 282px; transform: rotate(-.5deg); }
.ui-store { z-index: 3; top: 58px; left: 28%; width: 35%; height: 342px; border: 6px solid #15233a; border-radius: 9px; }
.ui-orders { z-index: 2; top: 105px; right: 0; width: 41%; height: 250px; }
.stage-note { position: absolute; z-index: 5; color: #4387e9; font-family: Caveat, "Segoe Print", cursive; font-size: 12px; font-style: italic; transform: rotate(-5deg); }
.stage-note::after { content: "↙"; margin-left: 7px; font-size: 19px; }
.stage-note-one { top: 42px; left: 4%; }
.stage-note-two { top: 8px; left: 38%; }
.stage-note-three { top: 47px; right: 5%; transform: rotate(3deg); }
.ui-top { height: 27px; padding: 0 9px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #e4ebf4; color: #13223b; font-size: 6px; }
.ui-top b { margin-right: auto; font-size: 8px; }
.ui-top span { width: 4px; height: 4px; border-radius: 50%; background: #cbd5e2; }
.mini-app { height: calc(100% - 27px); display: grid; grid-template-columns: 35% 1fr; }
.mini-side { padding: 13px 10px; display: grid; align-content: start; gap: 15px; border-right: 1px solid #e5edf6; color: #718098; font-size: 7px; }
.mini-side b { color: var(--blue); font-size: 8px; }
.mini-side i { font-style: normal; }
.mini-canvas { position: relative; overflow: hidden; padding: 27px 19px; background: #e7ede3; }
.mini-canvas small { color: #52644e; font-size: 6px; text-transform: uppercase; letter-spacing: .13em; }
.mini-canvas strong { position: relative; z-index: 2; display: block; margin-top: 8px; color: #273522; font-family: Georgia, serif; font-size: 21px; font-weight: 500; line-height: 1.02; }
.mini-canvas button,
.store-hero button { position: relative; z-index: 2; margin-top: 14px; padding: 7px 10px; border: 0; border-radius: 3px; color: #fff; background: #31532f; font-size: 6px; }
.plant { position: absolute; right: -13px; bottom: 3px; width: 92px; height: 160px; }
.plant::before { content: ""; position: absolute; bottom: 0; left: 36px; width: 37px; height: 49px; border-radius: 3px 3px 13px 13px; background: #b98a64; }
.plant i { position: absolute; left: 44px; bottom: 40px; width: 36px; height: 56px; border-radius: 100% 0 100% 0; background: #4c7249; transform-origin: left bottom; }
.plant i:nth-child(2) { transform: rotate(55deg) scale(.84); }
.plant i:nth-child(3) { transform: rotate(-70deg) scale(.9); }
.plant i:nth-child(4) { bottom: 76px; transform: rotate(22deg) scale(.72); }
.plant i:nth-child(5) { bottom: 90px; transform: rotate(-38deg) scale(.63); }
.store-head { height: 36px; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; font-size: 7px; }
.store-head b { display: flex; align-items: center; gap: 6px; }
.store-head i { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #47713d; font-style: normal; }
.store-hero { position: relative; height: calc(100% - 36px); overflow: hidden; padding: 27px 17px; background: linear-gradient(150deg, #f7efe3, #e9e1d3); }
.store-hero small { color: #715f4d; font-size: 6px; }
.store-hero strong { position: relative; z-index: 2; display: block; margin-top: 8px; color: #30261e; font-family: Georgia, serif; font-size: 23px; font-weight: 500; line-height: 1.08; }
.bouquet { position: absolute; right: -4px; bottom: -6px; width: 150px; height: 178px; transform: rotate(-7deg); }
.bouquet::before { content: ""; position: absolute; left: 38px; bottom: -20px; width: 95px; height: 125px; clip-path: polygon(0 0, 100% 8%, 69% 100%, 30% 94%); background: linear-gradient(125deg, #f2dfc9, #fff8ed); }
.bouquet::after { content: ""; position: absolute; left: 66px; bottom: 38px; width: 70px; height: 1px; background: #9c8061; transform: rotate(67deg); box-shadow: -16px 6px #9c8061, 15px -5px #9c8061; }
.bouquet span { position: absolute; z-index: 2; width: 38px; height: 38px; border-radius: 50% 40% 50% 45%; background: radial-gradient(circle at 50% 50%, #dfaf75 0 13%, #fff3e6 15% 46%, #e6aab0 48% 66%, transparent 68%); }
.bouquet span:nth-child(1) { top: 20px; left: 34px; }
.bouquet span:nth-child(2) { top: 2px; left: 65px; transform: scale(.9); }
.bouquet span:nth-child(3) { top: 38px; left: 75px; transform: scale(1.15); }
.bouquet span:nth-child(4) { top: 28px; left: 103px; transform: scale(.72); }
.bouquet span:nth-child(5) { top: 66px; left: 45px; transform: scale(.78); }
.bouquet span:nth-child(6) { top: 70px; left: 95px; transform: scale(.92); }
.bouquet span:nth-child(7) { top: 51px; left: 15px; transform: scale(.63); }
.orders-head { height: 59px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e8f3; }
.orders-head b { font-size: 15px; }
.orders-head button,
.app-toolbar button,
.area-head button { padding: 7px 10px; border: 0; border-radius: 4px; color: #fff; background: var(--blue); font-size: 7px; font-weight: 700; }
.order-row { height: 43px; margin: 0 17px; display: grid; grid-template-columns: 55px 1fr 58px; align-items: center; border-bottom: 1px solid #e4ebf4; font-size: 8px; }
.order-row strong { text-align: right; }
.status { width: max-content; padding: 4px 7px; border-radius: 4px; font-size: 7px; font-style: normal; }
.status.new { color: #1260d2; background: #e6f0ff; }
.status.work { color: #b07000; background: #fff1c7; }
.status.done { color: #158554; background: #e3f6ea; }
.status.ship { color: #4964bb; background: #e8edff; }

/* Product index */
.capability-index { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.capability-index .container { height: 64px; display: grid; grid-template-columns: repeat(8, 1fr); }
.capability-index a { min-width: 0; display: flex; justify-content: center; align-items: center; gap: 10px; border-right: 1px solid var(--line); color: #21324a; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.capability-index a:first-child { border-left: 1px solid var(--line); }
.capability-index span { color: var(--blue); font-size: 18px; }

/* Three process rows */
.process-section { background: #fff; }
.process-story { display: grid; grid-template-columns: 145px 1fr; }
.process-rail { position: relative; padding: 28px 18px 0 0; border-left: 1px solid #c9d9ee; }
.process-rail::before { content: ""; position: absolute; top: 28px; left: -6px; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #78adf6; }
.process-rail a { position: relative; margin-bottom: 142px; padding-left: 30px; display: grid; gap: 5px; color: #8795a8; font-size: 11px; text-decoration: none; }
.process-rail a::before { content: ""; position: absolute; top: 4px; left: -6px; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: #c6d8ee; box-shadow: 0 0 0 1px #8eb9f4; }
.process-rail a:first-child::before { opacity: 0; }
.process-rail a span { color: var(--blue); font-size: 13px; font-weight: 700; }
.process-rail a b { color: var(--navy); font-size: 18px; }
.process-rail a small { padding-left: 12px; line-height: 1.5; }
.process-rail a.is-active small:first-of-type { color: var(--blue); font-weight: 700; }
.process-chapters { min-width: 0; }
.process-step { min-height: 365px; padding: 28px 0 27px 40px; display: grid; grid-template-columns: 300px 1fr; gap: 42px; align-items: center; border-bottom: 1px solid #e2eaf4; }
.step-copy .eyebrow,
.examples-section .eyebrow,
.pricing-section .eyebrow,
.home-faq .eyebrow { margin-bottom: 9px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.step-copy h2 { color: var(--navy); font-size: 31px; font-weight: 800; letter-spacing: -.045em; line-height: 1.03; }
.step-copy > p:not(.eyebrow) { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.step-copy ul { margin: 15px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; color: #506078; font-size: 10px; }
.step-copy li::before { content: "✓"; margin-right: 9px; color: var(--blue); font-weight: 800; }
.outcome { margin-top: 17px; padding: 11px 13px; border-radius: 6px; color: #2570d9; background: #eaf3ff; font-size: 10px; line-height: 1.35; }
.outcome span { width: 26px; height: 26px; margin-right: 9px; display: inline-grid; place-items: center; float: left; border-radius: 50%; color: #fff; background: var(--blue); font-size: 15px; }
.drawn-ui { min-width: 0; height: 310px; overflow: hidden; border: 1px solid #cfdeef; border-radius: 7px; background: #fff; box-shadow: 0 14px 35px rgba(23, 64, 112, .1); }
.app-toolbar { height: 41px; padding: 0 13px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #dfe8f3; color: #718096; font-size: 8px; }
.app-toolbar b { margin-right: auto; color: var(--navy); font-size: 10px; }
.app-layout { height: calc(100% - 41px); display: grid; grid-template-columns: 91px 1fr 95px; }
.app-sidebar { padding: 16px 13px; display: grid; align-content: start; gap: 17px; border-right: 1px solid #e1e9f3; color: #77869a; font-size: 8px; }
.app-sidebar b { color: var(--blue); }
.app-sidebar i { font-style: normal; }
.page-preview { position: relative; overflow: hidden; padding: 34px 30px; background: #efe8db; }
.page-preview small { color: #8c684b; font-size: 6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page-preview strong { position: relative; z-index: 2; display: block; margin-top: 8px; font-family: Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1; }
.page-preview button { margin-top: 16px; padding: 8px 12px; border: 0; border-radius: 3px; color: #fff; background: #7f553c; font-size: 7px; }
.food-plate { position: absolute; top: 22px; right: 12px; width: 155px; height: 155px; border: 11px solid #fafafa; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #8c512e 0 20%, #d99a51 22% 31%, #839b4c 33% 46%, #ede2ca 48%); box-shadow: 0 10px 28px rgba(76,51,30,.2); }
.food-plate i { position: absolute; width: 30px; height: 16px; border-radius: 60% 30%; background: #758d43; }
.food-plate i:nth-child(1) { left: 24px; top: 39px; transform: rotate(40deg); }
.food-plate i:nth-child(2) { right: 25px; top: 31px; transform: rotate(-30deg); }
.food-plate i:nth-child(3) { left: 40px; bottom: 23px; transform: rotate(-40deg); }
.food-plate i:nth-child(4) { right: 30px; bottom: 31px; transform: rotate(35deg); }
.food-plate i:nth-child(5) { left: 62px; top: 24px; background: #d65c36; }
.preview-cards { position: absolute; right: 0; bottom: 0; left: 0; height: 57px; padding: 10px 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; background: #fff; }
.preview-cards span { border-radius: 3px; background: linear-gradient(135deg,#d6c4a6,#f2e9db); }
.style-panel { padding: 15px 11px; display: grid; align-content: start; gap: 10px; border-left: 1px solid #e0e9f3; color: #748399; font-size: 7px; }
.style-panel b { color: var(--navy); font-size: 9px; }
.style-panel > span { padding: 8px; border-radius: 3px; background: #eef4fb; font-size: 12px; }
.style-panel div { display: flex; gap: 4px; }
.style-panel div i { width: 10px; height: 10px; border-radius: 50%; background: #172236; }
.style-panel div i:nth-child(2) { background: #b27654; }
.style-panel div i:nth-child(3) { background: #f2d8ab; }
.style-panel div i:nth-child(4) { background: #d8e7fb; }

.catalog-layout { height: calc(100% - 41px); display: grid; grid-template-columns: 92px 1fr 139px; }
.product-area { min-width: 0; padding: 17px; }
.area-head { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.product-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.product-grid article { min-width: 0; padding: 6px; border: 1px solid #e1e9f3; border-radius: 4px; }
.product-grid article b,
.product-grid article strong { display: block; overflow: hidden; font-size: 6px; white-space: nowrap; }
.product-grid article strong { margin-top: 6px; font-size: 8px; }
.product-flower { position: relative; height: 103px; margin-bottom: 8px; overflow: hidden; border-radius: 3px; background: linear-gradient(150deg,#eef0df,#dce5d5); }
.product-flower::before { content: ""; position: absolute; top: 22px; left: 50%; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle,#e4a761 0 12%,#f5d4d6 13% 43%,#b0c49a 45% 62%,transparent 64%); transform: translateX(-50%); box-shadow: -20px 12px 0 -8px #c98d91, 22px 10px 0 -9px #f2d7a4; }
.product-flower::after { content: ""; position: absolute; right: 19px; bottom: -12px; left: 19px; height: 57px; clip-path: polygon(20% 0,80% 0,100% 100%,0 100%); background: #f2e1c7; }
.product-flower.sun { background: linear-gradient(145deg,#f2e3c4,#e9d7a9); }
.product-flower.sun::before { filter: hue-rotate(35deg) saturate(1.35); }
.product-flower.pink { background: linear-gradient(145deg,#f0e4e7,#e3d4dd); }
.product-flower.pink::before { filter: hue-rotate(290deg); }
.qr-panel { padding: 26px 14px 11px; display: grid; place-items: center; align-content: center; gap: 10px; border-left: 1px solid #e0e8f2; background: linear-gradient(150deg,#f8f3e8,#e9dfce); color: #3e4f3e; text-align: center; transform: rotate(1deg); }
.qr-panel b { font-family: Georgia,serif; font-size: 11px; }
.qr-code { width: 70px; height: 70px; border: 7px solid #fff; background: repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0/10px 10px; box-shadow: 0 4px 15px rgba(0,0,0,.12); }
.qr-panel strong { font-size: 7px; line-height: 1.4; }
.qr-panel small { font-size: 6px; font-weight: 800; }

.dashboard-layout { height: calc(100% - 41px); display: grid; grid-template-columns: 92px 1fr; }
.dashboard-main { min-width: 0; padding: 15px 18px; }
.dashboard-tabs { display: flex; gap: 23px; color: #67758a; font-size: 7px; }
.dashboard-tabs b:first-child { color: var(--blue); }
.dashboard-tabs span { margin-left: 3px; padding: 2px 5px; border-radius: 5px; background: #edf3fb; }
.data-head,
.data-row { display: grid; grid-template-columns: 45px 1fr 65px 80px 75px; align-items: center; }
.data-head { height: 31px; margin-top: 12px; padding: 0 10px; border: 1px solid #e0e9f4; border-radius: 4px 4px 0 0; color: #8592a5; font-size: 6px; }
.data-row { height: 31px; padding: 0 10px; border: 1px solid #e7edf5; border-top: 0; color: #647388; font-size: 7px; }
.data-row b { color: #33435b; }
.data-row .status { font-size: 6px; }
.team-line { margin-top: 16px; display: flex; align-items: center; gap: 7px; color: #65758b; font-size: 6px; }
.team-line > b { margin-right: auto; color: var(--navy); font-size: 8px; }
.team-line > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #e7eef8; color: #3c506c; font-size: 7px; font-weight: 800; }

/* Journey */
.journey-section { padding: 34px 0 38px; background: linear-gradient(90deg,#edf6ff,#f6faff); font-synthesis: none; }
.journey-section > .container > h2 { margin-bottom: 32px; font-size: 29px; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.journey-grid { display: grid; grid-template-columns: 1fr 1fr; }
.journey-grid article { min-width: 0; padding-right: 38px; }
.journey-grid article + article { padding: 0 0 0 50px; border-left: 1px solid #bdd4ef; }
.journey-grid h3 { margin-bottom: 17px; font-size: 10px; line-height: 1.4; letter-spacing: 0; }
.journey-grid ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; font-family: inherit; line-height: 1.48; }
.journey-grid li { position: relative; color: #56667d; font-size: 8px; line-height: 1.48; letter-spacing: 0; text-align: center; }
.journey-grid li:not(:last-child)::after { content: "→"; position: absolute; top: 14px; right: -4px; color: #92b8e8; font-size: 14px; }
.journey-grid li span { width: 42px; height: 42px; margin: 0 auto 9px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #fff; box-shadow: 0 6px 18px rgba(39,96,163,.09); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* Examples */
.examples-section { padding: 34px 0 38px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-heading h2 { font-size: 31px; font-weight: 800; letter-spacing: -.045em; }
.section-heading p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: 10px; }
.text-link { color: var(--blue) !important; font-size: 10px !important; font-weight: 700; text-decoration: none; }
.business-tabs { margin: 20px 0 17px; display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.business-tabs button { height: 41px; border: 0; border-right: 1px solid var(--line); color: #506079; background: #fff; font: inherit; font-size: 9px; cursor: pointer; }
.business-tabs button:last-child { border-right: 0; }
.business-tabs button[aria-selected="true"] { color: #fff; background: var(--blue); font-weight: 750; }
.example-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.example-card { min-width: 0; color: var(--navy); text-decoration: none; }
.example-card > b { margin-top: 9px; display: block; font-size: 11px; }
.example-card > small { margin-top: 3px; display: block; color: var(--muted); font-size: 9px; }
.example-art { position: relative; height: 204px; overflow: hidden; padding: 19px 21px; border-radius: 5px; color: #fff; background: #30483c; transition: transform .2s ease; }
.example-card:hover .example-art { transform: translateY(-3px); }
.example-brand { position: relative; z-index: 3; display: block; font-size: 7px; font-weight: 800; }
.example-art strong { position: relative; z-index: 3; display: block; margin-top: 34px; font-family: Georgia,serif; font-size: 24px; font-weight: 500; line-height: 1.05; }
.example-art em { position: absolute; z-index: 3; bottom: 17px; left: 21px; padding: 7px 10px; border-radius: 3px; color: #283b33; background: #fff; font-size: 6px; font-style: normal; }
.art-shape { position: absolute; right: -18px; bottom: -26px; width: 205px; height: 205px; border-radius: 49% 51% 0 52%; background: radial-gradient(circle at 44% 38%,rgba(255,255,255,.5),transparent 5%), radial-gradient(circle at 49% 44%,#e8b9a0 0 8%,#f2d7cc 9% 18%,transparent 19%), radial-gradient(circle at 65% 40%,#e0b07c 0 7%,#f0dfc2 8% 17%,transparent 18%), radial-gradient(circle at 56% 58%,#a4b694 0 11%,transparent 12%), linear-gradient(140deg,#a3b49a,#475b4c); opacity: .95; transform: rotate(-8deg); }
.theme-food .example-art { background: #5e3e29; }
.theme-food .art-shape { background: radial-gradient(circle at 50% 50%,#b86231 0 14%,#e3b36c 15% 30%,#7a8f4e 31% 43%,#e6d8bd 44% 54%,transparent 55%), linear-gradient(140deg,#3f2417,#ad7c55); }
.theme-coffee .example-art { background: #574335; }
.theme-coffee .art-shape { border-radius: 50%; background: radial-gradient(ellipse at 50% 55%,#5d3724 0 27%,#d6b38c 28% 34%,#f5eee5 35% 50%,transparent 51%), linear-gradient(145deg,#a9896c,#4a3325); }
.theme-service .example-art { background: #272d3d; }
.theme-service .art-shape { background: linear-gradient(130deg,transparent 0 30%,#8e9ab2 31% 36%,#d2b37e 37% 47%,#546077 48% 58%,transparent 59%), linear-gradient(160deg,#56627c,#181e2c); }
.theme-beauty .example-art { background: #6f4057; }
.theme-beauty .art-shape { background: radial-gradient(circle at 52% 42%,#dba4ad 0 12%,#f0d5cd 13% 25%,transparent 26%), linear-gradient(140deg,#cf9faf,#503242); }
.theme-festival .example-art { background: #2f1c4c; }
.theme-festival .art-shape { background: radial-gradient(circle at 60% 35%,#f6cb50 0 8%,transparent 9%), linear-gradient(135deg,transparent 0 30%,#ec586a 31% 45%,#50a7d9 46% 58%,#713d9b 59%); }
.theme-park .example-art { background: #174c52; }
.theme-park .art-shape { border-radius: 50%; background: repeating-conic-gradient(from 0deg,#e7c960 0 8deg,transparent 9deg 18deg), radial-gradient(circle,#28565c 0 50%,transparent 51%); }
.theme-self .example-art { background: #31415c; }
.theme-self .art-shape { background: linear-gradient(145deg,transparent 0 35%,#d7b890 36% 58%,#7a91ae 59% 70%,transparent 71%),linear-gradient(135deg,#61728a,#27364d); }

/* Pricing */
.pricing-section { padding: 32px 0 34px; background: var(--pale); }
.pricing-section .section-heading h2 { max-width: 480px; font-size: 27px; }
.process-plans { margin-top: 19px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.process-plans .plan { position: relative; min-height: 286px; padding: 20px 22px; display: flex; flex-direction: column; border: 1px solid #d2e0f0; border-radius: 6px; background: #fff; }
.process-plans .plan.featured { border-color: #f1c91c; box-shadow: inset 0 4px var(--yellow); }
.plan-overline { color: var(--muted); font-size: 8px; }
.process-plans h3 { margin-top: 5px; font-size: 15px; }
.price { margin: 12px 0 10px !important; font-size: 29px; font-weight: 800; letter-spacing: -.04em; }
.price span { font-size: 10px; font-weight: 650; }
.process-plans ul { margin: 0 0 15px; padding: 0; display: grid; gap: 6px; list-style: none; color: #607087; font-size: 9px; }
.process-plans li::before { content: "✓"; margin-right: 8px; color: var(--blue); }
.process-plans .button { width: 100%; min-height: 35px; margin-top: auto; font-size: 9px; }
.plan-badge { position: absolute; top: 14px; right: 18px; padding: 4px 8px; border-radius: 12px; background: var(--yellow); font-size: 7px; font-weight: 800; }

/* FAQ and footer */
.home-faq { padding-block: 28px 0; display: grid; grid-template-columns: 210px 1fr; gap: 56px; }
.faq-title h2 { font-size: 14px; letter-spacing: -.02em; }
.faq-title a { margin-top: 12px; display: inline-block; color: var(--blue); font-size: 9px; text-decoration: none; }
.home-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.home-faq details { border-bottom: 1px solid #dce6f2; }
.home-faq summary { min-height: 43px; padding: 0; display: flex; justify-content: space-between; align-items: center; color: #34445a; font-size: 9px; font-weight: 650; cursor: pointer; list-style: none; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary span { color: var(--blue); font-size: 13px; }
.home-faq details p { padding: 0 20px 12px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.footer-cta { color: #fff; background: linear-gradient(100deg,#0d2b52,#071a34); }
.footer-cta .container { min-height: 86px; display: grid; grid-template-columns: auto 150px 1fr auto 150px; gap: 25px; align-items: center; }
.process-footer .light-logo { color: #fff; font-size: 22px; }
.process-footer .light-logo span { background: #fff; }
.footer-cta p { color: #aebfd2; font-size: 8px; line-height: 1.45; }
.footer-cta h2 { text-align: center; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.footer-cta .button { min-height: 39px; padding-inline: 23px; color: #233045; background: var(--yellow); font-size: 10px; }
.footer-legal { background: #fff; }
.footer-legal .container { min-height: 61px; display: grid; grid-template-columns: 1fr 2fr 1.5fr; align-items: center; color: #8a96a7; font-size: 7px; }
.footer-legal nav { display: flex; justify-content: center; gap: 28px; }
.footer-legal nav:last-child { justify-content: flex-end; }
.footer-legal a { color: inherit; text-decoration: none; }

@media (max-width: 1120px) {
  .process-header .nav-inner { grid-template-columns: auto 1fr auto; }
  .process-header .menu-toggle { grid-column: 3; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--navy); background: #fff; font-size: 19px; }
  .process-header .nav-actions { margin-left: auto; }
  .process-header #main-menu { position: absolute; top: 68px; right: 24px; left: 24px; padding: 14px; display: none; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
  .process-header #main-menu.is-open { display: grid; }
  .process-header #main-menu a { padding: 11px; }
  .hero-grid { grid-template-columns: .72fr 1.28fr; gap: 15px; }
  .hero-copy h1 { font-size: clamp(63px,8vw,82px); }
  .hero-composition { transform: scale(.92); transform-origin: right center; }
  .process-step { grid-template-columns: 270px 1fr; gap: 25px; }
  .drawn-ui { height: 285px; }
  .app-layout { grid-template-columns: 76px 1fr 80px; }
  .catalog-layout { grid-template-columns: 78px 1fr 112px; }
}

@media (max-width: 840px) {
  body[data-page="process-home"] .container { width: min(100% - 32px,720px); }
  .process-header .nav-inner { width: calc(100% - 32px); }
  .process-header .nav-login { display: none; }
  .process-hero { height: auto; min-height: 780px; padding: 48px 0 32px; }
  .hero-grid { display: block; }
  .hero-copy { text-align: center; }
  .hero-copy h1 { margin-inline: auto; font-size: clamp(68px,13vw,92px); }
  .hero-actions { justify-content: center; }
  .hand-note { margin-inline: auto !important; }
  .hero-composition { width: min(690px,100%); height: 390px; margin: 30px auto 0; transform: none; }
  .capability-index .container { width: 100%; overflow-x: auto; grid-template-columns: repeat(8,130px); }
  .process-story { display: block; }
  .process-rail { position: sticky; top: 68px; z-index: 50; margin-inline: -16px; padding: 0 16px; display: grid; grid-template-columns: repeat(3,1fr); border: 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
  .process-rail::before { display: none; }
  .process-rail a { margin: 0; padding: 13px 8px; display: flex; justify-content: center; gap: 7px; }
  .process-rail a::before,
  .process-rail a small { display: none; }
  .process-rail a b { font-size: 12px; }
  .process-step { min-height: 0; padding: 45px 0; grid-template-columns: 1fr; }
  .step-copy { max-width: 500px; }
  .drawn-ui { height: 320px; }
  .journey-grid { grid-template-columns: 1fr; gap: 27px; }
  .journey-grid article + article { padding: 27px 0 0; border: 0; border-top: 1px solid #bdd4ef; }
  .example-art { height: 175px; }
  .process-plans { gap: 8px; }
  .process-plans .plan { padding-inline: 14px; }
  .footer-cta .container { grid-template-columns: auto 1fr auto; }
  .footer-cta p { display: none; }
  .footer-legal .container { grid-template-columns: 1fr auto; }
  .footer-legal nav:first-of-type { display: none; }
}

@media (max-width: 600px) {
  body[data-page="process-home"] .container { width: calc(100% - 28px); }
  .process-header .nav-inner { width: calc(100% - 28px); min-height: 62px; }
  .process-header #main-menu { top: 62px; right: 14px; left: 14px; }
  body[data-page="process-home"] .process-header .nav-cta { display: none; }
  .process-hero { min-height: 682px; padding-top: 34px; }
  .hero-copy h1 { font-size: clamp(58px,18vw,74px); }
  .hero-lead { margin-top: 17px !important; font-size: 16px; }
  .hero-note { font-size: 11px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: min(100%,310px); margin-inline: auto; }
  .hand-note { display: none; }
  .hero-composition { height: 290px; margin-top: 23px; }
  .ui-builder { top: 69px; left: -22px; width: 60%; height: 199px; }
  .ui-store { top: 38px; left: 34%; width: 42%; height: 250px; border-width: 4px; }
  .ui-orders { top: 83px; right: -24px; width: 48%; height: 178px; }
  .stage-note { font-size: 8px; }
  .stage-note-one { top: 40px; left: 0; }
  .stage-note-two { top: 5px; left: 35%; }
  .stage-note-three { top: 50px; right: 0; }
  .mini-side { padding: 8px 6px; gap: 9px; font-size: 5px; }
  .mini-canvas { padding: 18px 10px; }
  .mini-canvas strong { font-size: 13px; }
  .plant { transform: scale(.65); transform-origin: bottom right; }
  .store-hero { padding: 16px 9px; }
  .store-hero strong { font-size: 15px; }
  .bouquet { transform: rotate(-7deg) scale(.64); transform-origin: bottom right; }
  .orders-head { height: 42px; padding-inline: 9px; }
  .orders-head b { font-size: 10px; }
  .orders-head button { font-size: 5px; }
  .order-row { height: 31px; margin-inline: 8px; grid-template-columns: 33px 1fr 38px; font-size: 5px; }
  .status { padding: 3px 4px; font-size: 5px; }
  .process-rail { top: 62px; }
  .step-copy h2 { font-size: 30px; }
  .drawn-ui { height: 255px; }
  .app-toolbar { height: 34px; }
  .app-layout,
  .catalog-layout { height: calc(100% - 34px); grid-template-columns: 57px 1fr; }
  .app-sidebar { padding: 10px 7px; gap: 11px; font-size: 6px; }
  .style-panel,
  .qr-panel { display: none; }
  .page-preview { padding: 25px 13px; }
  .page-preview strong { font-size: 19px; }
  .food-plate { right: -30px; width: 125px; height: 125px; }
  .product-area { padding: 10px; }
  .product-grid { gap: 4px; }
  .product-flower { height: 78px; }
  .dashboard-layout { height: calc(100% - 34px); grid-template-columns: 57px 1fr; }
  .dashboard-main { padding: 10px 8px; }
  .dashboard-tabs { gap: 9px; }
  .data-head,
  .data-row { grid-template-columns: 32px 1fr 47px 56px; }
  .data-head b:last-child,
  .data-row > span:last-child { display: none; }
  .team-line { overflow: hidden; }
  .journey-section > .container > h2 { font-size: 25px; }
  .journey-grid article { padding-right: 0; }
  .journey-grid h3 { font-size: 9px; }
  .journey-grid li { font-size: 7px; }
  .journey-grid li span { width: 34px; height: 34px; }
  .section-heading { display: block; }
  .section-heading .text-link { display: inline-flex; margin-top: 13px; }
  .business-tabs { overflow-x: auto; grid-template-columns: repeat(5,100px); }
  .example-cards { grid-template-columns: 1fr; gap: 18px; }
  .example-art { height: 188px; }
  .process-plans { grid-template-columns: 1fr; gap: 10px; }
  .process-plans .plan { min-height: 250px; }
  .home-faq { display: block; }
  .home-faq-list { margin-top: 18px; grid-template-columns: 1fr; }
  .footer-cta .container { min-height: 132px; grid-template-columns: 1fr auto; }
  .footer-cta .logo { display: none; }
  .footer-cta h2 { text-align: left; font-size: 24px; }
  .footer-legal .container { min-height: 84px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 13px; }
  .footer-legal nav:last-child { flex-wrap: wrap; justify-content: flex-start; gap: 14px; }
}

/* Generated product imagery */
.hero-product-image {
  position: absolute;
  z-index: 2;
  top: 40px;
  left: -2%;
  width: 104%;
  height: 365px;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(25, 65, 116, .12));
}
.hero-composition > .ui-window { display: none; }
.drawn-ui > :not(.feature-image) { display: none !important; }
.feature-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.example-art::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(244,249,255,.98) 0%, rgba(244,249,255,.82) 34%, rgba(244,249,255,.08) 68%, transparent 100%); }
.example-art img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.example-art .art-shape { display: none; }
.example-brand,
.example-art strong,
.example-art em { color: var(--navy); }
.example-art em { color: #fff; background: var(--blue); }
.theme-food .example-art,
.theme-coffee .example-art,
.theme-service .example-art,
.theme-beauty .example-art,
.theme-festival .example-art,
.theme-park .example-art,
.theme-self .example-art { background: #edf5ff; }

/* Tariff badge: independent from the text flow */
.process-plans { padding-top: 8px; }
.process-plans .plan.featured { border-color: var(--blue); box-shadow: inset 0 4px var(--blue); }
.process-plans .plan-badge { top: -11px; right: 17px; left: auto; width: auto; max-width: max-content; padding: 5px 10px; color: #fff; background: var(--blue); line-height: 1; white-space: nowrap; }

/* Full footer based on the production Tokego information architecture */
.process-footer { margin-top: 0; color: #fff; background: #071a34; }
.footer-cta { border-bottom: 1px solid rgba(178,205,238,.18); background: linear-gradient(100deg,#0d2b52,#071a34); }
.footer-cta .container { min-height: 126px; display: grid; grid-template-columns: 170px 1fr auto; gap: 46px; align-items: center; }
.footer-cta .footer-kicker { margin-bottom: 6px; color: #8fb1d8; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.footer-cta h2 { color: #fff; text-align: left; font-size: 28px; line-height: 1.08; }
.footer-cta .button { min-height: 44px; color: var(--blue); background: #fff; font-size: 11px; }
.footer-directory { padding: 46px 0 42px; }
.footer-directory .container { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 70px; }
.footer-directory .footer-about p { max-width: 210px; margin-top: 18px; color: #9eb3cc; font-size: 11px; line-height: 1.65; }
.footer-directory h3 { margin: 0 0 16px; color: #fff; font-size: 11px; }
.footer-directory nav { display: grid; align-content: start; gap: 10px; }
.footer-directory nav a { color: #9eb3cc; font-size: 10px; text-decoration: none; }
.footer-directory nav a:hover { color: #fff; }
.footer-legal { border-top: 1px solid rgba(178,205,238,.16); background: #071a34; }
.footer-legal .container { min-height: 104px; display: grid; grid-template-columns: 1.25fr 1.4fr 1fr; gap: 28px; align-items: center; color: #728aa6; font-size: 8px; }
.footer-legal nav { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px 18px; }
.footer-legal p { color: #728aa6; font-size: 8px; line-height: 1.6; }
.footer-legal span { text-align: right; }

@media (max-width: 1120px) {
  .hero-product-image { left: 0; width: 100%; }
  .footer-directory .container { gap: 36px; }
}

@media (max-width: 840px) {
  .hero-product-image { top: 30px; left: 0; width: 100%; height: 350px; }
  .footer-cta .container { grid-template-columns: 120px 1fr auto; gap: 24px; }
  .footer-directory .container { grid-template-columns: repeat(2,1fr); gap: 38px; }
  .footer-legal .container { grid-template-columns: 1fr 1fr; }
  .footer-legal span { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 600px) {
  .hero-product-image { top: 26px; left: -34%; width: 168%; height: 265px; max-width: none; }
  .stage-note { z-index: 4; }
  .feature-image { object-position: center; }
  .example-art::after { background: linear-gradient(90deg, rgba(244,249,255,.98), rgba(244,249,255,.58) 54%, transparent); }
  .footer-cta .container { min-height: 176px; display: grid; grid-template-columns: 1fr; gap: 16px; align-content: center; }
  .footer-cta .logo { display: inline-flex; }
  .footer-cta h2 { font-size: 27px; }
  .footer-cta .button { width: 100%; }
  .footer-directory { padding-block: 38px; }
  .footer-directory .container { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-directory nav:last-child { grid-column: 1 / -1; }
  .footer-legal .container { min-height: 170px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; }
  .footer-legal nav:first-child { display: flex; }
}

/* Две половины блока «Клиенту удобно. Команде понятно.» должны стоять вровень:
   у левой заголовка не было, и её шаги висели выше правых. Теперь заголовок
   есть у обеих, он крупнее (было 10px — почти не читался) и с воздухом снизу. */
.journey-grid h3 { margin-bottom: 26px; font-size: 15px; font-weight: 700;
  line-height: 1.35; color: #1b2a44; letter-spacing: -.01em; }
.journey-grid article { display: flex; flex-direction: column; }
.journey-grid article > ol { margin-top: auto; }
@media (max-width: 720px) { .journey-grid h3 { font-size: 14px; margin-bottom: 18px; } }