.connection-guide{--cg-ink:#203e2b;--cg-muted:#526c5a;--cg-green:#0e7439;--cg-line:#d8e7dc;color:var(--cg-ink);max-width:1180px;margin:0 auto;padding:12px 0 32px;min-width:0}.connection-guide *{box-sizing:border-box}.connection-guide h1,.connection-guide h2,.connection-guide h3,.connection-guide p,.connection-guide figure{margin:0}.connection-guide h1,.connection-guide h2,.connection-guide h3{text-wrap:balance}.connection-guide p{line-height:1.7;max-width:72ch;text-wrap:pretty}.connection-guide a{text-decoration:none}.connection-guide a:focus-visible,.connection-guide input:focus-visible,.connection-guide summary:focus-visible{outline:3px solid #80b890;outline-offset:4px}.connection-heading{max-width:810px;margin:0 auto 45px;text-align:center}.connection-label{font-size:.8rem;color:#456b52;margin-bottom:16px!important}.connection-heading h1{font-size:clamp(2rem,4.2vw,3.55rem);font-weight:650;line-height:1.15;letter-spacing:-.035em;white-space:pre-line}.connection-intro{font-size:1rem;color:var(--cg-muted);margin:21px auto 0!important;max-width:66ch!important}.connection-hero-actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:27px}.connection-button{display:inline-flex;align-items:center;justify-content:center;gap:19px;min-height:44px;padding:12px 18px;border:1px solid #bdd5c5;border-radius:10px;background:linear-gradient(135deg,#fff,#eef7f0);color:#245333;font-size:.84rem;font-weight:600;box-shadow:inset 0 1px 0 #fff,0 4px 10px -8px #0b4222}.connection-button.is-primary{color:#fff;border-color:#0b6e34;background:linear-gradient(130deg,#21904c,#0b6830);box-shadow:inset 0 1px 0 #73b18a,0 7px 17px -12px #0b5026}.connection-button:hover{filter:brightness(.97)}.connection-button span{font-size:1.05rem;font-weight:400}.connection-start{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);align-items:center;gap:55px;margin-bottom:60px}.connection-scheme{max-width:570px}.connection-scheme img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid #c7ddcc;box-shadow:0 18px 45px -33px #31583c}.connection-scheme figcaption{font-size:.69rem;line-height:1.6;color:var(--cg-muted);padding:13px 5px 0;max-width:65ch}.connection-prerequisites{padding:20px 8px}.connection-prerequisites h2{font-size:1.65rem;letter-spacing:-.02em;font-weight:630}.connection-prerequisites ul{list-style:none;padding:0;margin:24px 0}.connection-prerequisites li{padding:14px 0;border-bottom:1px solid var(--cg-line);font-size:.97rem;line-height:1.55}.connection-prerequisites li:before{content:'✓';color:var(--cg-green);font-weight:700;display:inline-block;width:24px}.connection-prerequisites>p{font-size:.84rem;color:var(--cg-muted)}.connection-section-title{margin-bottom:25px}.connection-section-title h2{font-size:1.65rem;line-height:1.3;font-weight:630;letter-spacing:-.025em}.connection-section-title p{font-size:.87rem;color:var(--cg-muted);margin-top:10px}.connection-steps{list-style:none;padding:0;margin:0}.connection-step{display:grid;grid-template-columns:45px minmax(0,1fr) 90px;gap:22px;padding:27px 0;border-top:1px solid var(--cg-line);align-items:start}.connection-step-number{display:flex;align-items:center;justify-content:center;width:39px;height:39px;border:1px solid #bfd9c6;border-radius:50%;background:linear-gradient(140deg,#fff,#deefe3);box-shadow:inset 0 1px 0 #fff;color:#23633b;font-size:.95rem;font-weight:600}.connection-step h3{font-size:1.11rem;line-height:1.5;font-weight:640}.connection-step-body>p{font-size:.88rem;color:var(--cg-muted);margin-top:9px}.connection-step .connection-step-lead{color:#345640;font-size:.82rem;margin-top:4px;margin-bottom:10px}.connection-step details{margin-top:15px}.connection-step summary{color:#1a6436;font-size:.79rem;cursor:pointer;padding:4px 0;line-height:1.5;width:fit-content}.connection-step details p{font-size:.8rem;color:var(--cg-muted);margin-top:10px;padding:13px 17px;background:#f0f7f2;border-radius:8px}.connection-check{display:flex;align-items:center;justify-content:end;gap:7px;cursor:pointer;padding-top:10px;font-size:.8rem;color:#315f40;min-height:39px}.connection-check input{width:19px;height:19px;accent-color:var(--cg-green);margin:0}.connection-progress-line{border-top:1px solid var(--cg-line);padding:18px 0;display:flex;justify-content:space-between;align-items:start;gap:25px}.connection-progress{font-size:.8rem;color:#235d37}.connection-progress-line small{font-size:.7rem;color:var(--cg-muted);line-height:1.7;max-width:40ch;text-align:right}.connection-gallery{margin-top:60px;padding:35px 35px 29px;border:1px solid #d3e5d9;border-radius:20px;background:linear-gradient(110deg,#eaf5ec,#fff 50%,#eff7f0);box-shadow:inset 0 1px 0 #fff}.connection-screens{display:flex;gap:36px;justify-content:space-around;align-items:start;margin-top:33px}.connection-screen{flex:1;max-width:244px;min-width:0}.connection-screen-link{display:block;background:#fff;border:1px solid #bacdc0;border-radius:22px;padding:5px;box-shadow:0 12px 30px -22px #274c33;overflow:hidden}.connection-screen img{display:block;width:100%;height:auto;border-radius:17px}.connection-screen figcaption{margin-top:18px}.connection-screen strong{display:block;font-size:.89rem;line-height:1.5;font-weight:630}.connection-screen figcaption>span{display:block;font-size:.76rem;color:var(--cg-muted);line-height:1.65;margin-top:7px}.connection-screen small{display:block;font-size:.68rem;color:#21633a;margin-top:11px}.connection-help{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:50px;padding:60px 0}.connection-faq details{border-top:1px solid var(--cg-line);padding:18px 0}.connection-faq details:last-child{border-bottom:1px solid var(--cg-line)}.connection-faq summary{font-size:.95rem;cursor:pointer;line-height:1.5;padding-right:16px;color:#2b5139}.connection-faq p{font-size:.83rem;color:var(--cg-muted);margin-top:14px}.connection-footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px;border:1px solid #d6e7db;border-radius:16px;background:linear-gradient(100deg,#edf7f0,#fff)}.connection-footer h2{font-size:1.3rem;font-weight:630;letter-spacing:-.02em}.connection-footer p{font-size:.85rem;color:var(--cg-muted);margin-top:9px}.connection-footer .connection-button{flex-shrink:0}
@media(max-width:820px){.connection-start{gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.connection-prerequisites h2,.connection-section-title h2{font-size:1.4rem}.connection-help{display:block}.connection-help .connection-section-title{margin-bottom:27px}.connection-gallery{padding:27px 24px}.connection-screens{gap:24px}.connection-footer{align-items:start}.connection-footer .connection-button{font-size:.76rem;padding:11px 13px}}
@media(max-width:580px){.connection-guide{padding-top:0}.connection-heading{margin-bottom:30px;text-align:left}.connection-heading h1{font-size:2rem;white-space:normal}.connection-intro{font-size:.9rem;margin-top:18px!important}.connection-hero-actions{justify-content:start;gap:9px;margin-top:22px}.connection-button{font-size:.76rem;padding:10px 13px;gap:12px}.connection-start{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}.connection-scheme{width:100%}.connection-scheme img{border-radius:14px}.connection-prerequisites{padding:14px 0;width:100%}.connection-prerequisites ul{margin:15px 0}.connection-prerequisites li{font-size:.87rem;padding:12px 0}.connection-step{grid-template-columns:30px minmax(0,1fr);gap:13px;padding:22px 0}.connection-step-number{width:29px;height:29px;font-size:.77rem}.connection-step h3{font-size:1rem}.connection-step-body>p{font-size:.84rem}.connection-check{grid-column:2;justify-content:start;padding-top:0;min-height:33px}.connection-progress-line{display:block}.connection-progress-line small{display:block;text-align:left;margin-top:7px;max-width:none}.connection-gallery{margin-top:34px;padding:23px 18px;border-radius:15px}.connection-screens{overflow-x:auto;justify-content:start;gap:21px;margin:24px -8px 0;padding:0 8px 17px;scroll-snap-type:x proximity}.connection-screen{flex:0 0 210px;scroll-snap-align:start}.connection-help{padding:36px 0}.connection-faq summary{font-size:.89rem}.connection-footer{display:block;padding:24px 20px}.connection-footer h2{font-size:1.2rem}.connection-footer .connection-button{margin-top:21px}.connection-section-title{margin-bottom:20px}}
@media(prefers-reduced-motion:no-preference){.connection-button{transition:filter .18s}.connection-check{transition:color .18s}}
.connection-start{grid-template-columns:minmax(0,1.65fr) minmax(240px,.65fr);gap:32px;align-items:start}
.connection-scheme{max-width:none;min-width:0}
.connection-product-composite{position:relative;aspect-ratio:1672/941;container-type:inline-size;overflow:hidden;border-radius:16px;background:#eef9f2;isolation:isolate}
.connection-product-stage{position:absolute;width:1672px;height:941px;transform-origin:0 0}
.connection-scheme .connection-product-art{position:absolute;inset:0;width:1672px;height:941px;border:0;border-radius:0;box-shadow:none}
.connection-scheme .connection-product-screen{position:absolute;left:0;top:0;width:720px;height:1600px;max-width:none;object-fit:fill;border:0;border-radius:28px;box-shadow:none;transform-origin:0 0;transform:matrix3d(.0852986965,-.0844306097,0,-.0001646831,-.0139517827,.3775493758,0,.0000208729,0,0,1,0,1281,141,0,1)}
.connection-art-labels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:16px 0;color:#254f3b;font-size:.8rem;font-weight:700;text-align:center}
.connection-art-action{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-top:6px}
.connection-art-action>a:not(.connection-button){font-size:.8rem;color:#17623f;text-decoration:underline;text-underline-offset:3px}
.connection-scheme figcaption{font-size:.75rem;color:#435c50;padding-top:17px}
.connection-guide .connection-progress-line small,.connection-guide .connection-screen small{font-size:.75rem}
#connection-sequence-title{scroll-margin-top:28px}
@media(max-width:800px){.connection-start{grid-template-columns:1fr}.connection-prerequisites{padding:12px 0}.connection-art-labels{font-size:.75rem;gap:8px}}

/* A source-sized scene keeps the genuine app screen in its phone perspective. */
.connection-sequence-layout{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);align-items:start;gap:38px}
.connection-phases{min-width:0}
.connection-phases-composite{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;border-radius:18px;background:#e5f1e9;border:1px solid #c7dcd0;box-shadow:0 16px 34px -26px #193c28;isolation:isolate}
.connection-phases-stage{position:absolute;left:0;top:0;width:1024px;height:1536px;transform-origin:0 0;transform:scale(.371094)}
.connection-phases-art-link{position:absolute;inset:0;display:block}
.connection-phases-art{display:block;width:1024px;height:1536px;max-width:none}
.connection-phases-screen-link{position:absolute;left:0;top:0;display:block;width:720px;height:1600px;overflow:hidden;border-radius:28px;transform-origin:0 0;transform:matrix3d(.2053241142,.064661886,0,.00006325179,-.0061131593,.1133809348,0,-.00004528828,0,0,1,0,583,1183,0,1)}
.connection-phases-screen{display:block;width:720px;height:1600px;max-width:none;object-fit:fill}
.connection-phase-badges{position:absolute;inset:0;z-index:2;list-style:none;margin:0;padding:0;pointer-events:none}
.connection-phase-badges li{position:absolute;left:12px;max-width:calc(100% - 24px);padding:7px 10px;border:1px solid #b6d4c3;border-radius:7px;background:#f7fffb;color:#183d2c;box-shadow:0 2px 9px #0b1e2340;font-size:.75rem;font-weight:750;line-height:1.4;overflow-wrap:anywhere}
.connection-phase-badges li:nth-child(1){top:12px}
.connection-phase-badges li:nth-child(2){top:calc(25% + 12px)}
.connection-phase-badges li:nth-child(3){top:calc(50% + 12px)}
.connection-phase-badges li:nth-child(4){bottom:12px;max-width:calc(53% - 20px)}
.connection-power-flow{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;color:#24543a;font-size:.75rem;font-weight:700;margin-bottom:9px}
.connection-power-flow>span{padding:5px 7px;border:1px solid #c9dfd2;border-radius:6px;background:#edf7f0;white-space:nowrap}
.connection-power-flow>b{font-weight:500}
.connection-guide .connection-power-note{font-size:.75rem;line-height:1.6;color:#435e4c;margin-bottom:18px}
.connection-phases figcaption{padding:16px 2px 0;color:#435e4c;font-size:.8125rem;line-height:1.65}
.connection-phases figcaption>strong{display:block;color:#274f36;font-size:.9375rem}
.connection-phases figcaption>span{display:block;margin-top:5px}
.connection-phases-actions{display:flex;align-items:start;flex-wrap:wrap;gap:11px 18px;margin-top:14px}
.connection-phases-actions>a:not(.connection-button){display:flex;align-items:center;min-height:44px;color:#17623f;font-size:.8125rem;text-decoration:underline;text-underline-offset:4px}
.connection-sequence-layout .connection-step{grid-template-columns:36px minmax(0,1fr) 73px;gap:14px;padding-block:23px}
.connection-sequence-layout .connection-step-number{width:35px;height:35px}
.connection-sequence-layout .connection-step-body{min-width:0}
.connection-sequence-layout .connection-step-lead{overflow-wrap:anywhere;line-height:1.6}
@media(max-width:1000px){.connection-sequence-layout{grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:27px}.connection-sequence-layout .connection-step{grid-template-columns:35px minmax(0,1fr)}.connection-sequence-layout .connection-check{grid-column:2;justify-content:start;padding-top:0}}
@media(max-width:800px){.connection-sequence-layout{grid-template-columns:minmax(0,1fr);gap:27px}.connection-phases{width:min(100%,320px);justify-self:center}.connection-phases-actions{justify-content:center}.connection-phases figcaption{text-align:center}.connection-sequence-layout .connection-step{grid-template-columns:36px minmax(0,1fr) 75px}.connection-sequence-layout .connection-check{grid-column:auto;justify-content:end}}
@media(max-width:580px){.connection-phases{width:min(100%,280px)}.connection-phases-composite{border-radius:14px}.connection-phases figcaption{font-size:.75rem}.connection-sequence-layout .connection-step{grid-template-columns:30px minmax(0,1fr);gap:13px}.connection-sequence-layout .connection-step-number{width:29px;height:29px}.connection-sequence-layout .connection-check{grid-column:2;justify-content:start}.connection-phases-actions{gap:5px}.connection-phases-actions .connection-button{width:100%;font-size:.8125rem}}

/* Keep the connection action beside the existing product illustration. */
.connection-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:32px;margin-bottom:24px}
.connection-hero .connection-heading{max-width:none;margin:0;text-align:left;min-width:0}
.connection-hero .connection-label{margin-bottom:12px!important}
.connection-hero .connection-heading h1{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.2;white-space:normal}
.connection-hero .connection-intro{margin:16px 0 0!important;font-size:.9375rem;line-height:1.6}
.connection-hero .connection-hero-actions{justify-content:flex-start;margin-top:20px}
.connection-secondary-actions{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:8px}
.connection-secondary-actions .connection-button{min-height:44px;padding:8px 0;border:0;border-radius:0;background:none;box-shadow:none;font-size:.8125rem;gap:8px;text-decoration:underline;text-underline-offset:4px;color:#245333}
.connection-hero .connection-art-labels{margin:12px 0;font-size:.75rem;gap:8px}
.connection-hero .connection-art-action{padding-top:0}
.connection-hero .connection-art-action>a{display:inline-flex;align-items:center;min-height:44px}
.connection-hero .connection-scheme figcaption{padding-top:4px}
.connection-guide>.connection-prerequisites{padding:20px 0 24px;margin-bottom:24px;border-top:1px solid var(--cg-line)}
.connection-guide>.connection-prerequisites h2{font-size:1.25rem}
.connection-guide>.connection-prerequisites ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:12px 0}
.connection-guide>.connection-prerequisites li{padding:0;border:0;font-size:.875rem}
@media(max-width:800px){.connection-hero{grid-template-columns:1fr;gap:24px}.connection-hero .connection-heading{max-width:600px}.connection-hero .connection-scheme{width:100%;max-width:620px;justify-self:center}.connection-guide>.connection-prerequisites ul{gap:16px}}
@media(max-width:580px){.connection-hero{gap:20px;margin-bottom:20px}.connection-hero .connection-heading h1{font-size:1.75rem}.connection-hero .connection-intro{font-size:.875rem;margin-top:12px!important}.connection-hero .connection-hero-actions{margin-top:16px}.connection-secondary-actions{gap:0 16px}.connection-secondary-actions .connection-button{font-size:.75rem}.connection-guide>.connection-prerequisites{padding:16px 0 20px;margin-bottom:20px}.connection-guide>.connection-prerequisites ul{grid-template-columns:1fr;gap:12px}}

/* Connection page: clear first action, balanced illustration, compact help. */
html[data-site12-shell] body #main-content .connection-guide {max-width:1120px;padding:24px 0 40px;}
html[data-site12-shell] body #main-content .connection-guide .connection-hero {grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;margin:0 0 32px;}
html[data-site12-shell] body #main-content .connection-guide .connection-heading h1 {font-size:clamp(32px,3.4vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.025em;max-width:17ch;}
html[data-site12-shell] body #main-content .connection-guide .connection-intro {font-size:18px;line-height:1.6;margin:18px 0 0!important;max-width:45ch!important;color:#385448;}
html[data-site12-shell] body #main-content .connection-guide .connection-hero-actions {margin-top:24px;}
html[data-site12-shell] body #main-content .connection-guide .connection-button {font-size:16px;line-height:1.4;box-shadow:none;background:#fff;border-radius:8px;min-height:48px;}
html[data-site12-shell] body #main-content .connection-guide .connection-button.is-primary {background:#087b43;border-color:#087b43;color:#fff;padding:14px 20px;font-weight:650;}
html[data-site12-shell] body #main-content .connection-guide .connection-secondary-actions {gap:0 20px;margin-top:8px;}
html[data-site12-shell] body #main-content .connection-guide .connection-secondary-actions .connection-button {font-size:14px;min-height:40px;padding:8px 0;background:transparent;border:0;box-shadow:none;border-radius:0;}
html[data-site12-shell] body #main-content .connection-guide .connection-scheme {margin:0;align-self:center;}
html[data-site12-shell] body #main-content .connection-guide .connection-product-composite {border-radius:12px;}
html[data-site12-shell] body #main-content .connection-guide .connection-scheme figcaption {font-size:14px;line-height:1.5;padding:12px 0 0;text-align:center;color:#385448;max-width:none;}
html[data-site12-shell] body #main-content .connection-guide>.connection-prerequisites {padding:24px 0;margin-bottom:36px;border-block:1px solid #d8e7dc;}
html[data-site12-shell] body #main-content .connection-guide .connection-prerequisites h2 {font-size:22px;line-height:1.3;margin-bottom:16px;}
html[data-site12-shell] body #main-content .connection-guide>.connection-prerequisites ul {margin:0 0 14px;gap:24px;}
html[data-site12-shell] body #main-content .connection-guide>.connection-prerequisites li {font-size:16px;line-height:1.5;position:relative;padding-left:24px;}
html[data-site12-shell] body #main-content .connection-guide>.connection-prerequisites li::before {position:absolute;left:0;}
html[data-site12-shell] body #main-content .connection-guide .connection-prerequisites>p {font-size:14px;line-height:1.5;max-width:none;}
html[data-site12-shell] body #main-content .connection-guide .connection-section-title h2 {font-size:28px;font-weight:650;line-height:1.25;}
html[data-site12-shell] body #main-content .connection-guide .connection-section-title p {font-size:16px;line-height:1.5;margin-top:8px;}
html[data-site12-shell] body #main-content .connection-guide .connection-gallery {border:0;border-radius:12px;box-shadow:none;background:#f0f6f2;margin-top:36px;padding:28px;}
html[data-site12-shell] body #main-content .connection-guide .connection-help {display:block;max-width:840px;margin:0 auto;padding:44px 0 24px;}
html[data-site12-shell] body #main-content .connection-guide .connection-help .connection-section-title {margin:0 0 20px;}
html[data-site12-shell] body #main-content .connection-guide .connection-faq details {padding:0;border:0;border-bottom:1px solid #d8e7dc;margin:0;}
html[data-site12-shell] body #main-content .connection-guide .connection-faq details:first-child {border-top:1px solid #d8e7dc;}
html[data-site12-shell] body #main-content .connection-guide .connection-faq summary {list-style:none;position:relative;padding:18px 36px 18px 0;margin:0;min-height:60px;font-size:18px;line-height:1.4;font-weight:600;color:#203e2b;}
html[data-site12-shell] body #main-content .connection-guide .connection-faq summary::-webkit-details-marker {display:none;}
html[data-site12-shell] body #main-content .connection-guide .connection-faq summary::marker {content:'';}
html[data-site12-shell] body #main-content .connection-guide .connection-faq summary::after {content:'+';position:absolute;right:4px;top:16px;font-size:24px;font-weight:400;color:#087b43;}
html[data-site12-shell] body #main-content .connection-guide .connection-faq details[open]>summary::after {content:'−';}
html[data-site12-shell] body #main-content .connection-guide .connection-faq p {font-size:16px;line-height:1.65;color:#385448;margin:0;padding:0 24px 20px 0;max-width:72ch;}
@media(max-width:800px) {
 html[data-site12-shell] body #main-content .connection-guide .connection-hero {gap:28px;grid-template-columns:1fr;}
 html[data-site12-shell] body #main-content .connection-guide .connection-heading h1 {max-width:22ch;}
 html[data-site12-shell] body #main-content .connection-guide .connection-scheme {max-width:540px;justify-self:center;}
 html[data-site12-shell] body #main-content .connection-guide .connection-intro {max-width:60ch!important;}
}
@media(max-width:580px) {
 html[data-site12-shell] body #main-content .connection-guide {padding-top:8px;}
 html[data-site12-shell] body #main-content .connection-guide .connection-intro {font-size:16px;}
 html[data-site12-shell] body #main-content .connection-guide .connection-hero {gap:24px;margin-bottom:24px;}
 html[data-site12-shell] body #main-content .connection-guide>.connection-prerequisites {padding:20px 0;margin-bottom:28px;}
 html[data-site12-shell] body #main-content .connection-guide>.connection-prerequisites ul {gap:12px;}
 html[data-site12-shell] body #main-content .connection-guide .connection-section-title h2 {font-size:24px;}
 html[data-site12-shell] body #main-content .connection-guide .connection-gallery {padding:20px 16px;}
 html[data-site12-shell] body #main-content .connection-guide .connection-help {padding-top:32px;}
 html[data-site12-shell] body #main-content .connection-guide .connection-faq summary {font-size:16px;padding:16px 32px 16px 0;min-height:56px;}
 html[data-site12-shell] body #main-content .connection-guide .connection-faq p {font-size:15px;padding-right:0;}
}