@import url('https://fonts.googleapis.com/css2?family=Huninn&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --paper: #FFFCF6;
  --ink: #3E3A39;
  --coral: #F2A497;
  --yellow: #F6D27A;
  --blue: #A8D3E6;
  --green: #B9DAA5;
  --white: #FFFFFF;
  --border: 3px solid var(--ink);
  --radius: 28px;
  --hand: "Huninn", "Noto Sans TC", sans-serif;
  --body: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 16px/1.85 var(--body); overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--coral); }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 5px; }
svg { display: block; max-width: 100%; }
.container { width: min(1140px, calc(100% - 36px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 200; top: -90px; left: 16px; background: var(--yellow); border: var(--border); padding: 8px 16px; }
.skip-link:focus { top: 16px; }
.hand, h1, h2, h3, .brand-text, .section-kicker, .btn, .eyebrow, .tiny-label { font-family: var(--hand); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.9rem, 7.6vw, 5.4rem); line-height: 1.2; letter-spacing: -.065em; margin-bottom: 22px; }
h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.24; letter-spacing: -.05em; margin-bottom: 15px; }
h3 { font-size: 1.45rem; line-height: 1.35; margin-bottom: 10px; }
p { line-height: 1.95; }
.section { padding: clamp(66px, 10vw, 116px) 0; }
.section-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .96rem; font-weight: 800; letter-spacing: .045em; margin-bottom: 14px; }
.section-kicker:before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); }
.section-heading { max-width: 710px; margin-bottom: 35px; }
.section-heading p { font-size: 1.06rem; margin-bottom: 0; }
.muted { opacity: .82; }
.tiny-label { font-weight: 800; font-size: .75rem; letter-spacing: .1em; }
.chip { display: inline-flex; gap: 8px; align-items: center; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 13px; font: 700 .86rem/1.65 var(--hand); }
.chip--green { background: var(--green); }
.chip--blue { background: var(--blue); }
.chip--yellow { background: var(--yellow); }
.chip--coral { background: var(--coral); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 23px; min-height: 55px; font-size: 1.05rem; font-weight: 800; border: var(--border); border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--white); transition: transform .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-3px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn--coral { background: var(--coral); }
.btn--yellow { background: var(--yellow); }
.btn--green { background: var(--green); }
.btn--small { min-height: 43px; padding: 5px 14px; font-size: .88rem; border-width: 2px; border-radius: 13px; }
.btn--link { background: transparent; }
.btn-arrow { font-size: 1.35em; line-height: 1; }

