/* Visual review v3: editorial artwork + concise, progressively disclosed content. */
:root { --paper:#fcfaf7; --wash:#f2f5f5; --pen:#263b4d; --warm:#d6665d; }
.icon-library {position:absolute;width:0;height:0;overflow:hidden}
.draw-icon {width:64px;height:64px;fill:none;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mobile-only {display:none}
.phrase-break {display:none}
h2,h3 {text-wrap:initial}
.support-intro .phrase-break {display:initial}
.section {padding-block:72px}
.section-head {margin-bottom:32px}
.section-head h2 {font-size:30px}
.section-head>p:not(.eyebrow) {max-width:840px}
.eyebrow {letter-spacing:.045em}
.hero {background:linear-gradient(120deg,#fff 48%,#f7f8f8)}
.hero-layout {padding-top:48px}
.hero h1 {font-size:40px}
.hero .lead {font-size:15px}
.chat-mock {z-index:2}
.journey-comparison {gap:32px}
.journey,.journey.after {padding:24px 24px 20px;background:#fff;border:1px solid #dce1e4;border-radius:12px;overflow:hidden}
.journey.before {border-top:3px solid #a6b3bb}
.journey.after {border-top:3px solid var(--red)}
.journey-heading {padding-bottom:0;border:0}
.journey-heading>span {font-size:11px;letter-spacing:.03em}
.journey h3 {font-size:21px;line-height:1.6}
.journey-art {width:100%;aspect-ratio:1.5;overflow:hidden;position:relative;margin-block:14px 15px}
.journey-art img {width:200%;height:auto;max-width:none;position:absolute;top:0;left:0}
.after .journey-art img {transform:translateX(-50%)}
.journey-path {display:flex;align-items:center;justify-content:space-between;gap:7px;padding:15px 14px;background:#f1f4f5;border-radius:5px;font-size:12px;font-weight:700}
.journey-path i {font-style:normal;color:#a0aeb8}
.after .journey-path {background:#fff2f2;color:#962630}
.journey-caption {text-align:center;font-size:12px;color:var(--muted);margin-top:13px}
.section-takeaway {margin-top:4px;padding-top:24px;font-size:15px}
.type-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.type-cards article {padding:22px 25px 20px;border:1px solid #d5dfe4;border-radius:12px;background:#fff;position:relative;overflow:hidden}
.type-cards .selected {border:2px solid var(--red);padding:21px 24px 19px;background:linear-gradient(#fff 70%,#fff6f5)}
.type-top {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted)}
.type-number {font-size:18px;letter-spacing:.04em;color:#9caab5;font-weight:700}
.service-tag {background:var(--red);color:#fff;padding:4px 8px;border-radius:3px;font-size:10px}
.type-diagram {height:150px;display:flex;align-items:center;justify-content:center;position:relative;gap:12px;margin:14px 0 10px;padding-bottom:20px}
.type-diagram:before {content:"";position:absolute;width:128px;height:128px;border-radius:48% 52% 58% 42%;background:#f0f4f5;z-index:0;right:16px;top:5px;transform:rotate(-8deg)}
.selected .type-diagram:before {background:#ffefed}
.type-diagram .draw-icon {width:70px;height:70px;position:relative;z-index:1}
.diagram-bubble {position:relative;padding:9px 14px;border:1.5px solid var(--pen);border-radius:12px 12px 0 12px;font-size:12px;font-weight:700;background:#fff;z-index:1}
.diagram-line {height:1px;width:22px;background:#7e929f;position:relative}
.diagram-line:after {content:"";position:absolute;right:0;top:-3px;border-left:6px solid #7e929f;border-top:3px solid transparent;border-bottom:3px solid transparent}
.diagram-reply {position:absolute;bottom:3px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--blue);background:#edf4f5;border-radius:20px;padding:5px 15px}
.selected .diagram-reply {background:#fff1ef;color:#a52931}
.type-cards h3 {font-size:24px;margin-bottom:7px}
.type-cards article>p {font-size:13px;color:var(--muted);line-height:1.85}
.type-cards dl {margin-top:20px;padding-top:13px;border-top:1px solid var(--line);font-size:11px}
.type-cards dl>div {display:flex;gap:13px;margin-block:7px}
.type-cards dt {color:var(--blue);font-weight:700;white-space:nowrap}
.type-cards dd {color:var(--muted)}
.comparison-mini-note {font-size:12px;color:var(--muted);margin-block:21px 17px;line-height:1.9}
.deep-dive {border:1px solid #d8e0e4;border-radius:7px;background:#fff;margin-top:20px;overflow:hidden}
.deep-dive>summary {position:relative;cursor:pointer;display:flex;gap:15px;align-items:center;list-style:none;padding:19px 53px 19px 23px;font-size:13px;font-weight:700;line-height:1.7}
.deep-dive>summary::-webkit-details-marker {display:none}
.deep-dive>summary:after {content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:19px;font-weight:400;color:var(--red)}
.deep-dive[open]>summary:after {content:"−"}
.deep-dive>summary:hover {background:#fcfaf8}
.deep-dive[open]>summary {border-bottom:1px solid var(--line)}
.detail-label {font-weight:400;font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}
.details-body {padding:23px}
.comparison-detail {margin-top:10px}
.comparison-detail .table-scroll {border-radius:4px}
.comparison-conclusion {padding:23px 26px;margin-top:24px;box-shadow:none}
.comparison-conclusion h3 {font-size:18px}
.comparison-conclusion p {font-size:12px}
.benefit-grid {gap:20px;grid-template-columns:1fr 1fr}
.benefit-grid article {display:flex;align-items:center;gap:25px;border:1px solid #e3e6e5;padding:27px 29px;border-radius:10px;background:var(--paper)}
.benefit-grid article:nth-child(2),.benefit-grid article:nth-child(3) {background:#f4f7f8}
.benefit-icon {width:83px;height:90px;flex:0 0 auto;display:grid;place-items:center;position:relative}
.benefit-icon:before {content:"";position:absolute;inset:2px;background:#ece6de;border-radius:40% 60% 45% 55%;transform:rotate(8deg)}
.benefit-grid article:nth-child(2) .benefit-icon:before,.benefit-grid article:nth-child(3) .benefit-icon:before {background:#e3eced}
.benefit-icon .draw-icon {width:58px;height:58px;position:relative}
.benefit-grid small {font-size:11px;display:block;margin:0 0 7px;color:#966151}
.benefit-grid article:nth-child(2) small,.benefit-grid article:nth-child(3) small {color:var(--blue)}
.benefit-grid h3 {font-size:18px}
.benefit-grid p {font-size:12px;line-height:1.9;margin-top:10px}
.limits {padding:27px 30px;background:#fff;margin-top:30px;border-left:4px solid #9cb3bd}
.limits header {margin-bottom:20px}
.limits header h3 {font-size:21px}
.care-points {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-size:12px;color:var(--muted)}
.care-points>span {padding-left:16px;border-left:2px solid #dbe5e8}
.care-points b {display:block;font-size:13px;color:var(--pen);margin-bottom:5px}
.limits .deep-dive {border:0;border-top:1px solid var(--line);border-radius:0;margin-top:22px}
.limits .deep-dive>summary {padding-left:0;padding-bottom:0}
.limits .deep-dive[open]>summary {padding-bottom:18px}
.limits .details-body {padding:22px 0 0}
.risk-row {gap:30px;padding-block:20px}
.risk-row b {font-size:14px}
.risk-row p {font-size:12px}
.fit-note {background:#f7f8f8;font-size:12px;border-left:3px solid var(--red)}
.use-body {padding:23px}
.use-body>h3 {font-size:20px}
.support-section {background:#fcfaf7}
.support-intro {display:grid;grid-template-columns:1fr 43%;gap:40px;align-items:center;margin-bottom:24px}
.support-intro .section-head {margin:0}
.support-intro img {width:100%;border-radius:16px;mix-blend-mode:multiply}
.support-intro h2 {font-size:29px;text-wrap:initial}
.support-intro h2 wbr {display:block}
.support-intro p {font-size:14px}
.support-foundation {display:block;font-size:11px;color:var(--muted);border-top:1px solid #ddd9d1;padding-top:17px;margin-top:24px;max-width:450px}
.support-columns {gap:0;background:white;border:1px solid #e2dfd9;border-radius:10px;padding:29px 12px}
.support-columns article {padding:0 27px;border-top:0;position:relative}
.support-columns article+article {border-left:1px solid #e3e1dc}
.support-columns h3 {font-size:21px;margin-top:17px}
.support-columns p {font-size:13px;margin-top:10px}
.support-step {display:flex;align-items:center;gap:17px}
.support-step .draw-icon {width:46px;height:46px}
.support-step span {font-size:11px;color:#9a5147;font-weight:700}
.support-columns .output {font-size:10px;margin-top:19px;padding-top:13px}
.rule-example {background:transparent;border:0;padding:0;margin-top:35px;gap:40px;grid-template-columns:1fr 1fr}
.rule-example h3 {font-size:20px;margin-top:12px}
.rule-example p {font-size:13px}
.rule-example blockquote {border:1px solid #d3dde1;position:relative;background:white;border-radius:12px 12px 12px 0;box-shadow:0 5px 16px #243d4810}
.responsibilities {margin-top:28px}
.roles {border:0;border-radius:0}
.update-steps {background:#f5f7f8;gap:40px;padding:26px 30px 29px;border-radius:10px}
.update-steps>div {display:grid;grid-template-columns:30px 1fr;gap:7px 12px;padding:0 20px}
.update-steps .draw-icon {grid-column:1/-1;width:54px;height:54px;margin:0 0 16px 18px}
.update-steps span {grid-column:1;grid-row:2}
.update-steps b {grid-column:2;grid-row:2;font-size:15px;align-self:center}
.update-steps small {grid-column:2;grid-row:3;font-size:11px}
.update-steps>div:not(:last-child):after {top:45%;right:-25px}
.operation-list>div {font-size:12px}
.safety-grid article {background:#fff;padding:24px;border:1px solid #dce3e7;border-radius:8px}
.safety-grid h3 {font-size:18px}
.safety-grid p {font-size:12px}
.safety-grid .mini-icon {width:32px;height:32px;border-radius:50%;background:#f2f5f5;color:var(--blue);font-size:11px;display:grid;place-items:center}
.security-notes {font-size:10px}
.timeline {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.timeline:before {content:"";position:absolute;left:30px;right:35px;top:22px;height:2px;background:#dbe3e5}
.timeline>li {display:block;border:0;padding:0 28px 0 0;position:relative}
.timeline>li:last-child {padding-right:0}
.timeline-time {display:flex;gap:12px;position:relative;margin-bottom:22px}
.timeline-time span {background:#fff;border:2px solid #97aeb9;color:var(--blue);width:45px;height:45px;font-size:12px;z-index:1}
.timeline-time b {background:white;padding-right:14px;font-size:13px}
.timeline>li:last-child .timeline-time span {background:var(--red);border-color:var(--red);color:white}
.timeline h3 {font-size:16px;min-height:50px}
.timeline p {font-size:12px;margin-top:9px;line-height:1.9}
.timeline>li>small {display:block;font-size:10px;margin-top:18px;padding:7px 10px;border-radius:4px}
@media(max-width:1100px){
 .hero h1{font-size:36px}.journey{padding-inline:20px}.journey h3{font-size:19px}.journey-path{font-size:11px;padding-inline:10px}
 .type-cards{gap:14px}.type-cards article{padding:20px}.type-cards .selected{padding:19px}.type-diagram{gap:8px}.type-diagram:before{right:0}.type-top{font-size:9px}.type-cards dl{font-size:10px}.type-cards dl>div{gap:8px}.type-cards article>p{font-size:12px}
 .benefit-grid article{padding:24px 21px;gap:18px}.benefit-icon{width:65px;height:75px}.benefit-icon .draw-icon{width:49px;height:49px}.benefit-grid h3{font-size:17px}.benefit-grid p br{display:none}
 .support-intro{gap:27px}.support-intro h2{font-size:26px}.support-columns article{padding-inline:22px}.support-columns h3{font-size:19px}.update-steps{gap:25px;padding-inline:22px}.update-steps>div{padding:0 10px}.timeline>li{padding-right:20px}.timeline h3{font-size:15px}
}
@media(max-width:900px){
 .section{padding-block:60px}.section-head h2{font-size:27px}.hero h1{font-size:40px}
 .journey-comparison{gap:18px}.journey,.journey.after{padding:20px 17px}.journey h3{font-size:17px}.journey-path{font-size:10px;gap:4px;padding:12px 8px}.journey-caption{font-size:10px}
 .type-cards article{padding:18px 16px}.type-cards .selected{padding:17px 15px}.type-top{flex-wrap:wrap;gap:3px}.type-top .type-number{font-size:15px}.service-tag{font-size:8px}.type-diagram{height:136px;gap:5px;margin-top:12px}.type-diagram .draw-icon{width:57px;height:57px}.type-diagram:before{width:105px;height:105px}.diagram-bubble{font-size:10px;padding:7px 9px}.diagram-line{width:16px}.diagram-reply{font-size:9px;padding-inline:9px}.type-cards h3{font-size:20px}.type-cards article>p{font-size:11px}.type-cards dl>div{display:block}.type-cards dt{font-size:9px;margin-bottom:3px}.type-cards dl{margin-top:14px}
 .benefit-grid{gap:15px}.benefit-grid article{display:block;padding:24px}.benefit-icon{width:64px;height:66px;margin-bottom:15px}.benefit-grid h3{font-size:18px}
 .support-intro{grid-template-columns:1fr 40%;gap:22px}.support-intro h2{font-size:25px}.support-intro p{font-size:13px}.support-foundation{font-size:10px;line-height:1.8}.support-columns article{padding-inline:18px}.support-columns h3{font-size:17px}.support-columns p{font-size:12px}.support-step{gap:10px}.support-step span{font-size:9px}.support-step .draw-icon{width:37px;height:37px}
 .update-steps>div{padding:0}.update-steps b{font-size:13px}.update-steps small{font-size:10px}.update-steps .draw-icon{margin-left:10px}.timeline{grid-template-columns:1fr 1fr;gap:35px 24px}.timeline:before{display:none}.timeline>li{padding-right:0}.timeline h3{min-height:0;font-size:17px}.timeline-time{margin-bottom:16px}
}
@media(max-width:600px){
 .phrase-break {display:initial}
 .section{padding-block:46px}.section-head h2{font-size:24px}.hero h1{font-size:clamp(28px,7.8vw,40px)}.hero .lead{font-size:14px}.hero-layout{padding-top:32px}
 .journey-comparison{grid-template-columns:1fr;gap:20px}.journey,.journey.after{padding:21px}.journey h3{font-size:18px}.journey-art{margin:12px 0;aspect-ratio:1.5}.journey-path{font-size:10px;padding:13px 9px}.journey-caption{font-size:11px}.section-takeaway{font-size:13px}
 .type-cards{grid-template-columns:1fr;gap:17px}.type-cards article,.type-cards .selected{display:grid;grid-template-columns:112px 1fr;gap:0 18px;padding:20px 19px}.type-top{grid-column:1/-1;flex-wrap:nowrap;margin-bottom:18px;font-size:10px}.type-number{font-size:17px!important}.service-tag{font-size:9px;padding-inline:7px}.type-diagram{grid-column:1;grid-row:2/4;margin:0;height:145px;gap:4px;align-self:center}.type-diagram:before{width:96px;height:96px;right:-2px;top:10px}.type-diagram .draw-icon{width:51px;height:51px}.diagram-bubble{font-size:9px;padding:7px 8px}.diagram-line{width:10px}.diagram-reply{font-size:9px;bottom:8px;padding-inline:8px}.type-cards h3{grid-column:2;align-self:end;margin-bottom:7px;font-size:21px}.type-cards article>p{grid-column:2;font-size:12px}.type-cards article>p br{display:none}.type-cards dl{grid-column:1/-1;margin-top:16px;font-size:11px;padding-top:10px}.type-cards dl>div{display:flex;gap:14px;margin-block:5px}.type-cards dt{font-size:11px;margin-bottom:0}.comparison-mini-note{font-size:11px;margin-block:18px 10px}
 .deep-dive>summary{font-size:12px;padding:17px 39px 17px 16px;display:block}.deep-dive>summary:after{right:13px;font-size:17px}.detail-label{display:block;font-size:9px;margin-top:4px}.details-body{padding:16px 12px}.comparison-detail .details-body{padding:13px 8px}.comparison-conclusion{padding:22px}.comparison-conclusion h3{font-size:17px}
 .benefit-grid{grid-template-columns:1fr;gap:14px}.benefit-grid article{display:flex;padding:22px 18px;gap:18px}.benefit-icon{width:53px;height:68px;margin:0}.benefit-icon .draw-icon{width:46px;height:46px}.benefit-grid small{font-size:10px}.benefit-grid h3{font-size:16px}.benefit-grid p{font-size:12px;margin-top:8px}.limits{padding:22px 18px;margin-top:25px}.limits header h3{font-size:19px}.care-points{grid-template-columns:1fr;gap:12px;font-size:11px}.care-points>span{display:flex;align-items:baseline;gap:20px;padding-left:13px}.care-points b{font-size:12px;min-width:63px;margin:0}.limits .deep-dive>summary{font-size:12px}.risk-row{gap:12px}.risk-row b{font-size:13px}.risk-row p{font-size:12px}
 .support-intro{grid-template-columns:1fr;gap:12px;margin-bottom:22px}.support-intro h2{font-size:24px}.support-intro img{max-width:380px;justify-self:center}.support-foundation{font-size:10px;margin-top:18px;padding-top:14px}.support-columns{padding:0 22px;grid-template-columns:1fr;gap:0}.support-columns article{padding:23px 0}.support-columns article+article{border-left:0;border-top:1px solid var(--line)}.support-step{gap:15px}.support-step .draw-icon{width:40px;height:40px}.support-step span{font-size:11px}.support-columns h3{font-size:19px;margin-top:12px}.support-columns p{font-size:13px;margin-top:7px}.support-columns p br{display:none}.support-columns .output{font-size:10px;margin-top:13px;padding-top:12px}.rule-example{grid-template-columns:1fr;gap:19px;margin-top:25px}.rule-example h3{font-size:19px}.rule-example blockquote{font-size:13px}.responsibilities{margin-top:23px}
 .update-steps{grid-template-columns:1fr;gap:29px;padding:25px 22px}.update-steps>div{grid-template-columns:49px 24px 1fr;gap:6px 10px;align-items:center}.update-steps .draw-icon{grid-column:1;grid-row:1/3;width:42px;height:42px;margin:0}.update-steps span{grid-column:2;grid-row:1;width:22px;height:22px;font-size:10px}.update-steps b{grid-column:3;grid-row:1;font-size:14px}.update-steps small{grid-column:3;grid-row:2;font-size:10px}.update-steps>div:not(:last-child):after{left:17px;right:auto;top:auto;bottom:-25px}.source-note{font-size:10px}.safety-grid{gap:14px}.safety-grid article{padding:22px}.safety-grid p{font-size:12px}.safety-grid .mini-icon{margin-bottom:12px}
 .timeline{grid-template-columns:1fr;gap:0}.timeline:before{display:block;left:19px;top:22px;bottom:22px;right:auto;width:2px;height:auto}.timeline>li{padding:0 0 27px 58px}.timeline>li:last-child{padding-bottom:0}.timeline-time{margin-bottom:7px;min-height:33px}.timeline-time span{position:absolute;left:-58px;top:0;width:40px;height:40px}.timeline-time b{font-size:13px;line-height:33px}.timeline h3{font-size:16px}.timeline p{font-size:12px;margin-top:8px}.timeline>li>small{margin-top:12px;font-size:10px;width:fit-content}
}
.demo-workbench{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d9e2e6;border-radius:14px;overflow:hidden;background:#fff}
.demo-guide{padding:30px;background:#f2f6f7;border-right:1px solid #d9e2e6}
.demo-site-preview{position:relative;border-radius:8px;overflow:hidden;border:1px solid #d7dfe3;background:#fff}
.demo-site-preview img{width:100%;aspect-ratio:12/7;object-fit:cover}
.demo-preview-note{display:block;padding:8px 14px;font-size:10px;color:var(--muted);background:#fff}
.demo-steps{list-style:none;display:grid;gap:15px;margin:25px 0}
.demo-steps li{display:flex;gap:13px;align-items:flex-start}
.demo-steps li>span{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border:1px solid #b4c7ce;color:var(--blue);border-radius:50%;background:#fff;font-size:12px;font-weight:700}
.demo-steps b{font-size:14px;display:block}.demo-steps small{font-size:11px;color:var(--muted);display:block;margin-top:2px}
.demo-open{width:100%}.demo-url{text-align:center;font-size:11px;color:var(--muted);margin-top:9px}
.demo-questions{padding:30px;min-width:0}.demo-questions h3{font-size:19px}.demo-questions>p:first-of-type{font-size:12px;color:var(--muted);margin:10px 0 20px}
.demo-question{border:1px solid #dce4e8;border-radius:9px;padding:17px 18px;margin-top:13px;background:#fff}
.demo-question-label{font-size:10px;font-weight:700;color:var(--blue)}.demo-question p{font-size:14px;line-height:1.85;margin:5px 0 10px}
.demo-question button{display:flex;align-items:center;gap:20px;min-height:40px;padding:7px 12px;margin-left:auto;border:1px solid #c7d7de;border-radius:5px;background:#f2f7f8;color:var(--blue);font-size:11px;font-weight:700;cursor:pointer}.demo-question button:hover{background:#e2eef1}
.demo-feedback{font-size:12px;color:var(--blue);margin-top:16px;min-height:44px;line-height:1.8}.demo-help{font-size:11px;color:var(--muted);margin-top:8px}
.demo-next{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;border-bottom:1px solid var(--line);margin-top:6px}.demo-next b{font-size:15px}.demo-next p{font-size:12px;color:var(--muted);margin-top:5px}.demo-next a{flex-shrink:0}
@media(max-width:900px){.demo-guide,.demo-questions{padding:22px}.demo-questions h3{font-size:17px}.demo-next{align-items:flex-start;flex-direction:column;gap:12px}}
@media(max-width:600px){.demo-workbench{grid-template-columns:1fr}.demo-guide{border-right:0;border-bottom:1px solid #d9e2e6}.demo-questions h3{font-size:18px}.demo-questions,.demo-guide{padding:22px 19px}.demo-question{padding:15px}.demo-next b{font-size:14px}.demo-next p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.deep-dive .details-body{display:block}.deep-dive{break-inside:avoid}}
/* Real footage: keep the supplied answer intact, with readable framing. */
.recording-card { margin:0; overflow:hidden; background:#fff; border:1px solid #d7e0e4; border-radius:18px; box-shadow:0 16px 48px #20374412; }
.recording-header { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid #e4e9ec; color:#63717d; font-size:11px; }
.recording-badge { display:inline-block; color:#cf0021; background:#fff0f2; font-size:12px; font-weight:700; border-radius:5px; padding:5px 9px; }
.recording-flow { display:flex; justify-content:center; align-items:center; gap:22px; margin:16px 12px; font-size:17px; color:#172c38; }
.recording-flow > span { color:#df0024; }
.recording-question { margin:0 22px 12px; padding:12px 15px; background:#eff5f6; border-radius:9px; font-size:14px; font-weight:700; line-height:1.8; color:#204d5d; }
.recording-question small { display:block; margin-bottom:3px; font-size:10px; font-weight:400; }
.recording-card video { display:block; width:100%; height:auto; max-height:620px; object-fit:contain; background:#f6f8f9; }
.recording-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid #e8edef; }
.recording-controls button { padding:8px 12px; color:#fff; background:#203e4b; border:0; border-radius:5px; cursor:pointer; font:inherit; font-size:12px; }
.recording-controls a { color:#295c70; font-size:12px; text-underline-offset:4px; }
.recording-controls button:focus-visible { outline:3px solid #dc0024; outline-offset:3px; }
.recording-card figcaption { padding:13px 20px 16px; border-top:1px solid #e8edef; font-size:10px; line-height:1.8; color:#62717d; }
.recording-more { display:block; width:fit-content; margin:14px auto 0; color:#295c70; font-size:12px; font-weight:700; text-underline-offset:4px; }
.answer-rules-section { background:#f6f8f9; }
.answer-rules-layout { display:grid; grid-template-columns:.88fr 1.12fr; gap:48px; align-items:start; }
.answer-rules-copy h3 { margin:18px 0; font-size:23px; line-height:1.6; }
.answer-rules-copy > p { font-size:14px; line-height:1.9; }
.answer-rule-steps { list-style:none; padding:0; margin:24px 0; }
.answer-rule-steps li { display:flex; gap:16px; padding:16px 0; border-top:1px solid #dce3e6; }
.answer-rule-steps li > span { color:#df0024; font-weight:700; font-size:13px; padding-top:3px; }
.answer-rule-steps b { font-size:15px; }
.answer-rule-steps p { margin:4px 0 0; font-size:13px; line-height:1.8; color:#53636d; }
.answer-rules-copy > .fine-print { font-size:11px; }
.refusal-example { margin:0; background:#fff; border:1px solid #d7e0e4; border-radius:14px; overflow:hidden; box-shadow:0 10px 28px #20374408; }
.refusal-example-heading { padding:18px 20px; border-bottom:1px solid #e6e9eb; display:flex; gap:10px; align-items:center; justify-content:space-between; font-size:14px; }
.refusal-example-heading span { flex-shrink:0; color:#6b7a84; font-size:11px; }
.refusal-crop { display:block; position:relative; aspect-ratio:754 / 620; overflow:hidden; background:#fff; }
.refusal-crop img { position:absolute; width:238.196287%; max-width:none; height:auto; left:-125.994695%; top:-45.161290%; }
.refusal-example figcaption { padding:15px 20px; border-top:1px solid #e6e9eb; font-size:10px; line-height:1.8; color:#62717d; }
.refusal-example figcaption a { display:block; margin-top:6px; color:#295c70; font-size:12px; font-weight:700; text-underline-offset:4px; }
@media(max-width:900px) {
  .answer-rules-layout { grid-template-columns:1fr; gap:28px; }
  .recording-card { max-width:560px; margin:auto; }
  .refusal-example { width:100%; max-width:680px; margin:auto; }
}
@media(max-width:560px) {
  .recording-header { padding:12px; font-size:10px; }
  .recording-badge { font-size:10px; }
  .recording-flow { font-size:15px; gap:16px; }
  .recording-question { margin:0 12px 10px; font-size:13px; }
  .recording-card figcaption { padding:12px; }
  .answer-rules-copy h3 { font-size:21px; }
  .refusal-example-heading { padding:14px 12px; font-size:12px; }
}

/* === AIチャット 比較/メリット：イラスト→実写シーン画像へ差し替え（2026-10-09） === */
/* Section 01：比較カード — 画像ヘッダー型（奥行きのある枠） */
.type-diagram{height:auto;display:block;position:relative;gap:0;margin:16px 0 18px;padding:0;border-radius:10px;overflow:hidden;background:#eceff1;box-shadow:0 1px 2px rgba(22,43,58,.07),0 14px 26px -16px rgba(22,43,58,.32)}
.type-diagram::before{content:none!important}
.type-diagram img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.selected .type-diagram{box-shadow:0 1px 2px rgba(150,40,44,.09),0 14px 26px -15px rgba(176,46,52,.34)}
/* Section 02：メリットカード — 縦型・画像ヘッダー（フルブリード） */
.benefit-grid{grid-template-columns:1fr 1fr;gap:22px}
.benefit-grid article,.benefit-grid article:nth-child(2),.benefit-grid article:nth-child(3){display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border:1px solid #e3e6e5;border-radius:12px;background:var(--paper);box-shadow:0 1px 2px rgba(22,43,58,.05),0 16px 30px -20px rgba(22,43,58,.28)}
.benefit-icon{width:100%;height:auto;aspect-ratio:3/2;flex:0 0 auto;display:block;position:relative;background:#eceff1;line-height:0}
.benefit-icon::before{content:none!important}
.benefit-icon img{display:block;width:100%;height:100%;object-fit:cover}
.benefit-icon+div{padding:20px 24px 24px}
@media(max-width:1100px){
 .benefit-icon+div{padding:18px 21px 22px}
}
@media(max-width:900px){
 .type-cards article,.type-cards .selected{padding:18px 16px}
 .type-diagram{height:auto;margin:14px 0 16px}
 .benefit-grid article{display:flex;flex-direction:column;padding:0}
 .benefit-icon{width:100%;height:auto;margin:0}
 .benefit-icon+div{padding:18px 20px 22px}
}
@media(max-width:600px){
 .type-cards{grid-template-columns:1fr}
 .type-cards article,.type-cards .selected{display:block;padding:18px 18px 20px}
 .type-diagram{grid-column:auto;grid-row:auto;height:auto;margin:14px 0 16px;align-self:auto}
 .type-cards h3{margin-top:0}
 .benefit-grid{grid-template-columns:1fr;gap:16px}
 .benefit-grid article{display:flex;flex-direction:column;padding:0;gap:0}
 .benefit-icon{width:100%;height:auto;margin:0}
 .benefit-icon+div{padding:18px 18px 20px}
}

/* === 公開後の情報更新 3ステップ：チープなアイコン→実画面サムネイルに差し替え（2026-10-09） === */
.update-steps .step-shot{grid-column:1/-1;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:10px;border:1px solid #e3e9ec;background:#eef2f4;box-shadow:0 1px 2px rgba(22,43,58,.06),0 16px 30px -20px rgba(22,43,58,.3);margin:0 0 16px;display:block}
/* 横並び時のステップ間コネクタは画像の縦中央あたりに */
.update-steps>div:not(:last-child)::after{top:34%}
@media(max-width:1100px){
 .update-steps .step-shot{margin-bottom:14px}
}
@media(max-width:600px){
 .update-steps>div{grid-template-columns:30px 1fr;gap:7px 12px;padding:0}
 .update-steps .step-shot{grid-column:1/-1;grid-row:1;aspect-ratio:4/3;width:100%;height:auto;margin:0 0 14px}
 .update-steps span{grid-column:1;grid-row:2;width:24px;height:24px;font-size:11px}
 .update-steps b{grid-column:2;grid-row:2;font-size:15px}
 .update-steps small{grid-column:2;grid-row:3;font-size:11px}
 .update-steps>div:not(:last-child)::after{display:none}
}