#how,#compare{ scroll-margin-top:24px; }

/* A desk-like diagram: actual sample artifacts make each step tangible. */
#how{ background:#F5F6F1; }
.process-studio{ border:1px solid #E2E6DC; border-radius:20px; padding:26px 28px 35px; background:#FCFDFB; box-shadow:0 16px 40px #273a1e07; }
.process-caption{ display:flex; justify-content:space-between; gap:20px; font-size:14px; color:var(--ink-3); border-bottom:1px solid #E9ECE3; padding-bottom:20px; }
.process-caption span:last-child{ color:#7B8374; }
.journey{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; list-style:none; }
.journey li{ position:relative; min-width:0; }
.journey-scene{ height:250px; position:relative; display:flex; align-items:center; justify-content:center; background-image:radial-gradient(#D9E0D1 .8px,transparent .8px); background-size:15px 15px; background-position:center; }
.scene-user{ position:absolute; left:13px; top:39px; font-size:14px; background:#fff; border:1px solid #E8EADD; padding:5px 12px; border-radius:30px; z-index:2; }
.scene-bubble{ padding:22px 20px; font-size:16px; line-height:1.9; background:#FFF4E9; border:1px solid #ECCAAF; border-radius:14px 14px 14px 2px; box-shadow:5px 10px 0 #EBDDCB4D,0 15px 24px #3F301711; transform:rotate(-5deg); width:95%; max-width:210px; }
.scene-note{ position:absolute; bottom:17px; font-size:14px; color:var(--ink-3); }
.draft-paper{ position:absolute; width:164px; height:174px; border:1px solid #DEE2D7; border-radius:6px; background:#fff; }
.paper-back{ transform:translate(-9px,2px) rotate(-9deg); box-shadow:0 12px 24px #3449230B; }
.paper-front{ padding:12px; transform:translate(8px,-5px) rotate(3deg); box-shadow:0 12px 25px #34492313; }
.paper-front > span{ font-size:14px; font-family:Inter,sans-serif; display:flex; justify-content:space-between; color:#686F60; }
.paper-front i{ font-style:normal; color:var(--green-deep); font-family:inherit; font-size:14px; }
.paper-front img{ height:69px; width:100%; object-fit:cover; margin:9px 0; }
.paper-front b{ font-size:14px; font-weight:500; }
.paper-lines{ width:70%; height:8px; border-top:2px solid #E4E8DC; border-bottom:2px solid #EFF2EA; margin-top:7px; }
.approval-sheet{ width:196px; padding:23px 20px 20px; border:1px solid #E7B691; border-radius:12px; background:#FFF2E7; box-shadow:0 15px 30px #A5693220; transform:rotate(-3deg); text-align:center; }
.approval-check{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; background:var(--green); color:#fff; font-size:24px; box-shadow:3px 4px 0 #E6BC9B; }
.approval-sheet b{ display:block; font-size:18px; line-height:1.7; font-weight:500; }
.approval-sheet > span:last-child{ display:block; color:#876044; font-size:14px; margin-top:10px; }
.published-page{ width:184px; background:#fff; border:1px solid #D8DFD0; border-radius:7px; box-shadow:0 18px 30px #34492318; padding:0 0 15px; transform:rotate(4deg); overflow:hidden; }
.mini-browser-bar{ display:flex; gap:4px; padding:9px 10px; background:#353D30; }
.mini-browser-bar i{ width:4px; height:4px; border-radius:50%; background:#A4AE9A; }
.mini-browser-bar i:last-child{ background:#FF8A40; }
.published-page img{ width:calc(100% - 24px); height:90px; object-fit:cover; margin:12px; }
.published-page b{ font:500 14px/1.4 Inter,sans-serif; display:block; padding-inline:12px; }
.published-seal{ position:absolute; bottom:29px; right:0; background:#F5F8F0; border:1px solid #BFCDAF; box-shadow:0 4px 12px #34492314; border-radius:30px; padding:7px 12px; color:#496238; font-size:14px; transform:rotate(-4deg); }
.journey-point{ position:relative; margin:0 0 20px; z-index:1; }
.journey-point::before{ content:''; position:absolute; left:0; top:17px; width:calc(100% + 30px); border-top:1px dashed #BEC9B2; z-index:-1; }
.journey li:last-child .journey-point::before{ width:100%; }
.journey-point span{ display:flex; width:35px; height:35px; align-items:center; justify-content:center; background:#F9FBF5; border:1px solid #CDD6C1; border-radius:50%; font:500 14px/1 Inter,sans-serif; color:#69785B; }
.journey-approval .journey-point span{ background:var(--green); border-color:var(--green); color:#fff; }
.journey h3{ font-size:21px; font-weight:600; margin-bottom:10px; }
.journey p{ font-size:15px; line-height:1.95; color:var(--ink-2); min-height:5.85em; }
.journey-owner{ display:inline-block; font-size:14px; color:#6D7962; padding-top:12px; }
.journey-approval .journey-owner{ color:var(--green-deep); }

/* The comparison emphasizes the reader's role, while preserving the scope. */
#compare{ padding-block:96px; }
.method-comparison{ display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:30px; align-items:stretch; margin-top:64px; }
.method{ padding:10px 24px 20px 0; border-right:1px solid var(--line); min-width:0; }
.method-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.method-icon{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:#F0F3EB; border-radius:12px; color:#737D67; }
.method-icon svg{ width:25px; height:25px; }
.method-number{ font-family:Inter,sans-serif; font-size:28px; font-weight:300; letter-spacing:-.04em; color:#89927E; }
.method h3{ font-size:23px; line-height:1.5; margin-bottom:10px; font-weight:600; }
.method-intro{ font-size:14px; color:var(--ink-3); }
.method-route{ display:flex; gap:6px; align-items:center; margin:27px 0; }
.method-route span{ flex:1; min-width:0; padding:10px 4px; background:#F4F6F0; border:1px solid #E0E5D9; border-radius:5px; font-size:14px; text-align:center; }
.method-route i{ font-size:14px; color:#87937B; font-style:normal; }
.method-role{ margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); min-height:89px; }
.method-role > span{ display:block; font-size:14px; color:var(--ink-3); margin-bottom:9px; }
.method-role strong{ display:block; font-size:19px; line-height:1.6; font-weight:500; }
.method dl > div{ min-height:93px; padding-bottom:18px; }
.method dt{ font-size:14px; color:var(--ink-3); margin-bottom:7px; }
.method dd{ font-size:15px; line-height:1.85; }
.method-hitokoto-web{ border:0; border-radius:15px; background:linear-gradient(150deg,#3D4835,#242E22 74%); color:#F8FAF3; box-shadow:0 24px 42px #25351C24; padding:29px 27px 25px; margin-top:-20px; margin-bottom:-20px; }
.method-hitokoto-web .method-icon{ background:#FF7B2D; color:#fff; box-shadow:3px 4px 0 #111A0B42; transform:rotate(-6deg); }
.method-hitokoto-web .method-number{ color:#B9C8A9; }
.method-hitokoto-web h3{ font-size:29px; font-family:Inter,sans-serif; letter-spacing:-.025em; }
.method-hitokoto-web .method-intro{ color:#D0DBC5; }
.method-hitokoto-web .method-route span{ background:#43523A; border-color:#617353; color:#E6EEDD; }
.method-hitokoto-web .method-route span:nth-of-type(2){ background:#FCF4E9; color:#573D25; border-color:#FCF4E9; }
.method-hitokoto-web .method-route i{ color:#C4D2B6; }
.method-hitokoto-web .method-role{ border-color:#59634F; }
.method-hitokoto-web .method-role > span,.method-hitokoto-web dt{ color:#C3D1B6; }
.method-hitokoto-web .method-role strong{ font-size:24px; color:#FFD0A9; }
.method-hitokoto-web dd{ color:#F1F5EB; }
.method-link{ display:flex; justify-content:space-between; align-items:center; padding-top:18px; border-top:1px solid #59634F; font-size:14px; color:#FFD0A9; }
#compare .comparison-note{ margin-top:50px; }

@media(max-width:1100px){
  .journey{ gap:20px; }
  .journey-scene{ height:232px; }
  .draft-paper{ width:142px; }
  .approval-sheet{ width:170px; padding:18px 12px; }
  .published-page{ width:160px; }
  .scene-bubble{ font-size:15px; padding:20px 14px; }
  .scene-note{ font-size:14px; }
  .journey-point::before{ width:calc(100% + 20px); }
  .journey h3{ font-size:19px; }
  .journey p{ min-height:7.8em; }
  .method-comparison{ gap:20px; }
  .method{ padding-right:18px; }
  .method h3{ font-size:21px; }
  .method-hitokoto-web{ padding:29px 20px 25px; }
  .method-hitokoto-web h3{ font-size:29px; }
  .method-role strong{ font-size:17px; }
  .method-hitokoto-web .method-role strong{ font-size:22px; }
  .method-route{ gap:4px; }
}
@media(max-width:850px){
  .journey{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
  .journey p{ min-height:0; }
  .journey-scene{ height:245px; }
  .journey li:nth-child(2) .journey-point::before{ width:100%; }
  .journey-point::before{ width:calc(100% + 36px); }
  .draft-paper{ width:164px; }
  .approval-sheet{ width:190px; }
  .published-page{ width:184px; }
  .journey h3{ font-size:21px; }
  .method-comparison{ grid-template-columns:1fr 1fr; gap:32px; }
  .method-agency{ border-right:0; }
  .method-hitokoto-web{ grid-column:1/-1; margin:0; padding:30px; }
  .method-hitokoto-web dl{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
  .method-hitokoto-web .method-route{ max-width:440px; }
  .method-role{ min-height:0; }
  .method-hitokoto-web .method-role strong{ font-size:26px; }
}
@media(max-width:560px){
  #compare{ padding-block:64px; }
  .process-studio{ padding:20px 18px 25px; border-radius:14px; }
  .process-caption{ font-size:14px; }
  .process-caption span:last-child{ display:none; }
  .journey{ grid-template-columns:1fr; gap:26px; }
  .journey li{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:6px 18px; padding-bottom:22px; border-bottom:1px dashed #D4DCCB; }
  .journey li:last-child{ border-bottom:0; padding-bottom:0; }
  .journey-scene{ grid-column:1; grid-row:1/5; height:205px; align-self:center; }
  .journey-point{ grid-column:2; margin:12px 0 5px; }
  .journey-point::before{ content:none; }
  .journey h3{ grid-column:2; font-size:19px; margin-bottom:3px; }
  .journey p{ grid-column:2; font-size:14px; line-height:1.9; }
  .journey-owner{ grid-column:2; font-size:14px; padding-top:2px; }
  .scene-bubble{ font-size:14px; padding:17px 11px; width:126px; }
  .scene-user{ left:0; top:21px; padding:4px 10px; }
  .scene-note{ bottom:10px; font-size:14px; white-space:nowrap; }
  .draft-paper{ width:118px; height:150px; }
  .paper-front{ padding:9px; transform:rotate(3deg); }
  .paper-back{ transform:translate(-5px,2px) rotate(-7deg); }
  .paper-front img{ height:60px; }
  .paper-front i{ display:none; }
  .approval-sheet{ width:126px; padding:15px 10px; }
  .approval-check{ width:35px; height:35px; font-size:20px; }
  .approval-sheet b{ font-size:16px; }
  .approval-sheet > span:last-child{ font-size:14px; }
  .published-page{ width:120px; }
  .published-page img{ height:70px; }
  .published-page b{ font-size:14px; letter-spacing:0; }
  .published-seal{ font-size:14px; right:-6px; bottom:18px; padding:5px 9px; }
  .method-comparison{ grid-template-columns:1fr; gap:32px; margin-top:36px; }
  .method{ border:0; padding:0 0 24px; border-bottom:1px solid var(--line); }
  .method h3{ font-size:24px; }
  .method-top{ margin-bottom:16px; }
  .method dl{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
  .method dl > div{ min-height:0; padding-bottom:20px; }
  .method-role strong{ font-size:21px; }
  .method-hitokoto-web{ border:0; padding:26px 24px; }
  .method-hitokoto-web h3{ font-size:30px; }
  .method-hitokoto-web dl{ gap:0 22px; }
  #compare .comparison-note{ margin-top:28px; }
}
@media(max-width:360px){
  .journey li{ grid-template-columns:1fr; }
  .journey-scene{ grid-column:1; grid-row:auto; height:220px; }
  .journey-point,.journey h3,.journey p,.journey-owner{ grid-column:1; }
  .journey-point{ margin-top:0; }
  .scene-bubble{ width:190px; font-size:16px; }
  .scene-user{ left:25px; }
  .draft-paper{ width:150px; height:166px; }
  .paper-front img{ height:76px; }
  .approval-sheet{ width:180px; padding:19px; }
  .published-page{ width:160px; }
  .published-page img{ height:90px; }
  .published-seal{ right:10px; }
  .method dl,.method-hitokoto-web dl{ grid-template-columns:1fr; }
}