.site-header { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 79px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; width: 46px; height: 46px; }
.brand-text { display: flex; flex-direction: column; font-size: 1.52rem; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; }
.brand-text small { margin-top: 4px; font: 700 .62rem/1.3 var(--body); letter-spacing: .16em; }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 28px); }
.nav-links a:not(.btn) { font: 800 .93rem var(--hand); text-decoration: none; }
.nav-links a:not(.btn):hover { text-decoration: underline 2px; text-underline-offset: 8px; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-link { font: 800 .82rem var(--hand); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 11px; background: var(--paper); text-decoration: none; }
.menu-toggle { display: none; align-items: center; gap: 7px; border: 2px solid var(--ink); padding: 7px 12px; border-radius: 12px; background: var(--yellow); font: 800 .9rem var(--hand); }

.hero { padding: clamp(50px, 7vw, 88px) 0 65px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(30px, 6vw, 75px); }
.hero-top { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 29px; }
.hero h1 em { font-style: normal; position: relative; z-index: 0; white-space: normal; }
.hero h1 em:after { position: absolute; content: ""; height: .27em; left: 0; right: 0; bottom: .09em; background: var(--yellow); z-index: -1; border-radius: 7px; }
.hero-lead { font-size: clamp(1.09rem, 2vw, 1.23rem); font-weight: 600; max-width: 540px; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-footnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .83rem; font-weight: 700; }
.hero-footnote span+span:before { content: "✳"; margin-right: 8px; }
.illustration-frame { border: var(--border); border-radius: 38px; background: var(--blue); overflow: hidden; position: relative; }
.illustration-frame:after { content: ""; display: block; position: absolute; inset: 12px; border: 2px dashed rgba(62,58,57,.22); border-radius: 27px; pointer-events: none; }
.hero-illustration { width: 100%; height: auto; }
.float-a { transform-box: fill-box; transform-origin: center; animation: float 5s ease-in-out infinite; }
.float-b { transform-box: fill-box; transform-origin: center; animation: float 6s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.tape { width: 76px; height: 23px; background: var(--yellow); border: 2px solid var(--ink); transform: rotate(-9deg); position: absolute; top: -12px; left: 20%; z-index: 1; }

.fact-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.fact { border: var(--border); border-radius: 20px; padding: 20px; background: var(--white); min-width: 0; }
.fact:nth-child(2) { background: var(--yellow); }
.fact:nth-child(3) { background: var(--green); }
.fact strong { display: block; font: 900 clamp(1.5rem,3vw,2.1rem)/1.25 var(--hand); margin: 5px 0 2px; }
.fact span:last-child { font-size: .88rem; }

.paper-area { background: var(--white); border-top: var(--border); border-bottom: var(--border); }
.what-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.what-card { padding: 27px 25px 25px; border: var(--border); border-radius: var(--radius); background: var(--paper); position: relative; }
.what-card:nth-child(2) { background: var(--yellow); }
.what-card:nth-child(3) { background: var(--green); }
.icon-box { width: 82px; height: 82px; margin-bottom: 21px; }
.what-card p { margin: 0; }
.card-index { position: absolute; top: 22px; right: 22px; font: 800 .86rem var(--hand); opacity: .7; }

.product-top { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: end; margin-bottom: 30px; }
.product-top p { margin-bottom: 0; }
.note-paper { background: var(--yellow); border: var(--border); border-radius: 19px; padding: 20px 24px; transform: rotate(1deg); }
.note-paper p { margin: 0; font-size: .94rem; }
.demo-shell { border: var(--border); border-radius: 34px; overflow: hidden; background: var(--paper); }
.demo-topbar { padding: 17px 23px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--green); border-bottom: var(--border); }
.demo-topbar strong { font: 900 1.24rem var(--hand); }
.demo-topbar p { margin: 0; font-size: .83rem; }
.demo-dots { display: flex; gap: 6px; }
.demo-dots i { width: 12px; height: 12px; display: block; border: 2px solid var(--ink); border-radius: 50%; }
.demo-dots i:nth-child(1) { background: var(--coral); } .demo-dots i:nth-child(2) { background: var(--yellow); } .demo-dots i:nth-child(3) { background: var(--blue); }
.demo-wrap { padding: clamp(17px, 3vw, 33px); }
.demo-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.demo-tab { border: 2px solid var(--ink); padding: 7px 17px; border-radius: 999px; font: 800 .98rem var(--hand); background: var(--white); }
.demo-tab[aria-selected="true"] { background: var(--yellow); }
.demo-content { display: grid; grid-template-columns: minmax(0,1.24fr) minmax(0,.76fr); gap: 20px; }
.demo-card { background: var(--white); border: 2px solid var(--ink); border-radius: 22px; padding: 24px; min-width: 0; }
.demo-card h3 { margin: 0 0 17px; }
.demo-card h4 { margin: 18px 0 9px; font: 900 1rem var(--hand); }
.field-options { display: flex; gap: 9px; flex-wrap: wrap; }
.pick { border: 2px solid var(--ink); background: var(--paper); border-radius: 12px; padding: 7px 13px; font: 700 .94rem var(--hand); }
.pick[aria-pressed="true"] { background: var(--blue); }
.pick--date[aria-pressed="true"] { background: var(--green); }
.pick--time[aria-pressed="true"] { background: var(--yellow); }
.summary-card { background: var(--yellow); }
.summary-list { margin: 12px 0 23px; }
.summary-list dt { font-size: .8rem; font-weight: 700; margin-top: 10px; }
.summary-list dd { margin: 0; font: 800 1.13rem/1.6 var(--hand); }
.summary-card .btn { width: 100%; }
.demo-status { margin: 13px 0 0; padding: 9px 11px; background: var(--white); border: 2px dashed var(--ink); border-radius: 13px; font-weight: 700; font-size: .89rem; min-height: 44px; }
.demo-caption { margin: 18px 0 0; font-size: .84rem; }
.demo-manager { display: none; grid-column: 1/-1; }
.demo-manager.is-active { display: grid; grid-template-columns: 1fr .86fr; gap: 20px; }
.demo-guest.is-hidden { display: none; }
.sample-board { background: var(--blue); border: 2px solid var(--ink); border-radius: 21px; padding: 22px; }
.sample-board strong { font: 900 1.15rem var(--hand); }
.sample-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 3px; border-bottom: 2px dashed rgba(62,58,57,.35); font-size: .92rem; }
.sample-row:last-child { border-bottom: none; }
.admin-toggle { margin-top: 16px; }

.workflow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.step { position: relative; border: var(--border); border-radius: 24px; padding: 27px 24px 19px; background: var(--white); }
.step:nth-child(2) { background: var(--blue); } .step:nth-child(3) { background: var(--coral); }
.step-no { display: inline-block; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--yellow); font: 900 1.1rem var(--hand); transform: rotate(-5deg); margin-bottom: 22px; }
.step p { margin-bottom: 0; }

.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; }
.about-sheet, .about-postcard { border: var(--border); border-radius: 28px; padding: clamp(26px, 4vw, 45px); background: var(--paper); }
.about-sheet p { max-width: 620px; font-size: 1.08rem; }
.about-sheet ul { padding-left: 1.3em; margin-bottom: 0; }
.about-sheet li { margin-bottom: 6px; }
.about-postcard { background: var(--green); display: flex; flex-direction: column; justify-content: space-between; }
.postcard-stamp { align-self: flex-end; background: var(--yellow); border: 2px solid var(--ink); border-radius: 13px; padding: 7px 11px; font: 900 .87rem var(--hand); transform: rotate(7deg); }
.about-postcard svg { max-width: 320px; margin: 0 auto; width: 100%; }
.faq { max-width: 840px; }
.faq details { border: var(--border); border-radius: 20px; margin-bottom: 13px; background: var(--white); overflow: hidden; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; cursor: pointer; padding: 17px 23px; font: 800 1.13rem/1.6 var(--hand); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; font-size: 1.7rem; line-height: 1; }
.faq details[open] summary:after { content: "−"; }
.faq details p { margin: 0; padding: 0 23px 23px; }

