/* DDR-P07-AUTOMATION — page styles = the cascade of the accepted design build v1.1:
 *   part 1  package demo/design.css (unchanged since v1.0.1), rule for rule
 *   part 2  package demo/review-v1.1.css, rule for rule (the v1.1 layer: B02–B09, Shell background, form)
 *   part 3  implementation additions (documented; B04 line/marker geometry per the owner correction)
 * Satin materials point to the published WebP files; review-panel rules removed; fonts with font-display:swap and
 * the hhea vertical metrics (Chromium/Windows otherwise uses OS/2 usWin metrics and sets every line 3–9 px lower). */

/* ---- part 1: design.css ---- */
@font-face{font-family:Nimbus;src:url('../assets/fonts/NimbusSans-Regular.otf') format('opentype');font-weight:400;font-display:swap;ascent-override:72.9%;descent-override:27.1%;line-gap-override:20%}
@font-face{font-family:Nimbus;src:url('../assets/fonts/NimbusSans-Bold.otf') format('opentype');font-weight:700;font-display:swap;ascent-override:72.9%;descent-override:27.1%;line-gap-override:20%}
:root{--red:#f60019;--ink:#090c10;--muted:#506788;--line:#d5deea;--dark:#101a26;--focus:#3354b5;--space:56px;--body:20px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;color:var(--ink);font:var(--body)/1.42 Nimbus,Arial,sans-serif;background:#fff}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
button,a{touch-action:manipulation}
a{color:inherit;text-underline-offset:5px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button{border:0}
button[hidden],[hidden]{display:none!important}
p{margin:0 0 22px;color:var(--muted)}
h1,h2,h3,h4{font-weight:700;margin:0;line-height:1.1;letter-spacing:-.025em}
h1{font-size:60px;line-height:1.02;margin-bottom:28px}
h2{font-size:46px;line-height:1.08;margin-bottom:32px;max-width:1000px}
h3{font-size:25px;line-height:1.15;margin-bottom:14px}
h4{font-size:18px;line-height:1.25;margin-bottom:10px;letter-spacing:0}
em{font-style:normal;color:var(--red)}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1440px;padding-inline:var(--space);margin:auto}
.light{background:#fff url('../assets/scenes/light-satin.webp') center/cover no-repeat}
section{padding:88px 0;scroll-margin-top:100px}
section .light{background:none}
.primary{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:15px 25px;border-radius:6px;color:#fff;background:var(--red);font-size:18px;line-height:1.2;font-weight:700;text-decoration:none;transition:background .15s}
.primary:hover{background:#d90016}
.primary:active{background:#bc0013}
.primary:disabled{background:#8e99a9;color:#fff}
.text-button{background:none;color:var(--muted);font-size:18px;text-align:left;padding:8px 0;text-decoration:underline;text-underline-offset:5px;line-height:1.35}
.text-button:hover{color:#bc0013}
.small,.hint{font-size:16px;line-height:1.4}
.small{margin-top:18px;margin-bottom:0}
.actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:32px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;margin-bottom:22px}
.eyebrow:before{content:'';width:26px;height:4px;background:var(--red)}
.site-header{height:96px;background:#ffffffed;backdrop-filter:blur(16px);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 #dde3ea55}
.header-inner{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:block;width:176px;flex-shrink:0}
.logo img{mix-blend-mode:multiply}
.desktop-nav{margin-left:auto;display:flex;gap:32px;font-size:16px}
.desktop-nav a{text-decoration:none;padding-block:16px}
.desktop-nav a:hover{color:var(--red)}
.header-cta{margin-left:20px}
.menu-toggle{display:none}
.hero{padding-top:55px;padding-bottom:80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.03fr 1fr;align-items:center;gap:0}
.hero-text{position:relative;z-index:2}
.hero .lead{font-size:21px}
.hero-art{margin-left:12px;margin-right:-56px;align-self:center;display:block;mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 95%,transparent 100%)}
.hero-art img{width:100%}
.hero .actions{gap:20px}
.problem-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.problem-grid h2{font-size:44px}
.problem-list{margin:0;padding:0;list-style:none}
.problem-list li{padding:0 0 26px 33px;position:relative;color:var(--muted);line-height:1.45}
.problem-list li:before{content:'';position:absolute;top:13px;left:0;width:18px;height:3px;background:var(--red)}
.problem-list li:last-child{padding-bottom:0}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px 72px;margin:48px 0}
.scope-item{display:flex;align-items:flex-start;gap:24px}
.num{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:58px;height:58px;border:1px solid #d8e2ed;border-radius:10px;box-shadow:0 8px 16px #33486214;background:#fff;color:var(--red);font-weight:700;font-size:26px;line-height:1}
.scope-item p{margin:0}
.scope-check{max-width:950px;margin-bottom:36px}
.boundary{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:32px 36px;background:#edf3f9d6;border:1px solid #dae4ef;border-radius:12px}
.boundary>p{color:var(--ink);border-left:3px solid var(--red);padding-left:22px;margin:0}
.boundary p{font-size:18px}
.boundary .text-button{font-weight:700}
.scenario{background:linear-gradient(#0b141ecc,#0b141ecc),url('../assets/scenes/dark-satin.webp') center top/100% auto repeat-y;color:#fff;padding-top:92px}
.scenario h2{max-width:860px}
.scenario p{color:#c9d8e7}
.scenario-intro{max-width:790px}
.scenario-route{list-style:none;margin:48px 0 24px;padding:0;position:relative}
.scenario-route:before{content:'';position:absolute;top:56px;bottom:130px;left:50%;width:2px;background:#f60019;box-shadow:0 0 12px #f6001966}
.scenario-step{position:relative;display:grid;grid-template-columns:1fr 340px 1fr;column-gap:42px;min-height:345px;align-items:center;padding:22px 0}
.scenario-step figure{grid-column:2;margin:0;position:relative;z-index:1}
.scenario-step figure img{width:340px}
.scenario-step .step-copy{grid-column:3;grid-row:1;position:relative}
.scenario-step:nth-child(even) .step-copy{grid-column:1}
.scenario-step:nth-child(even) figure{grid-column:2}
.scenario-step .step-copy:before{content:'';position:absolute;top:27px;right:calc(100% + 16px);width:45px;height:2px;background:var(--red)}
.scenario-step:nth-child(even) .step-copy:before{right:auto;left:calc(100% + 16px)}
.step-number{position:absolute;left:calc(50% + 177px);top:40px;color:var(--red);background:#fff;box-shadow:0 6px 20px #0003;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:24px;z-index:3}
.scenario-step:nth-child(even) .step-number{left:calc(50% - 219px)}
.scenario-step p{font-size:19px;line-height:1.4}
.scenario-step h3{font-size:26px;color:white}
.manual{margin-top:24px;border-top:1px solid #61768c55;padding-top:20px}
.manual p{margin:0;font-size:17px;line-height:1.4}
.manual h4{color:#fff;font-size:17px;line-height:1.3;letter-spacing:0}
.scenario-end{border-top:1px solid #91a5ba4d;padding-top:32px;display:flex;gap:60px;align-items:center}
.scenario-end p{margin:0;max-width:900px;font-size:18px}
.scenario-end .primary{flex-shrink:0}
.acceptance-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}
.acceptance-art{padding-top:38px}
.acceptance-art img{max-height:500px;width:390px;object-fit:contain;margin:0 auto 34px}
.handover-note{border-left:3px solid var(--red);padding-left:25px;color:var(--ink);font-size:18px}
.check-list{list-style:none;margin:38px 0 0;padding:0}
.check-list li{display:flex;gap:22px;margin-bottom:26px}
.check{width:28px;height:28px;border-radius:50%;color:#fff;background:var(--red);font-size:19px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:3px}
.check-list h3{font-size:22px;margin-bottom:8px}
.check-list p{font-size:18px;margin:0}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin:48px 0}
.process-grid .scope-item{display:block}
.process-grid .num{display:inline-flex;margin-bottom:24px}
.process-grid h3{font-size:24px;min-height:82px}
.process-grid p{font-size:18px}
.team-note{padding:32px 36px;border:1px solid #d9e3ed;background:#eef4faab;border-radius:12px;display:grid;grid-template-columns:1.1fr 1fr;gap:50px}
.team-note p{font-size:18px;margin:0}
.team-note p+ p{border-left:1px solid #cbd6e4;padding-left:30px}
.cost-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:58px;align-items:start}
.cost-paper{background:#fffffff2;border:1px solid #d6e0ec;box-shadow:0 14px 38px #536b8617;border-radius:12px;padding:36px}
.cost-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cost-columns article:first-child{grid-column:1 / -1;border-bottom:1px solid #d7e0eb;padding-bottom:24px}
.cost-columns article:first-child h3{font-size:29px;color:#204670}
.cost-columns article:first-child p{font-size:22px;max-width:550px;margin:0}
.cost-columns h3{font-size:24px}
.cost-columns p{font-size:18px}
.cost-bottom{border-top:1px solid #d7e0eb;padding-top:25px}
.cost-bottom p{font-size:17px}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:72px}
.faq-item{border-bottom:1px solid #cbd6e3;background:#ffffff8c}
.faq-item:first-child{border-top:1px solid #cbd6e3}
.faq-item h3{margin:0}
.faq-question{padding:25px 0;background:none;color:var(--ink);font-weight:700;font-size:21px;line-height:1.3;text-align:left;width:100%;display:flex;gap:24px;align-items:center;justify-content:space-between}
.faq-question:hover{color:#bb0016}
.faq-mark{font-size:28px;font-weight:400;color:var(--red);width:28px;flex-shrink:0;text-align:center}
.faq-answer{padding:0 48px 26px 0}
.faq-answer p{margin:0;font-size:19px}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.contact-invitation h2{border-left:5px solid var(--red);padding-left:24px}
.form-paper{padding:38px;background:#ffffffee;border:1px solid #d5e0ed;border-radius:12px;box-shadow:0 12px 34px #25426018}
fieldset{padding:0;margin:0;border:0;min-width:0}
label,legend{font-size:18px;line-height:1.3}
form>fieldset>label{display:block;margin-bottom:10px}
input:not([type=radio]):not([type=checkbox]),textarea,select{border:1px solid #bdcbdc;border-radius:5px;width:100%;background:#fff;color:var(--ink);padding:14px 16px;min-height:54px;outline-offset:3px;font-size:18px;line-height:1.4}
input::placeholder,textarea::placeholder{color:#63758d;opacity:1}
textarea{height:146px;resize:vertical}
input:disabled{background:#edf1f5!important;color:#617186}
input:disabled::placeholder{color:#66778d}
.required{color:#a90012}
form .hint{margin:8px 0 24px;color:#546b87}
form .hint.after-button{margin:18px 0 0}
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.channel-option{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:8px 5px;border:1px solid #bdcbdc;border-radius:5px;font-size:15px;cursor:pointer;background:#fff}
.channel-option:has(input:checked){color:#a60012;border-color:#f60019;background:#fff4f5}
.channel-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.channel-option input{appearance:none;width:15px;height:15px;border:1px solid #7d8da3;border-radius:50%;margin:0;flex-shrink:0}
.channel-option input:checked{border:5px solid var(--red)}
.channel-field legend{padding:0}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:4px}
.consent input{width:20px;height:20px;flex-shrink:0;margin:3px 0 0;accent-color:var(--red)}
.consent label{font-size:16px;line-height:1.4}
.inline-link{display:inline;background:none;border:0;padding:0;color:var(--muted);font-size:inherit;line-height:inherit;text-decoration:underline;text-underline-offset:3px;text-align:left}
.policy{font-size:16px;margin:14px 0 25px}
.form-submit,.form-another{width:100%}
.field-error{color:#ae0014;font-size:16px;margin:-12px 0 22px}
.consent+.field-error{margin-top:8px}
.validation-summary{padding:14px 16px;background:#fff0f2;border-left:3px solid #bd0016;color:#990011;font-size:17px;margin-bottom:24px}
[aria-invalid=true]{border-color:#bd0016!important}
#form-status{padding:24px;background:#edf3f9;border:1px solid #cbd6e3;border-radius:8px;margin-bottom:24px}
#form-status h3{font-size:26px}
#form-status p{font-size:18px;margin:0}
form[data-state=error] #form-status{background:#fff3f4;border-color:#e3b2b8}
form[data-state=success] #form-status{border-left:4px solid var(--red)}
form[aria-busy=true]{opacity:.75}
footer{background:#f8fafc;border-top:1px solid #e0e6ed;padding:38px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.footer-inner .logo{width:150px}
.footer-inner nav{display:flex;gap:25px;font-size:16px}
.footer-inner nav a{text-decoration:none}
.footer-inner .text-button{font-size:14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:20px;background:#fff;padding:15px;z-index:100}
.skip:focus{top:10px}
dialog{padding:36px;border:1px solid #c5d2e2;border-radius:12px;max-width:min(620px,calc(100vw - 32px));box-shadow:0 25px 100px #0005}
dialog::backdrop{background:#091423aa;backdrop-filter:blur(3px)}
dialog h2{font-size:30px}
dialog p{font-size:18px}
#mobile-menu{padding:24px;width:390px;margin:12px 12px 0 auto;background:#fff url('../assets/scenes/light-satin.webp') center/cover;max-height:calc(100dvh - 24px)}
.menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.menu-head img{width:146px}
.close-menu{font-size:36px;background:none;width:48px;height:48px}
.menu-head img{mix-blend-mode:multiply}
#mobile-menu nav{display:flex;flex-direction:column;margin-bottom:30px}
#mobile-menu nav a{font-size:24px;padding:20px 0;text-decoration:none;border-bottom:1px solid #d2dce8}
#mobile-menu>.primary{width:100%}
#mobile-menu>.text-button{margin-top:16px;width:100%;text-align:center}
@media(min-width:1000px) and (max-width:1299px){
  :root{--space:40px;--body:19px}
  h1{font-size:50px}
  h2{font-size:40px}
  .problem-grid h2{font-size:40px}
  .hero .lead{font-size:20px}
  .hero-art{margin-right:-40px}
  .hero .actions{gap:10px}
  .hero .text-button{font-size:17px}
  .header-inner{gap:16px}
  .desktop-nav{gap:20px}
  .header-cta{margin-left:4px}
  .primary{padding-inline:20px}
  .problem-grid{gap:60px}
  .scope-grid{gap:40px}
  .scenario-step{grid-template-columns:1fr 280px 1fr;gap:28px;min-height:400px}
  .scenario-step figure img{width:280px}
  .step-number{left:calc(50% + 139px)}
  .scenario-step:nth-child(even) .step-number{left:calc(50% - 181px)}
  .scenario-step .step-copy:before{width:26px;right:calc(100% + 10px)}
  .scenario-step:nth-child(even) .step-copy:before{left:calc(100% + 10px)}
  .scenario-step h3{font-size:24px}
  .scenario-step p{font-size:18px}
  .scenario-step .manual p,.scenario-step .manual h4{font-size:16px}
  .acceptance-grid{gap:48px}
  .process-grid{gap:28px}
  .process-grid h3{font-size:22px;min-height:100px}
  .cost-grid{gap:40px;grid-template-columns:.7fr 1.3fr}
  .cost-paper{padding:28px}
  .cost-columns{gap:24px}
  .contact-grid{gap:48px}
  .form-paper{padding:30px}
  .channels{grid-template-columns:1fr 1fr}
  .channel-option{font-size:17px}
  .footer-inner{gap:24px}
  .footer-inner nav{gap:16px}
}
@media(max-width:999px){
  :root{--space:32px;--body:18px}
  .wrap{max-width:760px}
  .desktop-nav{display:none}
  .header-inner{max-width:none}
  .site-header{height:80px}
  .header-cta{margin-left:auto}
  .menu-toggle{display:flex;background:none;width:44px;height:44px;flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .menu-toggle span{width:25px;height:2px;background:#090c10}
  .logo{width:150px}
  .hero-grid,.problem-grid,.acceptance-grid,.cost-grid,.faq-grid,.contact-grid{display:flex;flex-direction:column;gap:34px}
  .hero-grid{gap:30px}
  .hero-art{margin:0 auto;max-width:540px;width:100%;mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%)}
  .hero-art img{width:100%}
  .hero{padding:44px 0 50px}
  .hero .lead{font-size:18px}
  .hero p{font-size:18px}
  h1{font-size:44px;line-height:1.06}
  h2,.problem-grid h2{font-size:36px;line-height:1.12;margin-bottom:28px}
  h3{font-size:25px}
  .hero .small{font-size:16px}
  .scope-grid{grid-template-columns:1fr;gap:36px;margin:32px 0}
  .scope-item{gap:20px}
  .num{min-width:50px;height:50px;font-size:23px}
  .boundary{display:block;padding:28px}
  .boundary>p{margin-bottom:24px}
  .boundary p{font-size:18px}
  .scenario-route:before{left:19px;top:40px;bottom:110px}
  .scenario-step{display:flex;flex-direction:column;align-items:stretch;padding:0 0 56px 60px;min-height:0}
  .scenario-step figure{order:1;width:290px;max-width:100%;margin:0 0 24px}
  .scenario-step figure img{width:100%}
  .scenario-step .step-copy{display:contents}
  .scenario-step h3{order:0;min-height:42px;font-size:26px;margin:0 0 18px;display:flex;align-items:center}
  .scenario-step .step-copy>p{order:2;font-size:18px;margin-bottom:0}
  .scenario-step .manual{order:3;margin-top:24px}
  .scenario-step .manual p,.scenario-step .manual h4{font-size:17px}
  .scenario-step .step-copy:before{display:none}
  .step-number,.scenario-step:nth-child(even) .step-number{left:0;top:2px;width:40px;height:40px;font-size:24px}
  .scenario-step:last-child{padding-bottom:20px}
  .scenario-end{display:block;margin-top:24px}
  .scenario-end .primary{margin-top:28px}
  .acceptance-art{padding:0;display:contents}
  .acceptance-grid>div:last-child{display:contents}
  .acceptance-grid h2{order:0;margin-bottom:0}
  .acceptance-grid>div:last-child>p{order:1;margin-bottom:0}
  .acceptance-art img{order:2;max-width:320px;width:80%;max-height:none;margin:0 auto}
  .check-list{order:3;margin:0}
  .handover-note{order:4;margin:0}
  .process-grid{grid-template-columns:1fr 1fr;gap:40px}
  .process-grid h3{min-height:0;font-size:24px}
  .team-note{display:block;padding:28px}
  .team-note p+p{border-left:0;border-top:1px solid #cbd6e4;margin-top:24px;padding:24px 0 0}
  .cost-paper{width:100%;padding:28px}
  .cost-columns{grid-template-columns:1fr}
  .cost-columns article:first-child{grid-column:auto}
  .cost-columns article{padding-bottom:20px;border-bottom:1px solid #d7e0eb}
  .cost-columns article:last-child{border:0;padding-bottom:0}
  .cost-columns p{margin-bottom:0}
  .cost-bottom{margin-top:28px}
  .faq-grid>div{width:100%}
  .contact-grid{gap:30px}
  .contact-grid>div{width:100%}
  .contact-invitation h2{padding-left:20px}
  .form-paper{padding:30px}
  .footer-inner{flex-wrap:wrap}
  .footer-inner nav{flex-wrap:wrap}
  .scenario h2{max-width:100%}
  .scenario{background-size:auto 1300px}
  .scenario-end p{font-size:18px}
  .acceptance-grid{gap:28px}
}
@media(max-width:599px){
  :root{--space:24px}
  .wrap{max-width:none}
  section{padding:58px 0}
  .site-header{height:76px}
  .header-inner{gap:8px}
  .header-cta{display:none}
  .menu-toggle{margin-left:auto}
  .logo{width:144px}
  .scrolled .site-header .logo{width:92px}
  .scrolled .header-cta{display:inline-flex;font-size:14px;min-height:44px;padding:10px 12px;line-height:1.2;margin-left:auto;max-width:172px}
  .scrolled .menu-toggle{margin-left:0}
  .hero{padding-top:28px;padding-bottom:38px}
  .hero-art{max-width:none;width:calc(100% + 48px);margin:0 -24px}
  .hero-grid{gap:18px}
  h1{font-size:38px;line-height:1.06;letter-spacing:-.026em;margin-bottom:24px}
  h2,.problem-grid h2{font-size:32px;line-height:1.13;letter-spacing:-.02em}
  h3{font-size:25px}
  .eyebrow{font-size:14px!important;gap:8px;margin-bottom:20px}
  .hero .actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:28px}
  .primary{font-size:18px;min-height:54px;padding:15px 18px}
  .hero .text-button{text-align:center}
  .small{font-size:16px!important}
  .problem-list li{padding-left:27px;padding-bottom:24px}
  .scope-item{display:block}
  .scope-item .num{display:inline-flex;margin-bottom:18px}
  .scope-grid{gap:36px}
  .scope-grid h3{font-size:25px}
  .scope-check{margin-bottom:30px}
  .boundary{padding:24px 20px}
  .boundary>p{padding-left:15px}
  .boundary .text-button{font-size:18px}
  .scenario{padding-top:60px}
  .scenario-route{margin-top:38px}
  .scenario-step{padding-left:49px}
  .scenario-route:before{left:16px;bottom:110px}
  .step-number,.scenario-step:nth-child(even) .step-number{width:34px;height:34px;font-size:21px;top:3px}
  .scenario-step h3{font-size:24px;line-height:1.16}
  .scenario-step .manual{padding-top:18px}
  .scenario-step .manual p{font-size:17px}
  .scenario-step .manual h4{font-size:17px}
  .scenario-end .primary{width:100%}
  .scenario-end{padding-top:28px}
  .scenario-step figure{width:100%;margin-bottom:20px}
  .scenario-step figure img{width:100%;max-height:290px;object-fit:contain}
  .acceptance-grid{gap:28px}
  .acceptance-art img{width:80%;max-width:270px}
  .check-list li{gap:16px;margin-bottom:28px}
  .check-list h3{font-size:23px}
  .check-list p{font-size:18px}
  .check{width:25px;height:25px;font-size:17px}
  .handover-note{font-size:18px;padding-left:18px}
  .process-grid{display:block;margin-top:34px;margin-bottom:36px}
  .process-grid .scope-item{margin-bottom:36px}
  .process-grid .num{margin-bottom:18px}
  .process-grid p{font-size:18px}
  .process-grid h3{font-size:25px}
  .team-note{padding:24px}
  .team-note p{font-size:18px}
  .cost-paper{padding:25px 22px}
  .cost-columns{gap:24px}
  .cost-columns h3{font-size:25px}
  .cost-columns article:first-child h3{font-size:26px}
  .cost-columns article:first-child p{font-size:20px}
  .cost-bottom .primary{width:100%}
  .faq-grid{gap:4px}
  .faq-question{font-size:20px;padding:23px 0;gap:18px}
  .faq-answer{padding-right:0}
  .faq-answer p{font-size:18px}
  .faq-mark{width:24px}
  .contact-invitation h2{border-left:4px solid var(--red);padding-left:18px}
  .form-paper{padding:26px 20px}
  .channels{grid-template-columns:1fr 1fr;gap:10px}
  .channel-option{font-size:17px;min-height:48px}
  .hint,.small{font-size:16px}
  .form-paper label,.form-paper legend{font-size:18px}
  .form-paper .consent label{font-size:16px}
  textarea{height:180px}
  input:not([type=radio]):not([type=checkbox]),textarea,select{font-size:18px;padding:13px 12px}
  select{padding-right:25px!important;font-size:16px!important}
  .policy{font-size:16px}
  #form-status{padding:20px}
  #form-status h3{font-size:26px}
  .footer-inner{display:block}
  .footer-inner .logo{width:144px;margin-bottom:26px}
  .footer-inner nav{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;font-size:16px}
  .footer-inner .text-button{font-size:16px;margin-top:26px}
  #mobile-menu{width:calc(100% - 24px);max-width:none}
}
@media(max-width:374px){
  :root{--space:20px}
  h1{font-size:35px;line-height:1.08}
  .hero-art{width:calc(100% + 40px);margin-inline:-20px}
  .form-paper{padding:24px 16px}
  .scrolled .site-header .logo{width:80px}
  .scrolled .header-cta{max-width:165px;padding-inline:9px}
  .scenario-step{padding-left:45px}
  .scenario-step h3{font-size:23px}
  h2,.problem-grid h2{font-size:31px}
  .contact-invitation h2{padding-left:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important}
}
.scenario{background-size:cover;background-repeat:no-repeat}
.primary{font-size:19px}
.inline-link{cursor:pointer}
.text-button{min-height:44px}
@media(min-width:1300px){
  .step-number{width:34px;height:34px;font-size:21px;left:calc(50% + 169px)}
  .scenario-step:nth-child(even) .step-number{left:calc(50% - 203px)}
}
@media(min-width:1000px) and (max-width:1299px){
  .step-number{width:28px;height:28px;font-size:19px;left:calc(50% + 132px)}
  .scenario-step:nth-child(even) .step-number{left:calc(50% - 160px)}
}
@media(max-width:599px){
  .scrolled .header-cta{background:#d90016;font-size:14px}
}
/* ---- part 2: review-v1.1.css ---- */
.site-header{background:#fefefe;backdrop-filter:none}
.site-header .logo img{mix-blend-mode:normal}
summary{cursor:pointer;touch-action:manipulation}
summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
strong{font-weight:700}
.situations h2{max-width:1140px}
.situation-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;list-style:none;margin:0 0 32px;padding:0;gap:0 64px}
.situation-list li{padding:20px 0 22px;border-bottom:1px solid #d7e0ea;color:var(--muted)}
.situation-list li:nth-child(3),.situation-list li:last-child{border-bottom:0}
.situation-list strong{color:var(--ink)}
.team-invitation{border-left:3px solid var(--red);padding:10px 0 10px 26px;margin:0;max-width:1200px;color:var(--muted)}
.team-invitation strong{color:var(--ink)}
.service-sheet{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dbe4ee;border-radius:15px;overflow:hidden;background:linear-gradient(140deg,#fffffff5,#f7faffee);box-shadow:0 14px 32px #425b7612;margin:38px 0 28px}
.service-sheet article{padding:30px 34px}
.service-sheet article:nth-child(odd){border-right:1px solid #dbe4ee}
.service-sheet article:nth-child(-n+2){border-bottom:1px solid #dbe4ee}
.service-sheet h3{font-size:26px}
.service-sheet p{margin:0}
.service-check{max-width:1240px;margin:0 0 30px}
.service-check strong{color:var(--ink)}
.boundary p{font-size:18px;line-height:1.45}
.boundary strong{font-weight:700}
.boundary>div>p{margin-bottom:12px}
.connection-section h2{max-width:1130px}
.connection-section .scenario-intro{max-width:1020px}
.connection-sheet{margin:36px 0 28px;border:1px solid #778da126;border-radius:18px;background:#09131d33;padding:20px 24px 10px}
.connection-column-head{margin-left:76%;padding:0 0 16px 20px;font-size:18px;line-height:1.3;font-weight:700}
.connection-flow{list-style:none;position:relative;margin:0;padding:0}
.connection-flow:before{content:'';position:absolute;top:20px;bottom:32px;left:16px;width:2px;background:var(--red);box-shadow:0 0 8px #f6001940}
.connection-row{display:grid;grid-template-columns:32px 144px 250px 1fr .85fr;gap:24px;align-items:center;padding:22px 0;border-top:1px solid #71839933;position:relative;min-height:174px}
.connection-row h3{font-size:24px;line-height:1.17;margin:0}
.connection-row figure{margin:0;position:relative;z-index:1}
.connection-row figure img{width:144px;max-height:155px;object-fit:contain}
.connection-number{background:#fff;color:var(--red);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:20px;font-weight:700;position:relative;z-index:2}
.connection-row p{margin:0;font-size:19px;line-height:1.42}
.connection-row strong{color:#fff}
.connection-manual{padding-left:20px;border-left:1px solid #71839933}
.connection-manual p{font-size:18px}
.manual-mobile{display:none}
.scenario-end{gap:32px}
.scenario-end p{font-size:18px}
.verification-head{display:grid;grid-template-columns:1fr 152px;gap:48px;align-items:center;margin-bottom:30px}
.verification-head h2{margin-bottom:24px;max-width:1100px}
.verification-head p{max-width:1050px;margin:0}
.verification-head>img{width:152px}
.verification-sheet{display:grid;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:6px 32px;background:#fffffff0;border:1px solid #dce5ee;border-radius:15px;box-shadow:0 16px 34px #3a4a6210}
.verification-sheet li{padding:24px 0;border-bottom:1px solid #dbe4ed}
.verification-sheet li:nth-child(odd){padding-right:34px;border-right:1px solid #dbe4ed}
.verification-sheet li:nth-child(even){padding-left:34px}
.verification-sheet li:nth-last-child(-n+2){border-bottom:0}
.verification-sheet h3{font-size:23px;line-height:1.2;margin-bottom:10px}
.verification-sheet p{font-size:19px;margin:0}
.handover-strip{margin:24px 0 0;border-left:3px solid var(--red);padding:20px 24px;background:#ffffffe0;box-shadow:0 8px 24px #2d425815;font-size:19px;color:var(--ink);border-radius:0 10px 10px 0}
.work-steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:38px 0 38px;gap:32px;position:relative}
.work-steps li{position:relative;border-top:2px solid #cad5e2;padding-top:24px}
.phase-number{display:inline-block;color:var(--red);font-size:22px;font-weight:700;line-height:1;margin-bottom:18px}
.work-steps h3{font-size:24px;line-height:1.18;margin-bottom:16px;min-height:85px}
.work-steps p{font-size:18px;margin:0}
.team-note strong{color:var(--ink)}
.pricing h2{max-width:1120px}
.pricing-intro{max-width:1000px;margin-bottom:32px}
.price-sheet{padding:34px;background:#fffffff2;border:1px solid #d6e1ed;border-radius:15px;box-shadow:0 14px 36px #536b8617}
.price-parts{display:grid;grid-template-columns:.88fr 1.2fr 1fr;gap:28px}
.price-parts article+article{border-left:1px solid #dbe4ee;padding-left:28px}
.price-parts h3{font-size:24px}
.price-parts article:first-child h3{color:#204670}
.price-parts p{font-size:19px;margin:0}
.price-parts strong{font-weight:700;color:var(--ink)}
.price-bottom{display:flex;justify-content:space-between;gap:36px;align-items:center;border-top:1px solid #d7e0eb;margin-top:30px;padding-top:26px}
.price-bottom p{font-size:18px;margin:0;max-width:850px}
.price-bottom .primary{flex-shrink:0}
.faq-frame{max-width:1160px;margin:auto}
.faq-list{border:1px solid #d9e2ed;border-radius:14px;padding:0 30px;background:#ffffffed;box-shadow:0 10px 26px #42576c0a}
.faq-item{background:transparent}
.faq-item:first-child{border-top:0}
.faq-item:last-child{border-bottom:0}
.faq-question{padding:22px 0;font-size:22px;min-height:70px}
.faq-answer{padding-bottom:24px}
.faq-answer p{font-size:19px;line-height:1.45;max-width:990px}
.contact-section>.wrap{max-width:1272px}
.contact-invitation h2{max-width:1100px}
.contact-invitation>p{max-width:1000px;margin-bottom:32px}
.form-paper{padding:32px}
.form-fields-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'context channels' 'task contact' 'task name' 'consent consent';gap:22px 36px;align-items:start}
.context-box{grid-area:context}
.task-box{grid-area:task}
.channel-field{grid-area:channels}
.contact-box{grid-area:contact}
.optional-name{grid-area:name}
.consent-box{grid-area:consent;border-top:1px solid #dce4ee;padding-top:22px}
.field-box>label{display:block;margin-bottom:10px;font-weight:700}
.channel-field legend{font-weight:700}
.form-paper textarea{height:156px}
.form-paper .hint{margin:8px 0 0;font-size:16px}
.form-paper .field-error{margin:8px 0 0;font-size:16px}
.form-paper .channels{grid-template-columns:1fr 1fr;margin-top:10px}
.form-paper .channel-option{font-size:17px;min-height:48px}
.optional-name{border:1px solid #d8e2ed;border-radius:7px;background:#fafcff;min-width:0}
.optional-name summary{list-style:none;display:flex;gap:10px;align-items:center;min-height:48px;padding:12px 14px;font-size:17px;font-weight:700}
.optional-name summary::-webkit-details-marker{display:none}
.optional-note{font-weight:400;font-size:15px;color:var(--muted)}
.disclosure-mark{margin-left:auto;font-weight:400;color:var(--red);font-size:24px;line-height:1}
.optional-name[open] .disclosure-mark{transform:rotate(45deg)}
.optional-name-field{padding:0 14px 14px}
.optional-name-field input{background:#fff}
.consent-box .policy{margin:6px 0 0;min-height:38px;padding:6px 0;font-size:16px}
.consent-box .consent{margin:0}
.consent-box .consent label{font-size:17px}
.submit-row{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center;margin-top:22px}
.submit-row .primary{grid-column:2;grid-row:1}
.submit-row .after-button{grid-column:1;grid-row:1;margin:0!important}
.form-paper form[data-state=success] .submit-row{grid-template-columns:1fr}
.form-paper form[data-state=success] .form-another{grid-column:1;max-width:350px}
.form-paper form[data-state=success] .after-button{grid-row:2}
.validation-summary{color:#ae0014;padding:12px 16px;background:#fff2f3;border:1px solid #e7aeb6;border-radius:5px;margin-bottom:22px}
@media(min-width:1000px) and (max-width:1299px){
  .situation-list{gap:0 44px}
  .service-sheet article{padding:26px}
  .connection-sheet{padding-inline:18px}
  .connection-row{grid-template-columns:28px 112px 200px 1fr .85fr;gap:18px;min-height:180px}
  .connection-flow:before{left:13px}
  .connection-number{width:28px;height:28px;font-size:18px}
  .connection-row figure img{width:112px}
  .connection-row h3{font-size:22px}
  .connection-row p,.connection-manual p{font-size:18px}
  .connection-column-head{margin-left:75%;font-size:17px;padding-left:16px}
  .connection-manual{padding-left:16px}
  .verification-head{grid-template-columns:1fr 136px}
  .verification-head>img{width:136px}
  .work-steps{gap:26px}
  .work-steps h3{font-size:22px;min-height:104px}
  .price-sheet{padding:28px}
  .price-parts{gap:24px;grid-template-columns:.9fr 1.2fr 1fr}
  .price-parts article+article{padding-left:24px}
  .price-parts h3{font-size:22px}
  .price-parts p{font-size:18px}
  .contact-section>.wrap{max-width:1220px}
  .form-fields-grid{gap:20px 28px}
  .form-paper{padding:28px}
  .optional-name summary{flex-wrap:wrap;gap:4px 12px}
  .optional-note{font-size:15px}
  .optional-name summary .disclosure-mark{align-self:center}
  .faq-question{font-size:21px}
}
@media(max-width:1099px) and (min-width:1000px){
  .connection-row{grid-template-columns:28px 112px 1fr .8fr;grid-template-rows:auto auto;gap:10px 20px}
  .connection-row .connection-number{grid-column:1;grid-row:1/3}
  .connection-row figure{grid-column:2;grid-row:1/3}
  .connection-row h3{grid-column:3;grid-row:1}
  .connection-happens{grid-column:3;grid-row:2}
  .connection-manual{grid-column:4;grid-row:1/3}
  .connection-column-head{margin-left:72%}
  .price-parts{grid-template-columns:1fr 1fr}
  .price-parts article:first-child{grid-column:1/-1;border-bottom:1px solid #dbe4ee;padding:0 0 24px}
  .price-parts article:nth-child(2){padding:0;border:0}
  .price-bottom{align-items:flex-start}
  .submit-row{grid-template-columns:1fr 260px}
}
@media(max-width:999px){
  .situation-list{gap:0 32px}
  .situations h2{max-width:100%}
  .service-sheet{margin-top:30px}
  .service-sheet article{padding:24px}
  .service-sheet h3{font-size:24px}
  .service-sheet p{font-size:18px}
  .connection-sheet{padding:16px 22px;margin-top:28px}
  .connection-column-head{display:none}
  .connection-flow:before{left:15px;bottom:30px}
  .connection-row{grid-template-columns:32px 90px 1fr;gap:10px 20px;align-items:start;padding:24px 0;min-height:0}
  .connection-number{grid-column:1;grid-row:1/4;margin-top:10px}
  .connection-row figure{grid-column:2;grid-row:1;margin:0}
  .connection-row figure img{width:90px;max-height:100px}
  .connection-row h3{grid-column:3;grid-row:1;align-self:center;font-size:24px}
  .connection-happens{grid-column:2/-1;grid-row:2}
  .connection-manual{grid-column:2/-1;grid-row:3;padding:16px 18px;border:1px solid #71839933;background:#1828379c;border-radius:8px;margin-top:4px}
  .connection-row p,.connection-manual p{font-size:18px;line-height:1.43}
  .manual-mobile{display:block;font-size:16px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:8px}
  .connection-row strong{font-weight:700}
  .verification-head{grid-template-columns:1fr 120px;gap:28px}
  .verification-head>img{width:120px}
  .verification-sheet{padding-inline:24px}
  .verification-sheet li:nth-child(odd){padding-right:24px}
  .verification-sheet li:nth-child(even){padding-left:24px}
  .verification-sheet p,.handover-strip{font-size:18px}
  .work-steps{grid-template-columns:1fr 1fr;gap:30px}
  .work-steps h3{min-height:0}
  .price-parts{grid-template-columns:1fr 1fr;gap:24px}
  .price-parts article:first-child{grid-column:1/-1;padding:0 0 24px;border-bottom:1px solid #dbe4ee}
  .price-parts article:nth-child(2){padding:0;border:0}
  .price-parts article:nth-child(3){padding-left:24px}
  .price-bottom{display:block}
  .price-bottom .primary{margin-top:24px}
  .faq-list{padding-inline:24px}
  .faq-question{font-size:21px}
  .faq-answer p{font-size:18px}
  .contact-section>.wrap{max-width:760px}
  .contact-invitation h2{max-width:100%}
  .form-fields-grid{grid-template-columns:1fr;grid-template-areas:'context' 'task' 'channels' 'contact' 'name' 'consent';gap:22px}
  .form-paper{padding:28px}
  .form-paper textarea{height:156px}
  .submit-row{grid-template-columns:1fr;gap:16px;margin-top:22px}
  .submit-row .primary{grid-column:1;grid-row:1}
  .submit-row .after-button{grid-column:1;grid-row:2}
  .optional-name summary{font-size:18px}
  .optional-note{font-size:16px}
  .consent-box .consent label{font-size:17px}
  .consent-box .policy{min-height:44px}
  .verification-head h2{margin-bottom:22px}
  .team-invitation{padding-left:22px}
  .work-steps .phase-number{margin-bottom:14px}
}
@media(max-width:599px){
  #B02,#B03,#B05,#B06,#B07,#B08,#B09{padding:48px 0}
  .situation-list{display:block;margin-bottom:24px}
  .situation-list li{padding:18px 0}
  .situation-list li:nth-child(3){border-bottom:1px solid #d7e0ea}
  .situation-list li:last-child{border:0}
  .situation-list strong{font-weight:700}
  .team-invitation{padding:8px 0 8px 18px}
  .service-sheet{display:block;margin:28px -8px 24px;border-radius:12px}
  .service-sheet article{padding:24px 20px}
  .service-sheet article:nth-child(odd){border-right:0}
  .service-sheet article+article{border-top:1px solid #dbe4ee}
  .service-sheet article:nth-child(-n+2){border-bottom:0}
  .service-sheet h3{font-size:24px;line-height:1.17;margin-bottom:12px}
  .service-check{margin-bottom:26px}
  .boundary{padding:22px 18px;margin-inline:-4px}
  .boundary>p{margin-bottom:20px}
  .boundary p{font-size:18px}
  .connection-section{padding:52px 0}
  .connection-sheet{padding:0;margin:28px 0 24px;border:0;background:none;box-shadow:none}
  .connection-flow:before{left:12px;top:26px;bottom:60px}
  .connection-row{grid-template-columns:26px 70px 1fr;gap:12px 12px;padding:22px 0 26px;border-top:1px solid #71839933}
  .connection-row:first-child{border-top:0;padding-top:0}
  .connection-row h3{font-size:23px;line-height:1.17;grid-column:3;margin:0}
  .connection-number{width:26px;height:26px;font-size:17px;margin-top:18px}
  .connection-row figure img{width:70px;max-height:90px}
  .connection-row figure{align-self:center}
  .connection-happens{grid-column:2/-1}
  .connection-manual{grid-column:2/-1;padding:14px 15px}
  .connection-row p,.connection-manual p{font-size:18px;line-height:1.44}
  .manual-mobile{font-size:15px;line-height:1.3;margin-bottom:8px}
  .scenario-end{margin-top:0;padding-top:24px}
  .scenario-end p{font-size:18px}
  .scenario-end .primary{margin-top:22px}
  .verification-head{display:block;position:relative;padding:0}
  .verification-head h2{margin-right:0;margin-bottom:22px}
  .verification-head>img{width:78px;float:right;margin:0 0 12px 18px;display:none}
  .verification-head>div{display:contents}
  .verification-head p{font-size:18px;margin:0}
  .verification-sheet{display:block;padding:0 20px;margin-inline:-8px}
  .verification-sheet li{padding:22px 0!important;border-right:0!important;border-bottom:1px solid #dbe4ed!important}
  .verification-sheet li:last-child{border-bottom:0!important}
  .verification-sheet h3{font-size:23px;margin-bottom:9px}
  .verification-sheet p{font-size:18px}
  .handover-strip{padding:18px 18px;font-size:18px;margin-top:22px}
  .work-steps{display:block;margin:28px 0}
  .work-steps li{border:0;border-left:2px solid #cbd6e3;padding:0 0 28px 24px;margin-left:10px}
  .work-steps li:last-child{padding-bottom:0}
  .phase-number{position:absolute;left:-12px;top:0;background:#fff;line-height:26px;padding:0 3px;font-size:19px;margin:0!important}
  .work-steps h3{font-size:24px;line-height:1.18;margin-bottom:12px}
  .work-steps p{font-size:18px}
  .team-note{padding:24px 20px}
  .team-note p{font-size:18px}
  .pricing-intro{margin-bottom:26px}
  .price-sheet{padding:24px 20px;margin-inline:-8px}
  .price-parts{display:block}
  .price-parts article{padding:0!important;border:0!important}
  .price-parts article+article{margin-top:24px;padding-top:24px!important;border-top:1px solid #dbe4ee!important}
  .price-parts h3{font-size:24px}
  .price-parts p{font-size:18px}
  .price-bottom{margin-top:24px;padding-top:24px}
  .price-bottom p{font-size:18px}
  .price-bottom .primary{width:100%;margin-top:22px}
  .faq-list{padding-inline:18px;margin-inline:-8px}
  .faq-question{font-size:20px;line-height:1.3;padding:21px 0;gap:14px}
  .faq-mark{width:22px;min-width:22px}
  .faq-answer{padding:0 0 22px}
  .faq-answer p{font-size:18px;line-height:1.44}
  .contact-invitation h2{padding-left:16px}
  .contact-invitation>p{margin-bottom:26px}
  .form-paper{padding:24px 20px;margin-inline:-12px;border-radius:12px}
  .form-fields-grid{gap:20px}
  .form-paper .field-box>label,.form-paper legend{font-size:18px}
  .form-paper textarea{height:156px}
  .form-paper input:not([type=radio]):not([type=checkbox]),.form-paper textarea,.form-paper select{font-size:18px!important}
  .form-paper select{font-size:16px!important}
  .form-paper .channels{gap:10px}
  .form-paper .channel-option{font-size:17px}
  .form-paper .hint{font-size:16px;line-height:1.4;margin-top:8px}
  .optional-name summary{font-size:17px;flex-wrap:wrap;gap:4px 12px;padding:12px}
  .optional-note{font-size:15px}
  .disclosure-mark{font-size:24px}
  .consent-box{padding-top:20px}
  .consent-box .consent label{font-size:16px;line-height:1.45}
  .submit-row{gap:14px;margin-top:20px}
  .form-paper .field-error{font-size:16px}
  .form-paper .after-button{font-size:16px}
  .verification-head:after{content:'';display:block;clear:both}
}
@media(max-width:374px){
  .connection-row{grid-template-columns:24px 62px 1fr;gap:11px}
  .connection-row h3{font-size:22px}
  .connection-row figure img{width:62px}
  .connection-number{width:24px;height:24px;font-size:16px}
  .connection-flow:before{left:11px}
  .connection-manual{padding:13px}
  .connection-happens,.connection-manual{grid-column:2/-1}
  .service-sheet article{padding:22px 18px}
  .form-paper{padding:22px 18px;margin-inline:-10px}
  .form-paper .channel-option{font-size:17px}
  .form-paper .channels{gap:8px}
  .optional-name summary{font-size:17px}
  .faq-list{padding-inline:16px}
  .faq-question{font-size:20px}
  .price-sheet{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){
  summary .disclosure-mark{transition:none}
}
@media(max-width:599px){
  .verification-head{display:grid;grid-template-columns:1fr 84px;gap:0 18px;align-items:start}
  .verification-head h2{grid-column:1/-1;grid-row:1}
  .verification-head p{grid-column:1;grid-row:2}
  .verification-head>img{display:block;float:none;width:84px;height:auto;margin:0;grid-column:2;grid-row:2;align-self:center}
  .verification-head:after{display:none}
}
footer{background:#fefefe}
.footer-inner .logo img{mix-blend-mode:normal}
.form-fields-grid{grid-template-areas:'main contact-column' 'consent consent'}
.form-column-main{grid-area:main;display:grid;gap:24px;align-content:start;min-width:0}
.form-column-contact{grid-area:contact-column;display:grid;gap:24px;align-content:start;min-width:0}
.form-column-main>*{grid-area:auto}
.form-column-contact>*{grid-area:auto}
.connection-column-head{display:grid;grid-template-columns:32px 144px 250px 1fr .85fr;gap:24px;margin-left:0;padding:0 0 16px}
.connection-column-head>span{grid-column:5;padding-left:20px}
@media(min-width:1100px){
  .work-steps h3{min-height:2.4em}
}
@media(min-width:1000px) and (max-width:1299px){
  .connection-column-head{grid-template-columns:28px 112px 200px 1fr .85fr;gap:18px}
  .connection-column-head>span{padding-left:16px}
}
@media(min-width:1000px) and (max-width:1099px){
  .connection-column-head{grid-template-columns:28px 112px 1fr .8fr;gap:20px}
  .connection-column-head>span{grid-column:4}
  .work-steps{grid-template-columns:1fr 1fr}
  .work-steps h3{min-height:2.4em}
}
@media(max-width:999px){
  .connection-column-head{display:none}
  .form-column-main,.form-column-contact{display:contents}
  .form-fields-grid{grid-template-areas:'context' 'task' 'channels' 'contact' 'name' 'consent'}
  .form-column-main>.context-box{grid-area:context}
  .form-column-main>.task-box{grid-area:task}
  .form-column-contact>.channel-field{grid-area:channels}
  .form-column-contact>.contact-box{grid-area:contact}
  .form-column-contact>.optional-name{grid-area:name}
}
/* ---- part 3: implementation additions (DDR-P07 local build) ---- */
/* CTA and text actions are links (#B09, documents) carrying the design's button classes. */
a.text-button{display:inline-flex;align-items:center}
#mobile-menu>a.text-button{justify-content:center}
@media(max-width:599px){.hero .actions a.text-button{justify-content:center}}
/* the open mobile menu locks the page behind it; the scroll position is kept */
body.menu-open{overflow:hidden}
/* the status after a submit receives focus programmatically */
#form-status:focus{outline:none}
#form-status:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
/* anchors and focus. The design build combines html scroll-padding-top:110px with section scroll-margin-top:100px:
 * anchors land ~210 px below the header, and focusing a header element makes Chrome jump the page (the sticky header
 * sits inside the 110-px band). One offset = the header height; focused form controls keep room for their label. */
:root{--header-h:96px}
html{scroll-padding-top:0}
section{scroll-margin-top:var(--header-h)}
input,textarea,select,summary,.channel-field,#form-status{scroll-margin-top:calc(var(--header-h) + 48px)}
.field-box,.consent-box,.faq-item,#form-summary{scroll-margin-top:calc(var(--header-h) + 16px)}
@media(max-width:999px){:root{--header-h:80px}}
@media(max-width:599px){:root{--header-h:76px}}
/* touch targets ≥ 44 px without moving anything: the compact logo link and the footer links get a taller hit area */
.logo{display:flex;align-items:center;min-height:44px}
.footer-inner nav a{padding:11px 0;margin:-11px 0}
/* B04: on desktop the design shows «Что убираем из ручной работы» once, as an aria-hidden column head, and hides the
 * per-row label; the per-row label stays available to screen readers instead of being removed. */
@media(min-width:1000px){.manual-mobile{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}

/* ---- B04 line and markers (owner correction 2026-10-27) ----
 * The design build drew one line on the list (.connection-flow:before, top 20 px / bottom 32 px of the list box): it
 * began above marker 1, ran past marker 5 and, below 1000 px, down to the last explanation. Now every marker sits in a
 * node that spans its row's content box; the node draws two 2-px segments from the marker centre (--cy) to the row's
 * top and bottom edge (through the row padding and separator: --pad-t/--pad-b/--sep), each overlapping the next row
 * by 1 px so that no sub-pixel seam appears. The first node has no upper, the last no lower segment. The line
 * therefore runs exactly from the centre of marker 1 to the centre of marker 5 on the markers' common axis, whatever
 * the row heights, line breaks or width; the opaque circles cover it. 2 px, no glow. The paddings repeat the v1.1 row
 * paddings — change them together. */
.connection-flow:before{content:none}
.connection-node{--num:32px;--num-top:0px;--cy:50%;--pad-t:22px;--pad-b:22px;--sep:1px;grid-column:1;grid-row:1;align-self:stretch;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.connection-node:before,.connection-node:after{content:'';position:absolute;left:50%;width:2px;margin-left:-1px;background:var(--red)}
.connection-node:before{top:calc(-1px - var(--pad-t) - var(--sep));bottom:calc(100% - var(--cy))}
.connection-node:after{top:var(--cy);bottom:calc(-1px - var(--pad-b))}
.connection-row:first-child .connection-node:before,.connection-row:last-child .connection-node:after{content:none}
.connection-number{width:var(--num);height:var(--num);margin:var(--num-top) 0 0;flex:none;line-height:1;cursor:default;user-select:none}
/* Digits: native text in the actual font, as SVG <text> inside the circle. HTML text is laid out on its line box and the
 * browser snaps that baseline to the pixel grid, so at fractional row positions a digit jumped by up to 1 CSS px. In
 * the SVG the glyph is placed geometrically: anchored at the circle centre (x/y 50 %, text-anchor middle) with
 * dy = 0.356 em = the centre of the figures 1–5 above the baseline (Nimbus Sans Bold, qa/digit_metrics.mjs). One
 * value for all five digits; horizontally the figures are tabular (0.556 em) and centred on their advance — no
 * per-digit nudges, the «1» keeps its drawn asymmetry (flag left, stem right of the axis). */
.connection-digit{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.connection-digit text{fill:currentColor;font:inherit}
@media(min-width:1000px) and (max-width:1299px){.connection-node{--num:28px}}
@media(min-width:1000px) and (max-width:1099px){.connection-node{grid-row:1/3}}
@media(max-width:999px){
  .connection-node{--num-top:10px;--cy:calc(var(--num-top) + var(--num) / 2);--pad-t:24px;--pad-b:24px;grid-row:1/4;justify-content:flex-start}
}
@media(max-width:599px){
  .connection-node{--num:26px;--num-top:18px;--pad-t:22px;--pad-b:26px}
}
@media(max-width:374px){.connection-node{--num:24px}}