*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:55px}body{margin:0;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.9;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.5}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #eeac57;outline-offset:6px}.demo-banner{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:9px 32px;background:#fff;color:#27323b;border-bottom:1px solid #ccd3d4;font-size:10px;position:relative;z-index:10;line-height:1.6}.demo-banner a{text-decoration:underline;white-space:nowrap}.demo-shell{width:min(1200px,calc(100% - 100px));margin:auto}.demo-nav{height:100px;display:flex;align-items:center;justify-content:space-between;gap:25px}.demo-nav-links{display:flex;gap:28px;font-size:11px}.demo-logo{font:700 25px Arial;letter-spacing:.02em}.demo-eyebrow{font:11px/1.5 Arial;letter-spacing:.15em}.demo-button{display:inline-flex;align-items:center;justify-content:space-between;gap:60px;padding:17px 26px;border:1px solid currentColor;font-size:12px;transition:transform .2s}.demo-button:hover{transform:translateY(-3px)}.demo-section{padding-block:110px}.demo-footer{padding:33px 0;font-size:10px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff24}.demo-back{display:inline-block;border-bottom:1px solid currentColor;margin-top:28px;font-size:12px}.demo-tag{font-size:10px;letter-spacing:.05em}.demo-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.north{background:#f8fafc;color:#173653}.north .demo-nav{background:#f8fafc}.north .demo-logo{letter-spacing:.075em}.north .demo-logo span{display:inline-block;width:16px;height:21px;margin-right:11px;border-left:4px solid #2a68bd;border-right:4px solid #173653;transform:skew(-18deg)}.north .nav-cta{border-bottom:1px solid #173653;padding-bottom:4px}.north-hero{background:#163c6a;color:white;min-height:620px;position:relative;overflow:hidden}.north-hero-inner{padding-block:80px 90px;position:relative;z-index:1}.north-hero h1{font-size:clamp(60px,8vw,112px);letter-spacing:.08em;line-height:1.3;margin:37px 0 32px}.north-hero p:not(.demo-eyebrow){font-size:14px;line-height:2.2;color:#c3d4e8}.north-hero .demo-button{margin-top:35px;border-color:#ffffff65;padding:13px 22px}.north-art{position:absolute;right:-90px;top:75px;width:610px;height:610px;transform:rotate(-30deg);border:1px solid #7fa4d570}.north-art i{position:absolute;border:1px solid #7fa4d570;inset:50px}.north-art i:nth-child(2){inset:100px}.north-art i:nth-child(3){inset:150px}.north-art i:nth-child(4){inset:200px;background:#4879b42b}.north-art:after{content:"";height:1px;width:1000px;position:absolute;background:#92b2d15e;top:50%;left:-160px}.north-hero-bottom{position:absolute;right:50px;bottom:35px;font:9px Arial;letter-spacing:.15em;color:#b0c9e7}.north-about{display:grid;grid-template-columns:1fr 1.15fr;gap:100px}.north-big-type{font:700 clamp(45px,5vw,69px)/1.2 Arial;letter-spacing:-.045em}.north-big-type span{color:#a5bacf}.north-about h2{font-size:29px;margin:5px 0 25px}.north-about p{font-size:13px;color:#5d6e80;line-height:2.2}.north-section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:45px}.north-section-head h2{font:700 48px Arial;letter-spacing:-.04em}.north-section-head p{font-size:12px}.north-services{background:#eaf0f5}.north-service{padding-top:25px;border-top:2px solid #3972b8}.north-service>span{font:11px Arial;color:#4574a9}.north-service h3{font-size:20px;margin:36px 0 15px}.north-service p{font-size:12px;line-height:2.1;color:#5d7185}.north-service ul{list-style:none;padding:18px 0 0;font-size:11px;border-top:1px solid #ccd8e3;margin-top:25px;line-height:2.5}.north-process{display:grid;grid-template-columns:1fr 1.5fr;gap:90px}.north-process h2{font-size:31px;margin:20px 0}.north-process>div>p:not(.demo-eyebrow){font-size:12px;color:#617589}.north-step{display:grid;grid-template-columns:50px 1fr;gap:18px;padding:25px 0;border-bottom:1px solid #cfdae4}.north-step:first-child{padding-top:0}.north-step>span{font:25px Arial;color:#8da9c5}.north-step h3{font-size:18px}.north-step p{font-size:12px;color:#617589;margin-top:10px}.north-message{background:#173b66;color:white;text-align:center;padding-block:85px}.north-message h2{font-size:35px;margin-top:23px}.north-message p{font-size:12px;color:#b6ccdf;margin-top:20px}.north-message .demo-button{margin-top:28px}.north-bottom{background:#102c4d;color:#aebfd1}
.sumi{background:#f5f2e9;color:#2a433b}.sumi .demo-nav{height:120px;border-bottom:1px solid #d9ded0}.sumi .demo-logo{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:27px;font-weight:400;letter-spacing:.1em}.sumi .demo-logo small{font-family:var(--sans,sans-serif);font-size:9px;letter-spacing:.04em;display:inline-block;margin-left:18px;vertical-align:middle}.sumi .demo-nav-links{font-size:11px}.sumi-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;padding-block:75px 100px;align-items:center}.sumi-hero h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;font-size:clamp(38px,4.5vw,61px);line-height:1.8;letter-spacing:.12em;margin:21px 0}.sumi-hero p:not(.demo-eyebrow){font-size:12px;line-height:2.4;color:#758278;margin:20px 0 33px}.sumi-art{height:460px;position:relative;background:#e6e9dd;overflow:hidden;border-radius:200px 200px 0 0}.sumi-art .arch{position:absolute;left:60px;right:60px;bottom:-1px;height:340px;border:1px solid #889d88;border-radius:200px 200px 0 0}.sumi-art .arch:nth-child(2){left:85px;right:85px;height:315px;border-color:#b3bfa9}.sumi-art .arch:nth-child(3){left:110px;right:110px;height:290px;border-color:#b3bfa9}.sumi-art .arch:nth-child(4){left:135px;right:135px;height:265px;border-color:#b3bfa9}.sumi-art .sun{position:absolute;width:100px;height:100px;border-radius:50%;background:#d5c798;top:62px;left:55px;mix-blend-mode:multiply}.sumi-art .vertical-note{position:absolute;right:27px;top:160px;writing-mode:vertical-rl;font-family:serif;font-size:11px;letter-spacing:.32em;color:#66775e}.sumi-caption{text-align:right;font:8px Arial;letter-spacing:.15em;margin-top:12px;color:#8f9a84}.sumi-intro{background:#2f4a3f;color:#edf0e8;padding-block:90px}.sumi-intro .demo-shell{display:grid;grid-template-columns:1fr 1fr;gap:100px}.sumi h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;font-size:35px;line-height:1.9;letter-spacing:.1em}.sumi-intro p{font-size:12px;line-height:2.7;color:#c4d0c3}.sumi .section-top{display:flex;align-items:center;gap:24px;margin-bottom:45px}.sumi .section-top:after{content:"";height:1px;background:#d0d7c7;flex:1}.sumi .section-top span{font:10px Arial;letter-spacing:.15em}.sumi-service{border-top:1px solid #b3c0ab;padding-top:25px}.sumi-service .service-glyph{width:65px;height:65px;border:1px solid #6c8871;border-radius:50%;position:relative;margin-bottom:36px}.sumi-service .service-glyph:after{content:"";position:absolute;inset:10px;border:1px solid #a8bba1;border-radius:50%}.sumi-service:nth-child(2) .service-glyph{border-radius:0}.sumi-service:nth-child(3) .service-glyph{border-radius:50% 0 50% 0}.sumi-service h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:22px;font-weight:400;margin-bottom:20px}.sumi-service p{font-size:12px;color:#778271;line-height:2.4}.sumi-flow{display:grid;grid-template-columns:1fr 1fr;gap:100px;border-block:1px solid #d6ddce;padding-block:65px}.sumi-flow h2{font-size:29px}.sumi-flow ol{list-style:none;padding:0;margin:0}.sumi-flow li{display:flex;gap:25px;padding:16px 0;border-bottom:1px solid #d6ddce;font-size:13px}.sumi-flow li span{font:12px Arial;color:#91a185;padding-top:7px}.sumi-faq{margin-top:65px;display:grid;grid-template-columns:1fr 1.5fr;gap:70px}.sumi-faq h2{font-size:29px}.sumi-faq details{border-bottom:1px solid #d3dbca;padding:20px 0;font-size:12px}.sumi-faq summary{cursor:pointer}.sumi-faq details p{font-size:11px;line-height:2.3;padding:15px 0;color:#6d7f70}.sumi-contact{padding:80px 0;background:#e7e8dc;text-align:center}.sumi-contact p{font-size:12px;margin:20px 0 28px;color:#73816b}.sumi .demo-footer{border-color:#d0d7c7;color:#7e8a75}
.flowly{background:#11131c;color:#f3f2fc}.flowly .demo-nav{height:95px}.flowly .demo-logo{font-size:33px;font-weight:700;letter-spacing:-.065em}.flowly .demo-logo:before{content:"✳";color:#c2a9ff;display:inline-block;margin-right:8px;font-weight:400}.flowly .demo-nav-links{color:#b0b0c1}.flowly .nav-cta{padding:8px 15px;background:#c1a9fa;color:#211633;border-radius:7px}.flowly-hero{text-align:center;padding-block:70px 50px}.flowly-hero .demo-tag{padding:5px 12px;background:#252131;color:#c9b3fd;border:1px solid #4e3a76;border-radius:25px;display:inline-block}.flowly-hero h1{font-size:clamp(46px,6vw,76px);line-height:1.5;margin:28px 0;letter-spacing:.01em}.flowly-hero h1 span{color:#c7affe}.flowly-hero p{font-size:14px;color:#9298ac;line-height:2.1}.flowly .demo-button{border:0;background:#c4acfc;color:#211633;border-radius:7px;margin-top:31px;font-size:12px;gap:35px}.flowly-workspace{background:#202331;border:1px solid #444155;border-radius:13px;max-width:1000px;margin:35px auto 20px;overflow:hidden;box-shadow:0 0 70px #9464ea12}.workspace-bar{height:46px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #353649;padding:0 21px;font:10px Arial;color:#b0a9c5}.workspace-body{display:grid;grid-template-columns:190px 1fr;min-height:345px}.workspace-side{border-right:1px solid #353649;padding:25px 18px;font-size:11px;color:#9b9cae}.workspace-side p{font-weight:700;color:#e0d6ed;margin-bottom:24px}.workspace-side span{display:block;padding:9px 11px;margin-bottom:7px}.workspace-side span:first-of-type{color:#dccafa;background:#373144;border-radius:5px}.workspace-main{padding:24px}.workspace-main h3{font-size:19px}.workspace-main>p{font-size:10px;color:#86899f;margin:5px 0 23px}.task-columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}.task-column{background:#191c27;padding:13px 10px;border-radius:7px}.task-column>span{font-size:9px;color:#a7a8b8}.task-item{padding:15px 12px;background:#2b2d3d;border:1px solid #393b50;border-radius:5px;margin-top:12px;font-size:10px}.task-item small{display:block;font:8px Arial;color:#aa8ceb;margin-top:14px}.workspace-note{text-align:center;color:#62687e;font-size:9px;margin-top:19px}.flowly-feature-head{text-align:center;margin-bottom:42px}.flowly-feature-head .demo-eyebrow{color:#ac91e5}.flowly-feature-head h2{font-size:35px;margin-top:19px}.feature-tabs{display:flex;justify-content:center;gap:15px;margin-bottom:34px}.feature-tabs button{border:1px solid #454057;background:transparent;color:#a7a1b5;padding:12px 27px;border-radius:30px;font-size:12px}.feature-tabs button[aria-selected=true]{background:#c4acfc;color:#241d36;border-color:#c4acfc}.feature-panel{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;background:#1c1e2a;border:1px solid #373647;border-radius:15px;padding:45px}.feature-panel[hidden]{display:none}.feature-panel h3{font-size:29px;margin-bottom:18px}.feature-panel p{font-size:13px;color:#969bb0;line-height:2.2}.feature-visual{padding:28px;border-radius:10px;background:#292637}.feature-visual>div{display:flex;gap:12px;align-items:center;border-bottom:1px solid #494155;padding:16px 0;font-size:12px}.feature-visual>div:last-child{border:0}.feature-visual i{font-style:normal;color:#c5aff5;background:#463756;width:24px;height:24px;text-align:center;border-radius:50%}.feature-visual .visual-bar{height:7px;background:#b79ce9;border-radius:3px;width:65%}.flowly-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:65px}.flowly-benefits span{font:11px Arial;color:#ac91e5}.flowly-benefits h3{font-size:18px;margin:20px 0 15px}.flowly-benefits p{font-size:12px;color:#8d93a8;line-height:2.1}.flowly-end{padding-block:90px;text-align:center;background:#1f1b2c;border-block:1px solid #373144}.flowly-end h2{font-size:39px}.flowly-end p{font-size:12px;color:#aaa1b9;margin-top:20px}.flowly .demo-footer{color:#878197}
@media(max-width:900px){.demo-shell{width:calc(100% - 60px)}.demo-nav-links{gap:20px}.demo-section{padding-block:75px}.north-art{right:-260px;opacity:.65}.north-about,.north-process{gap:45px}.north-section-head h2{font-size:39px}.demo-grid3{gap:25px}.sumi-hero{gap:35px}.sumi-art{height:370px}.sumi-art .arch{left:30px;right:30px;height:260px}.sumi-art .arch:nth-child(2){left:55px;right:55px;height:235px}.sumi-art .arch:nth-child(3){left:80px;right:80px;height:210px}.sumi-art .arch:nth-child(4){left:105px;right:105px;height:185px}.sumi-intro .demo-shell,.sumi-flow,.sumi-faq{gap:45px}.sumi h2{font-size:30px}.feature-panel{gap:35px;padding:35px}.workspace-body{grid-template-columns:150px 1fr}.workspace-main{padding:20px}.task-columns{gap:8px}.task-item{padding:10px 8px;font-size:9px}}
@media(max-width:600px){.demo-banner{padding:8px 17px;font-size:8px}.demo-shell{width:calc(100% - 40px)}.demo-nav{height:80px;gap:15px}.demo-nav-links>a:not(:last-child){display:none}.demo-logo{font-size:22px}.demo-section{padding-block:60px}.demo-grid3{grid-template-columns:1fr;gap:35px}.demo-button{padding:13px 20px;gap:35px;font-size:11px}.demo-footer{font-size:8px;align-items:center}.north-hero{min-height:610px}.north-hero-inner{padding-block:70px}.north-hero h1{font-size:58px;margin-block:30px;line-height:1.45}.north-hero .demo-eyebrow{font-size:9px}.north-hero p:not(.demo-eyebrow){font-size:12px}.north-art{width:440px;height:440px;right:-285px;top:130px;opacity:.7}.north-about,.north-process{grid-template-columns:1fr;gap:40px}.north-big-type{font-size:48px}.north-about h2{font-size:25px}.north-about p{font-size:12px}.north-section-head{display:block;margin-bottom:35px}.north-section-head h2{font-size:38px}.north-section-head p{margin-top:12px;font-size:11px}.north-service h3{margin-top:20px;font-size:22px}.north-process h2{font-size:29px}.north-message{padding-block:65px}.north-message h2{font-size:27px}.north-message p{font-size:11px}.sumi .demo-nav{height:90px}.sumi .demo-logo{font-size:25px}.sumi .demo-logo small{font-size:8px;margin-left:9px}.sumi-hero{grid-template-columns:1fr;padding-block:43px 60px;gap:35px}.sumi-hero h1{font-size:35px;letter-spacing:.08em}.sumi-hero p:not(.demo-eyebrow){font-size:12px;margin:22px 0}.sumi-art{height:350px;width:90%;margin:auto}.sumi-art .arch{left:40px;right:40px}.sumi-art .arch:nth-child(2){left:65px;right:65px}.sumi-art .arch:nth-child(3){left:90px;right:90px}.sumi-art .arch:nth-child(4){left:115px;right:115px}.sumi-intro .demo-shell,.sumi-flow,.sumi-faq{grid-template-columns:1fr;gap:28px}.sumi-intro{padding-block:65px}.sumi h2{font-size:29px}.sumi-service .service-glyph{margin-bottom:22px;width:52px;height:52px}.sumi-service p{font-size:12px}.sumi-flow{padding-block:40px}.sumi-faq{margin-top:45px}.sumi-contact{padding-block:60px}.flowly .demo-nav{height:80px}.flowly .demo-logo{font-size:28px}.flowly-hero{padding-block:40px 25px}.flowly-hero h1{font-size:41px;letter-spacing:0}.flowly-hero p{font-size:12px}.flowly-workspace{margin-top:20px}.workspace-body{grid-template-columns:1fr;min-height:0}.workspace-side{display:none}.workspace-main{padding:19px 14px}.workspace-main h3{font-size:17px}.workspace-main>p{font-size:8px}.task-columns{grid-template-columns:1fr}.task-column{padding:12px}.task-column:not(:first-child){display:none}.task-item{padding:14px;font-size:11px}.workspace-note{font-size:8px}.flowly-feature-head h2{font-size:29px}.feature-tabs{gap:8px}.feature-tabs button{font-size:10px;padding:9px 15px}.feature-panel{grid-template-columns:1fr;padding:26px 22px;gap:28px}.feature-panel h3{font-size:25px}.feature-panel p{font-size:12px}.feature-visual{padding:18px}.flowly-benefits{grid-template-columns:1fr;gap:27px;margin-top:43px}.flowly-benefits h3{margin-block:10px}.flowly-end{padding-block:65px}.flowly-end h2{font-size:29px}.flowly-end p{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* Navigation shared by the photo and graphic concept versions. */
.demo-variants{display:flex;align-items:center;gap:4px;margin-left:auto}.demo-variants a{padding:5px 12px;text-decoration:none;border-radius:3px;line-height:1.5}.demo-variants a[aria-current=page]{background:#173653;color:#fff}.demo-variants a:not([aria-current]):hover{background:#edf1f3}.sumi .demo-variants a[aria-current=page]{background:#2f4a3f}@media(max-width:600px){.demo-banner:has(.demo-variants){flex-wrap:wrap;gap:8px 16px}.demo-banner:has(.demo-variants)>span{width:100%}.demo-variants{margin-left:0;margin-right:auto}.demo-variants a{padding:6px 10px;font-size:10px}}