.contact-area { padding: 40px 0 100px; }
.contact-sheet { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 26px; background: var(--coral); border: var(--border); border-radius: 36px; padding: clamp(29px, 5vw, 62px); position: relative; overflow: hidden; }
.contact-sheet h2 { max-width: 590px; }
.contact-sheet p { max-width: 550px; }
.contact-sheet .btn { background: var(--paper); }
.contact-sheet svg { width: 100%; max-width: 300px; margin: auto; }
.contact-mail { font-size: .92rem; margin-top: 16px; overflow-wrap: anywhere; }
.footer { border-top: var(--border); padding: 29px 0 38px; background: var(--white); }
.footer-inner { display: flex; align-items: start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer p { font-size: .84rem; margin: 5px 0; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: .86rem; font-weight: 700; }
.footer a { text-underline-offset: 4px; }
.privacy-note { margin-top: 18px; max-width: 690px; font-size: .79rem; }

@media (max-width: 920px) {
  .nav-links { gap: 12px; } .nav-links a:not(.btn) { font-size: .85rem; }
  .hero-grid { gap: 30px; }
  .demo-content { grid-template-columns: 1.12fr .88fr; }
}
@media (max-width: 760px) {
  .menu-toggle { display: inline-flex; }
  .header-inner { min-height: 72px; flex-wrap: wrap; }
  .nav-links { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 18px; }
  .nav-links.is-open { display: flex; }
  .nav-links a:not(.btn) { border-bottom: 2px dashed rgba(62,58,57,.25); padding: 12px 3px; font-size: 1rem; }
  .nav-links .btn { margin-top: 15px; }
  .hero-grid, .product-top, .about-grid, .contact-sheet { grid-template-columns: 1fr; }
  .hero-illustration { max-height: 490px; }
  .illustration-frame { max-width: 600px; margin: 0 auto; width: 100%; }
  .hero { padding-top: 45px; }
  .what-grid, .workflow { grid-template-columns: 1fr; }
  .demo-content, .demo-manager.is-active { grid-template-columns: 1fr; }
  .contact-sheet svg { width: 190px; }
}
@media (max-width: 520px) {
  .container { width: min(100% - 30px, 1140px); }
  .brand-mark { width: 40px; height: 40px; }
  .brand-text { font-size: 1.34rem; }
  .header-inner { gap: 8px; }
  .lang-link { padding: 5px 9px; }
  .fact-strip { gap: 8px; }
  .fact { padding: 13px 10px; border-width: 2px; border-radius: 15px; }
  .fact strong { font-size: 1.08rem; overflow-wrap: anywhere; }
  .fact span:last-child, .fact .tiny-label { font-size: .66rem; }
  .hero-actions .btn { width: 100%; }
  .demo-card { padding: 16px; }
  .demo-wrap { padding: 14px; }
  .pick { font-size: .84rem; padding: 8px 10px; }
  .contact-area { padding-bottom: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* Expanded navigation collapses sooner so SaaS links remain readable on tablets. */
@media (max-width: 1050px) {
  .menu-toggle { display:inline-flex; }
  .header-inner { flex-wrap:wrap; }
  .nav-links { display:none; order:3; width:100%; flex-direction:column; align-items:stretch; gap:0; padding:4px 0 18px; }
  .nav-links.is-open { display:flex; }
  .nav-links a:not(.btn) { border-bottom:2px dashed rgba(62,58,57,.25); padding:12px 3px; font-size:1rem; }
  .nav-links .btn { margin-top:15px; }
}

/* SaaS product storytelling: hand-drawn notebook cards, no gradients. */
.saas-depth .section-heading, .saas-industries .section-heading { max-width: 850px; }
.saas-depth .section-heading p, .saas-industries .section-heading p { max-width: 770px; }
.saas-story { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:32px; }
.story-step { position:relative; background:var(--white); border:var(--border); border-radius:25px; padding:22px 19px 18px; min-width:0; }
.story-step:nth-child(2) {background:var(--yellow);}
.story-step:nth-child(3) {background:var(--green);}
.story-step:nth-child(4) {background:var(--coral);}
.story-number { display:inline-block; font:900 1.7rem/1 var(--hand); margin-right:10px; }
.story-step h3 { font:900 1.18rem/1.4 var(--hand); margin:18px 0 7px; }
.story-step p { margin:0; font-size:.91rem; line-height:1.65; }
.saas-dual { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0 0; }
.saas-role { border:var(--border); border-radius:28px; padding:28px 29px; }
.saas-role--customer { background:var(--yellow); }
.saas-role--operator { background:var(--blue); }
.saas-role h3 { margin:10px 0; font:900 1.38rem/1.5 var(--hand); }
.saas-role p { max-width:480px; margin:0 0 13px; }
.text-cta {font-weight:800; display:inline-flex; padding:2px 0; }
.saas-heading-space { margin-top:76px; }
.saas-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-top:28px; }
.saas-feature { background:var(--white); border:var(--border); border-radius:25px; padding:23px; min-width:0; display:flex; flex-direction:column; }
.feature-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; }
.feature-top svg { width:65px; height:65px; flex:none; }
.feature-sticker {display:inline-block; font:900 .87rem var(--hand); background:var(--paper); border:2px solid var(--ink); border-radius:11px; padding:2px 9px; }
.saas-feature h3 {font:900 1.23rem/1.45 var(--hand); margin:10px 0 7px;}
.saas-feature p {margin:0 0 17px; line-height:1.7; font-size:.94rem; }
.saas-feature small {margin-top:auto; font-weight:800; opacity:.8; border-top:2px dashed rgba(62,58,57,.25); padding-top:12px; }
.industry-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px;}
.industry-card {border:var(--border); border-radius:29px; padding:25px; min-width:0;}
.industry-card--yellow {background:var(--yellow);} .industry-card--blue {background:var(--blue);} .industry-card--green {background:var(--green);}
.industry-doodle {border:3px solid var(--ink); border-radius:17px; width:57px; height:57px; display:grid; place-items:center; background:var(--paper); font:900 2rem/1 var(--hand);}
.industry-card h3 {font:900 1.22rem/1.5 var(--hand); margin:15px 0 6px;}
.industry-card p {margin:0 0 20px; line-height:1.7;}
.industry-tags {display:flex; flex-wrap:wrap; gap:7px;}
.industry-tags span {font:800 .78rem/1.4 var(--hand); padding:5px 9px; border:2px solid var(--ink); border-radius:99px; background:var(--paper);}
.roadmap-layout {display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start;}
.roadmap-intro p {max-width:450px;}
.roadmap-track {display:grid; gap:14px;}
.roadmap-item {display:flex; align-items:flex-start; gap:17px; border:var(--border); border-radius:22px; background:var(--white); padding:21px 22px; }
.roadmap-item h3 {font:900 1.16rem/1.5 var(--hand); margin:5px 0;}
.roadmap-item p {font-size:.91rem; margin:0; line-height:1.7;}
.roadmap-marker {height:45px; width:45px; border:2px solid var(--ink); border-radius:15px; flex:none; display:grid; place-items:center; font:900 1.5rem/1 var(--hand);}
.roadmap-marker--green {background:var(--green);} .roadmap-marker--yellow {background:var(--yellow);} .roadmap-marker--blue {background:var(--blue);}
.saas-trust-note { margin:26px 0 0; background:var(--paper); border:2px dashed var(--ink); border-radius:17px; padding:17px 20px; font-size:.88rem; line-height:1.75;}
@media(max-width:930px) {.saas-story {grid-template-columns:repeat(2,minmax(0,1fr));} .saas-feature-grid {grid-template-columns:repeat(2,minmax(0,1fr));} .industry-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px) {.roadmap-layout {grid-template-columns:1fr; gap:24px;} .saas-heading-space {margin-top:50px;} }
@media(max-width:520px) {.saas-story,.saas-dual,.saas-feature-grid,.industry-grid {grid-template-columns:1fr;} .story-step,.saas-role,.saas-feature,.industry-card {padding:21px;} .roadmap-item {padding:17px; gap:12px;} .feature-top svg {width:55px;height:55px;}}


