.about-page{padding-block:20px 8px}
.about-page h2{margin:0 0 10px;font-size:24px}
.about-page p{margin:0;color:var(--muted);line-height:1.5}
.about-hero{border-radius:12px;overflow:hidden;padding:28px 30px;margin-bottom:16px;min-height:205px}
.about-hero h1{font-size:40px}
.about-hero p{max-width:610px;font-size:18px}
.about-hero .about-hero__intro{font-size:21px;margin-bottom:16px}
.about-panel{padding:20px 22px;margin-bottom:16px}
.about-feature{display:flex;align-items:center;gap:24px}
.about-feature__icon{display:grid;place-items:center;flex:0 0 64px;height:64px;border-radius:14px;background:var(--primary-soft)}
.about-feature__icon .ui-icon{width:34px;height:34px}
.about-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.about-steps li{display:flex;align-items:center;gap:20px;padding:18px;border:1px solid var(--line);border-radius:9px;background:#f8fbff}
.about-steps__number{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:26px;font-weight:700}
.about-steps strong{display:block;margin-bottom:5px}
.about-steps p{font-size:14px}
.about-page .about-caption{text-align:center;font-size:14px;font-style:italic;margin-top:12px}
.about-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.about-tool{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:9px;background:#f6faff;text-decoration:none;color:var(--text);min-width:0}
.about-tool:hover,.about-tool:focus-visible{border-color:var(--primary);background:var(--primary-soft)}
.about-tool>img{width:70px;height:62px;object-fit:contain}
.about-tool strong{font-size:14px;display:block;margin-bottom:5px}
.about-tool small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.about-tool__soon{color:var(--primary)!important}
.about-page .about-principle{color:var(--primary);font-weight:600;margin-bottom:3px}


.about-footer{display:flex;justify-content:space-between;gap:20px;padding-block:20px;color:var(--muted);font-size:13px}
.about-footer a{text-decoration:none}
.about-site .feedback-form{background:#f2fbf5;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);padding:22px;gap:16px 20px}
.about-site .feedback-form__intro{grid-column:1/-1;grid-row:1}
.about-site .feedback-form h2{font-size:22px}
.about-site .feedback-form__topic{grid-column:1;grid-row:2/4}
.about-site .feedback-form__comment{grid-column:2;grid-row:2/4}
.about-site .feedback-form__contact{grid-column:3;grid-row:2}
.about-site .feedback-form>.button{grid-column:3;grid-row:3}
.about-site .feedback-form>.form-message{grid-row:4}
@media(max-width:850px){.about-site .feedback-form{grid-template-columns:1fr;gap:14px;padding:18px}.about-site .feedback-form>*,.about-site .feedback-form>.button,.about-site .feedback-form>.form-message{grid-column:1;grid-row:auto}.about-site .feedback-form h2{font-size:20px}}
@media(max-width:1050px){.about-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.about-steps{gap:12px}.about-steps li{gap:10px;padding:12px}}
@media(max-width:700px){.about-hero{padding:22px 18px}.about-hero h1{font-size:31px}.about-hero p,.about-hero .about-hero__intro{font-size:16px}.about-steps{grid-template-columns:1fr}.about-panel{padding:18px}.about-feature{gap:14px;align-items:flex-start}.about-feature__icon{flex-basis:44px;height:44px}.about-feature__icon .ui-icon{width:26px;height:26px}.about-page h2{font-size:21px}.about-tools{grid-template-columns:1fr}.about-footer{flex-wrap:wrap}}

.about-page{padding-top:var(--section-space)}
.about-page h2{font-size:var(--section-title-size)}
.about-hero{padding:32px;min-height:300px;border:1px solid var(--line);box-shadow:var(--shadow)}
.about-hero h1{font-size:var(--page-title-size);margin:14px 0 16px;max-width:620px;letter-spacing:-1px}
.about-hero h1 span{color:var(--primary)}
.about-eyebrow{display:inline-flex;align-self:flex-start;max-width:100%;padding:6px 12px;border-radius:20px;background:#deedff;color:var(--primary);font-size:12px;font-weight:600}
.about-hero p,.about-hero .about-hero__intro{max-width:560px;font-size:17px;line-height:1.5}
.about-hero p:last-child{font-size:14px;max-width:510px}
.about-panel{margin-bottom:var(--section-space);border-radius:var(--radius);box-shadow:var(--shadow)}
.about-purpose{background:linear-gradient(110deg,var(--primary-soft),#fff)}
.about-feature__icon{border-radius:50%;flex-basis:56px;height:56px;background:#deedff;border:1px solid #d1e5ff}
.about-feature__icon .ui-icon{width:28px;height:28px;filter:brightness(0) saturate(100%) invert(34%) sepia(97%) saturate(3500%) hue-rotate(205deg)}
.about-process .about-steps li{border:0;background:transparent;padding:12px 0}
.about-process .about-steps li+li{border-left:1px solid var(--line);padding-left:20px}
.about-process .about-caption{text-align:left;margin-top:8px}
.about-tool{gap:10px;min-height:100px;transition:background .15s,border-color .15s}
.about-tool>img{width:62px;flex-shrink:0}
.about-tool>span:not(.about-tool__arrow){min-width:0}
.about-tool__arrow{margin-left:auto;display:grid;place-items:center;border-radius:50%;background:#e3f0ff;flex:0 0 28px;height:28px}
.about-tool__arrow .ui-icon{width:17px;height:17px}
.about-principle-panel{background:linear-gradient(110deg,#eff6ff,#f8fbff);padding-block:26px}
.about-page .about-principle{font-size:var(--section-title-size);line-height:1.3;max-width:730px;color:var(--text);margin-bottom:8px}
.about-principle-panel h2{font-size:14px;color:var(--primary)}
.about-site .feedback-form h2{font-size:18px}
@media(max-width:1100px){.about-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.about-hero{padding:22px 18px;min-height:0}.about-hero p,.about-hero .about-hero__intro{font-size:15px}.about-process .about-steps li+li{border-left:0;border-top:1px solid var(--line);padding-left:0}.about-feature__icon{flex-basis:44px;height:44px}.about-tools{grid-template-columns:1fr}.about-tool{min-height:88px}.about-principle-panel{align-items:flex-start}}
.about-hero{background-size:100% 100%,auto 100%}

/* Information sections share the same visual rhythm as the home page. */
.about-page{padding-top:var(--section-space)}
.about-hero h1{max-width:620px;margin-top:12px;font-size:var(--page-title-size)}
.about-eyebrow{background:#fff9;border:1px solid #d3e1f4;letter-spacing:.02em}
.about-panel{padding:28px;border-radius:14px}
.about-feature{gap:24px}
.about-purpose{background:var(--surface)}
.about-process .about-steps{gap:16px;margin-top:20px}
.about-process .about-steps li{background:#f5f8fc;padding:20px;border-radius:12px;align-items:flex-start}
.about-process .about-steps li+li{border-left:0;padding-left:20px}
.about-steps__number{background:white;box-shadow:0 3px 12px #173f6910;font-size:22px}
.about-process .about-caption{margin-top:16px;font-style:normal;font-size:13px}
.about-tool{background:#fff;min-height:112px;border-radius:12px;padding:16px}
.about-principle-panel{background:linear-gradient(110deg,#eaf2ff,#f6f9ff);border-color:#d5e3f7;padding-block:32px}
.about-site .feedback-form{background:#f5f8fc;border-radius:14px;padding:28px}
@media(max-width:1050px){.about-process .about-steps{grid-template-columns:1fr}.about-process .about-steps li{align-items:center}.about-process .about-steps li+li{border:0}}
@media(max-width:600px){.about-panel{padding:20px}.about-feature{gap:16px;align-items:flex-start}.about-site .feedback-form{padding:20px}.about-hero h1{letter-spacing:-1px}}