/* Case studies: illustrated cards that connect field work to reusable SaaS components. */
.case-intro { max-width: 850px; }
.case-intro .chip { margin: 0 0 17px; }
.case-intro p { max-width: 800px; }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.case-card { border: var(--border); border-radius: 30px; padding: clamp(22px, 3.2vw, 35px); background: var(--white); display: flex; flex-direction: column; min-width: 0; }
.case-card--blue { box-shadow: 8px 8px 0 var(--blue); }
.case-card--coral { box-shadow: 8px 8px 0 var(--coral); }
.case-top { display: flex; align-items: center; gap: 17px; min-width: 0; margin-bottom: 22px; }
.case-illustration { width: 166px; flex: 0 0 166px; }
.case-number { display: block; font: 800 .78rem/1.6 var(--body); letter-spacing: .09em; }
.case-category { font: 800 .95rem/1.5 var(--hand); }
.case-card h3 { font-size: clamp(1.42rem, 2.5vw, 1.88rem); line-height: 1.43; margin: 0 0 15px; }
.case-lead { line-height: 1.85; margin: 0; }
.case-divider { border-top: 3px dashed rgba(62, 58, 57, .27); margin: 26px 0 19px; }
.case-card h4 { font: 800 1.11rem/1.5 var(--hand); margin: 0 0 9px; }
.case-points { padding-left: 1.4em; margin: 0 0 27px; line-height: 1.8; }
.case-points li { padding-left: .1em; margin-bottom: 8px; }
.case-reuse { margin-top: auto; background: var(--paper); border: 2px solid var(--ink); padding: 18px 17px 15px; border-radius: 19px; }
.case-reuse strong { display: block; font: 800 1rem/1.45 var(--hand); margin-bottom: 13px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tags span { font: 700 .8rem/1.4 var(--body); border: 2px solid var(--ink); border-radius: 30px; background: var(--yellow); padding: 5px 10px; }
.case-card--coral .case-tags span { background: var(--green); }
.case-platform { border: var(--border); background: var(--yellow); border-radius: 31px; margin-top: 36px; padding: clamp(22px, 4vw, 43px); }
.case-platform-head { max-width: 800px; }
.case-platform-head h3 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
.case-platform-head p { margin-bottom: 20px; }
.platform-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin: 22px 0; }
.platform-steps>div { border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); padding: 16px 14px; min-width: 0; }
.platform-steps span { font: 900 1.28rem/1.1 var(--hand); display: block; margin-bottom: 11px; }
.platform-steps strong { display: block; font: 800 1rem/1.45 var(--hand); margin-bottom: 5px; }
.platform-steps small { display: block; font-size: .8rem; line-height: 1.5; }
.case-fact { font-size: .84rem; line-height: 1.75; margin: 0 0 23px; max-width: 930px; }
@media (max-width: 900px) {
  .platform-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .case-grid { grid-template-columns: 1fr; gap: 24px; }
  .case-top { gap: 13px; }
  .case-illustration { width: 128px; flex-basis: 128px; }
  .case-card--blue, .case-card--coral { box-shadow: 5px 5px 0 var(--blue); }
  .case-card--coral { box-shadow: 5px 5px 0 var(--coral); }
}
@media (max-width: 420px) {
  .case-illustration { width: 100px; flex-basis: 100px; }
  .case-number { font-size: .66rem; }
  .case-category { font-size: .84rem; }
  .platform-steps>div { padding: 13px 11px; }
}


/* Product field notes, detailed case studies */
.dossier-nav { display:flex; align-items:center; gap:clamp(12px,3vw,30px); }
.dossier-nav a { font:800 .96rem var(--hand); text-decoration:none; }
.dossier-nav a:hover { text-decoration:underline; text-underline-offset:6px; }
.dossier-intro { background:var(--paper); border-bottom:var(--border); }
.dossier-intro h1 { max-width:940px; font-size:clamp(2.6rem,6vw,4.5rem); }
.dossier-lead { max-width:800px; font-size:clamp(1.03rem,2vw,1.2rem); }
.dossier-badges,.dossier-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:25px; }
.dossier-badges .chip { max-width:100%; }
.dossier-cases { background:var(--paper); }
.dossier-case { background:var(--white); border:var(--border); border-radius:36px; padding:clamp(22px,4vw,45px); margin-bottom:34px; }
.dossier-case:nth-child(2) { background:#FFFCF6; }
.dossier-case-top { display:grid; grid-template-columns:minmax(170px,230px) minmax(0,1fr); gap:25px; align-items:center; margin-bottom:28px; }
.dossier-case-top > div:first-child { background:var(--blue); border:var(--border); border-radius:25px; padding:12px; }
.dossier-case:nth-child(2) .dossier-case-top > div:first-child { background:var(--yellow); }
.dossier-case-top h2 { font-size:clamp(1.85rem,4vw,2.9rem); margin-top:12px; }
.dossier-sub { font-weight:700; font-size:1.07rem; margin:0; }
.dossier-problem { padding:20px 24px; border:var(--border); border-radius:23px; background:var(--green); }
.dossier-case:nth-child(2) .dossier-problem { background:var(--coral); }
.dossier-problem p { margin-bottom:0; }
.dossier-small-title { margin:32px 0 18px; }
.dossier-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.dossier-step { display:flex; gap:13px; border:2px solid var(--ink); border-radius:20px; padding:20px; background:var(--white); }
.step-n { flex:none; width:35px; height:35px; display:grid; place-items:center; background:var(--yellow); border:2px solid var(--ink); border-radius:12px; font:900 .95rem var(--hand); }
.dossier-step h3 { font-size:1.2rem; }
.dossier-step p { font-size:.94rem; margin-bottom:0; }
.dossier-case-bottom { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.dossier-case-bottom > div { padding:18px; border:2px dashed var(--ink); border-radius:18px; overflow-wrap:anywhere; }
.dossier-case-bottom > div p { font-size:.9rem; margin:9px 0 0; }
.dossier-stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.dossier-stage { border:var(--border); border-radius:24px; background:var(--paper); padding:24px; }
.dossier-stage:nth-child(2) { background:var(--yellow); }
.dossier-stage:nth-child(3) { background:var(--blue); }
.dossier-stage p { margin:17px 0 0; }
.dossier-strategy { border:var(--border); border-radius:30px; padding:clamp(24px,5vw,50px); margin-top:36px; background:var(--green); }
.dossier-strategy p { max-width:850px; }
.venture-panel { margin-top:24px; padding:clamp(20px,4vw,35px); background:var(--yellow); border:var(--border); border-radius:26px; }
.venture-panel h3 { font-size:clamp(1.45rem,3vw,2rem); }
.venture-panel .venture-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:17px 0 20px; }
.venture-panel .venture-point { border:2px solid var(--ink); border-radius:18px; padding:19px; background:var(--paper); }
.venture-point strong { display:block; font:900 1.06rem var(--hand); margin-bottom:7px; }
.venture-point p { font-size:.91rem; margin:0; }
.dossier-cta { display:inline-flex; margin-top:20px; font:800 1rem var(--hand); text-decoration:underline; text-underline-offset:5px; }
@media(max-width:800px) {
 .dossier-nav { display:none; }
 .dossier-steps { grid-template-columns:1fr; }
 .dossier-case-bottom,.dossier-stage-grid,.venture-panel .venture-grid { grid-template-columns:1fr; }
}
@media(max-width:590px) {
 .dossier-case-top { grid-template-columns:1fr; }
 .dossier-case-top > div:first-child { max-width:225px; }
 .dossier-links .btn { width:100%; }
 .dossier-case { border-radius:25px; }
}
@media(prefers-reduced-motion:reduce) {
 .dossier-cta,.dossier-links .btn { transition:none; }
}



/* Product notebook: dedicated SaaS detail pages */
.platform-hero { background:var(--paper); padding-bottom:60px; }
.platform-hero-grid { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,.85fr); gap:35px; align-items:center; }
.platform-hero h1 { font-size:clamp(2.5rem,5.6vw,4.6rem); }
.platform-hero h1 em { font-style:normal; text-decoration:underline var(--coral) 8px; text-underline-offset:10px; }
.platform-hero .dossier-lead { max-width:780px; }
.platform-badges {display:flex; flex-wrap:wrap; gap:9px; margin:24px 0;}
.platform-art { background:var(--blue); border:var(--border); border-radius:45px; padding:20px; }
.platform-art svg { width:100%; height:auto; transform-origin:center; animation:platformFloat 5s ease-in-out infinite; }
@keyframes platformFloat {0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.platform-section-lead { font-size:1.08rem; max-width:825px; margin:0 0 34px; }
.platform-flow {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px;}
.platform-flow-step { min-width:0; padding:19px; border:var(--border); border-radius:24px; background:var(--paper); }
.platform-flow-step:nth-child(even){background:var(--yellow);}
.platform-flow-step h3 {font-size:1.15rem; margin:18px 0 9px;}
.platform-flow-step p {font-size:.86rem; line-height:1.75; margin:0;}
.platform-flow-step .chip {font-size:.78rem;}
.platform-arch { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:35px 0 24px; }
.platform-arch-step {position:relative; background:var(--yellow); border:var(--border); border-radius:25px; padding:24px 18px; min-width:0;}
.platform-arch-step:nth-child(2){background:var(--blue);}
.platform-arch-step:nth-child(3){background:var(--green);}
.platform-arch-step:nth-child(4){background:var(--coral);}
.platform-arch-step span { display:block; font:900 1.5rem/1 var(--hand); margin-bottom:14px; }
.platform-arch-step strong {display:block; font:900 1.18rem/1.4 var(--hand);}
.platform-arch-step small {display:block; margin-top:8px; font-size:.85rem; }
.platform-arch-step:not(:last-child):after { content:"→"; position:absolute; top:42%; right:-19px; z-index:1; font:900 2rem/1 var(--hand); }
.platform-columns,.platform-case-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:29px;}
.platform-stage {border:var(--border);border-radius:28px;padding:clamp(22px,3.5vw,34px);min-width:0;}
.platform-stage--done {background:var(--green);}
.platform-stage--next {background:var(--white);}
.platform-stage h3 {margin-top:22px;}
.platform-stage ul {padding-left:1.3em; margin-bottom:0;}
.platform-stage li {margin-top:11px; line-height:1.75;}
.platform-industry-grid,.platform-ai-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.platform-industry,.platform-ai-grid article {min-width:0; border:var(--border); border-radius:29px; padding:clamp(23px,3vw,32px); background:var(--white);}
.platform-industry:nth-child(1),.platform-ai-grid article:nth-child(1) {background:var(--yellow);}
.platform-industry:nth-child(2),.platform-ai-grid article:nth-child(2) {background:var(--blue);}
.platform-industry:nth-child(3),.platform-ai-grid article:nth-child(3) {background:var(--green);}
.platform-industry h3,.platform-ai-grid h3 {margin:16px 0 10px;}
.platform-industry strong {font-family:var(--hand); font-size:1rem;}
.platform-industry p,.platform-ai-grid p {margin:11px 0 0; font-size:.95rem;}
.platform-case {display:flex;flex-direction:column;min-width:0;border:var(--border);border-radius:29px;padding:clamp(25px,3.7vw,38px);background:var(--blue);}
.platform-case:nth-child(2) {background:var(--coral);}
.platform-case h3 {margin:14px 0;}
.platform-case p {line-height:1.85;}
.platform-case strong {margin-top:auto;}
.platform-case .text-cta {align-self:flex-start; margin-top:20px;}
.platform-ai-grid article .chip {margin-bottom:11px;}
.platform-onboard {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px;}
.platform-onboard>div {min-width:0;padding:26px;background:var(--paper);border:var(--border);border-radius:25px;}
.platform-onboard>div:nth-child(2){background:var(--green);}
.platform-onboard>div:nth-child(3){background:var(--yellow);}
.platform-onboard h3 {margin-top:20px;}
.platform-onboard p {margin:0;font-size:.95rem;}
.platform-pricing {margin:26px 0 0;background:var(--white);border:2px dashed var(--ink);padding:16px 22px;border-radius:19px;max-width:900px;}
.platform-contact {text-align:center;background:var(--green);border:var(--border);padding:clamp(28px,6vw,67px);border-radius:36px;}
.platform-contact .section-kicker {justify-content:center;}
.platform-contact h2 {max-width:780px;margin:0 auto 18px;}
.platform-contact p {max-width:760px;margin:0 auto 22px;}
.platform-contact .platform-email {margin:18px auto 0;overflow-wrap:anywhere;font-weight:800;}
@media(max-width:1080px) {
  .platform-flow {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:800px) {
  .platform-hero-grid {grid-template-columns:1fr;}
  .platform-art {width:min(450px,100%);justify-self:center;}
  .platform-flow {grid-template-columns:repeat(2,minmax(0,1fr));}
  .platform-arch {grid-template-columns:repeat(2,minmax(0,1fr));}
  .platform-arch-step:nth-child(2):after {display:none;}
  .platform-industry-grid,.platform-ai-grid,.platform-onboard {grid-template-columns:1fr;}
}
@media(max-width:600px){
  .platform-flow,.platform-arch,.platform-columns,.platform-case-grid {grid-template-columns:1fr;}
  .platform-arch-step:after {display:none;}
  .platform-hero h1 {font-size:clamp(2.35rem,10vw,3.5rem);}
  .platform-hero .dossier-links .btn{width:100%;}
  .platform-art {padding:12px;border-radius:30px;}
  .platform-flow-step {padding:20px 22px;}
}
@media(prefers-reduced-motion:reduce) {.platform-art svg {animation:none;}}

/* Case study operating examples with grounded validation criteria */
.dossier-operational { margin-top:27px; border:2px dashed var(--ink); border-radius:25px; background:var(--paper); padding:clamp(20px,3vw,30px); }
.dossier-operational h3 { max-width:800px; font-size:clamp(1.3rem,2.5vw,1.95rem); }
.dossier-rule-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;}
.dossier-rule-grid > div {background:var(--white);border:2px solid var(--ink);border-radius:20px;padding:19px;min-width:0;}
.dossier-rule-grid strong {display:block;font:900 1.1rem/1.6 var(--hand);margin-bottom:7px;}
.dossier-rule-grid p {font-size:.91rem;line-height:1.8;margin:0;}
.dossier-metric {font-size:.89rem;line-height:1.8;margin:22px 0 0;}
@media(max-width:620px){.dossier-rule-grid {grid-template-columns:1fr;}}

/* Booking SaaS interactive walkthrough; fictional illustration */
.walk-title{font-size:clamp(2.4rem,5vw,4.65rem);line-height:1.3;max-width:980px}
.walk-notice{border:2px dashed var(--ink);border-radius:19px;background:var(--white);padding:19px 24px;max-width:920px;font-size:.96rem;margin:24px 0 0}
.walk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.walk-card{border:var(--border);border-radius:28px;background:var(--white);padding:clamp(20px,3.3vw,34px);min-width:0}
.walk-card--manager{background:var(--blue)}
.walk-card h2{font-size:clamp(1.35rem,2.7vw,1.9rem);line-height:1.5;margin:17px 0 24px}
.walk-field{border-top:2px dashed var(--ink);padding:20px 0}
.walk-field h3{font-size:1.11rem;margin:0 0 13px}
.walk-help{font-size:.84rem;line-height:1.7;margin:0 0 12px}
.walk-choices{display:flex;flex-wrap:wrap;gap:8px}
.walk-choices button,.walk-times button{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:9px 12px;border-radius:13px;cursor:pointer;font:800 .92rem var(--hand)}
.walk-choices button[aria-pressed=true],.walk-times button[aria-pressed=true]{background:var(--green);outline:2px solid var(--ink);outline-offset:1px}
.walk-choices button:hover:not(:disabled),.walk-times button:hover:not(:disabled){background:var(--yellow)}
.walk-times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:232px;overflow-y:auto;padding:4px}
.walk-times button{padding:10px 3px;min-width:0}
.walk-times button:disabled{background:#e3ded4;opacity:.65;text-decoration:line-through;cursor:not-allowed}
.walk-closed{grid-column:1/-1;padding:17px;border:2px dashed var(--ink);border-radius:13px}
#walk-submit:disabled{opacity:.45;cursor:not-allowed;transform:none}
.walk-message{font-weight:700;min-height:3em;line-height:1.7;margin:16px 0 0}
.walk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}
.walk-stats>div{display:flex;flex-direction:column;text-align:center;padding:12px 6px;background:var(--paper);border:2px solid var(--ink);border-radius:15px}
.walk-stats strong{font:900 1.7rem var(--hand)}.walk-stats span{font-size:.82rem}
.walk-requests{display:grid;gap:12px;max-height:450px;overflow-y:auto;min-height:170px;margin-bottom:20px}
.walk-requests>p{border:2px dashed var(--ink);border-radius:14px;padding:17px;background:var(--paper)}
.walk-request{border:2px solid var(--ink);border-radius:17px;background:var(--white);padding:16px;overflow-wrap:anywhere}
.walk-request strong{display:block;font:900 1.03rem var(--hand)}
.walk-request p{margin:8px 0}.walk-status{display:inline-block;border:2px solid var(--ink);border-radius:14px;background:var(--yellow);padding:2px 10px;font-size:.84rem;font-weight:700}
.walk-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.walk-actions .btn{padding:9px 15px;font-size:.85rem}
.walk-seeds{border-top:2px dashed var(--ink);margin-top:22px;padding-top:17px;font-size:.87rem}.walk-seeds strong{font:900 1rem var(--hand)}.walk-seeds p{margin:8px 0;overflow-wrap:anywhere}
.walk-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:25px 0 0}
.walk-three article{border:var(--border);border-radius:23px;padding:23px;background:var(--yellow);min-width:0}
.walk-three article:nth-child(2){background:var(--green)}.walk-three article:nth-child(3){background:var(--blue)}
.walk-three article>span:not(.chip){font:900 1.6rem var(--hand)}
.walk-three p{margin:13px 0 0;font-size:.94rem}
.walk-evidence{margin-top:40px;border-top:2px dashed var(--ink);padding-top:35px}.walk-evidence .text-cta{display:inline-block;margin-top:23px}
@media(max-width:850px){.walk-grid,.walk-three{grid-template-columns:1fr}}
@media(max-width:450px){.walk-times{grid-template-columns:repeat(3,minmax(0,1fr))}.walk-card{padding:18px}}

/* Real project evidence, the interactive simulation and the SaaS target architecture */
.project-screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 0}
.project-screen-card{display:flex;flex-direction:column;min-width:0;margin:0;padding:12px;border:var(--border);border-radius:var(--radius);background:var(--white);box-shadow:4px 5px 0 var(--ink)}
.project-screen-card img{display:block;width:100%;aspect-ratio:2/1;object-fit:contain;object-position:top center;background:#f0f1f3;border:2px solid var(--ink);border-radius:17px}
.project-screen-card figcaption{display:grid;justify-items:start;gap:7px;padding:13px 5px 4px}
.project-screen-card figcaption strong{font:900 1.2rem var(--hand)}
.project-screen-card figcaption>span:last-child{font-size:.9rem;line-height:1.6}
.project-screen-card .chip{font-size:.72rem;padding:3px 9px}
.project-screen-grid--case{margin:27px 0}
.project-screen-grid--case .project-screen-card{padding:9px;border-width:2px;border-radius:21px;box-shadow:3px 4px 0 var(--ink)}
.project-screen-grid--case .project-screen-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px}
.project-screen-grid--case .project-screen-card figcaption strong{font-size:1rem}
.project-screen-grid--case .project-screen-card figcaption>span{font-size:.78rem;color:#65605b}
.project-demo-bridge{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px;padding:24px 28px;border:var(--border);border-radius:var(--radius);background:var(--yellow)}
.project-demo-bridge h3{margin:8px 0}.project-demo-bridge p{max-width:710px;margin:0}
.project-source-note{margin:18px 0 0;padding:12px 15px;border-left:5px solid var(--blue);background:rgba(168,211,230,.23);font-size:.86rem;line-height:1.7}
.project-flow-diagram{margin:25px 0;padding:22px;border:var(--border);border-radius:var(--radius);background:#fff}
.project-flow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.project-flow-head strong{font:900 1.1rem var(--hand)}
.project-flow-diagram ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.project-flow-diagram li{position:relative;display:grid;align-content:start;gap:7px;min-width:0;padding:15px;border:2px solid var(--ink);border-radius:18px;background:var(--blue)}
.project-flow-diagram li:nth-child(2){background:var(--yellow)}.project-flow-diagram li:nth-child(3){background:var(--coral)}.project-flow-diagram li:nth-child(4){background:var(--green)}
.project-flow-diagram li+li:before{content:"→";position:absolute;left:-18px;top:35%;z-index:1;font-weight:900}
.project-flow-diagram li>span{font:900 1.4rem var(--hand)}.project-flow-diagram li strong{font:900 1rem var(--hand)}.project-flow-diagram li small{font-size:.82rem;line-height:1.5}
.project-flow-diagram>p{margin:13px 0 0;font-size:.82rem;color:#625d58}
.saas-blueprint{margin:30px 0 34px;padding:clamp(18px,3vw,30px);border:var(--border);border-radius:32px;background:#fff;box-shadow:6px 7px 0 var(--ink)}
.saas-blueprint-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.saas-blueprint-head h3{max-width:690px;margin:6px 0 0;font-size:clamp(1.25rem,2.4vw,1.8rem)}
.saas-tenant-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:15px;border:2px dashed var(--ink);border-radius:20px;background:var(--paper)}
.saas-tenant-band>.tiny-label{grid-column:1/-1}
.saas-tenant-band>div{display:grid;gap:3px;padding:12px;border:2px solid var(--ink);border-radius:15px;background:var(--yellow)}
.saas-tenant-band>div:nth-of-type(2){background:var(--blue)}.saas-tenant-band>div:nth-of-type(3){background:var(--green)}
.saas-tenant-band strong,.saas-module-grid h4{font:900 1rem var(--hand)}
.saas-tenant-band small{font-size:.8rem;line-height:1.5}
.saas-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:15px 0}
.saas-module-grid article{min-width:0;padding:15px 13px;border:2px solid var(--ink);border-radius:18px;background:#fff}
.saas-module-grid h4{margin:9px 0 5px;font-size:1.08rem}
.saas-module-grid p{margin:0;font-size:.83rem;line-height:1.6}
.saas-shared-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:13px 15px;border:2px solid var(--ink);border-radius:17px;background:var(--coral)}
.saas-shared-row strong{margin-right:5px;font-family:var(--hand)}
.saas-shared-row span{padding:4px 10px;border:1.5px solid var(--ink);border-radius:99px;background:var(--paper);font-size:.8rem}
.saas-ai-row{display:flex;align-items:flex-start;gap:13px;margin-top:13px;padding:13px 15px;border:2px dashed var(--ink);border-radius:17px;background:#fff9e8}
.saas-ai-row p{margin:0;font-size:.87rem;line-height:1.7}
@media(max-width:850px){.project-screen-grid{grid-template-columns:1fr 1fr}.project-screen-card:last-child{grid-column:1/-1}.saas-module-grid{grid-template-columns:1fr 1fr}.project-flow-diagram ol{grid-template-columns:1fr 1fr}.project-flow-diagram li:nth-child(3):before{display:none}}
@media(max-width:560px){.project-screen-grid{grid-template-columns:1fr}.project-screen-card:last-child{grid-column:auto}.project-demo-bridge,.saas-blueprint-head,.project-flow-head{align-items:flex-start;flex-direction:column}.project-demo-bridge{padding:19px}.saas-tenant-band,.saas-module-grid,.project-flow-diagram ol{grid-template-columns:1fr}.project-flow-diagram li+li:before{content:"↓";left:50%;top:-22px}.project-flow-diagram li:nth-child(3):before{display:block}.saas-ai-row{flex-direction:column}.project-screen-grid--case .project-screen-card figcaption{align-items:flex-start;flex-direction:column}}