/* /care 保养页专属样式（2026-10-19 改版 v2）。基础排版复用 atelier.css 的 at- 类（两页同一套视觉），
   这里只放本页特有区块，类名一律 ca- 前缀；颜色只用全站 :root token，不新增色板与字体。 */
.ca-small{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:62ch}
.ca-p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:64ch}
.ca-more{margin:22px 0 0}

/* 首屏：左文字，右按比例示意图（头发横截面 vs 金色层） */
.ca-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:clamp(40px,6vw,104px);align-items:center;padding:clamp(40px,5vw,72px) 0 clamp(8px,1vw,16px)}
.ca-scale{margin:0;background:var(--paper-2);padding:clamp(24px,3vw,40px) clamp(16px,3vw,36px) clamp(20px,2.4vw,28px)}
.ca-scale svg{display:block;width:100%;height:auto;overflow:visible}
.ca-hair{fill:none;stroke:var(--ink-soft);stroke-width:1.25;stroke-dasharray:3 4}
.ca-steel{fill:var(--line)}
.ca-coat{fill:var(--gold)}
.ca-lead{stroke:var(--gold-d);stroke-width:1}
.ca-t{font:500 14px var(--at-sans);fill:var(--ink)}
.ca-t-in{fill:var(--ink-soft);font-weight:400}
.ca-scale figcaption{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
/* 唯一的编排动效：金色层沿钢面铺开 */
@keyframes ca-coat-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ca-coat{transform-box:fill-box;transform-origin:left center;animation:ca-coat-in .9s var(--ease) .3s both}

/* 一件货由什么组成：沿用 at-mat 三栏；每栏两段 */
.at-mat p+p{margin-top:-6px}
.ca-wear{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px clamp(24px,5vw,80px);align-items:start}
.ca-wear .at-h3{margin:0}
.ca-wear .ca-small{grid-column:2;margin-top:4px}
.ca-rank{list-style:none;margin:0;padding:0;counter-reset:r}
.ca-rank li{counter-increment:r;display:grid;grid-template-columns:34px 120px minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.ca-rank li:last-child{border-bottom:1px solid var(--line)}
.ca-rank li::before{content:counter(r);font:400 22px/1 var(--at-serif);color:var(--gold-d)}
.ca-rank b{font-weight:600;font-size:15px}
.ca-rank span{font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* 标题左、内容右（两栏内容） */
.ca-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px clamp(24px,5vw,80px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(56px,7vw,104px)}
.ca-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px clamp(28px,4vw,56px)}
.ca-why{margin:0}
.ca-why>div{padding:11px 0;border-top:1px solid var(--line)}
.ca-why>div:last-child{border-bottom:1px solid var(--line)}
.ca-why dt{font-weight:600;font-size:14.5px}
.ca-why dd{margin:2px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.ca-why-tight>div{padding:12px 0}
.ca-off-t{margin-top:36px}
.ca-why-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);border-bottom:1px solid var(--line)}
.ca-why-2>div:last-child{border-bottom:0}

/* 按表面怎么洗：三栏，步骤是真序列 */
.ca-clean{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(28px,4vw,56px);margin-top:40px}
.ca-clean>div{border-top:1px solid var(--ink);padding-top:22px}
.ca-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.ca-steps li{counter-increment:s;position:relative;padding:0 0 10px 32px;font-size:15px;line-height:1.55}
.ca-steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;border:1px solid var(--gold);font:500 12px/20px var(--at-sans);text-align:center;color:var(--ink)}

/* 表格：绝对别用 / 症状对照 */
.ca-never-t{margin:clamp(48px,6vw,72px) 0 16px}
.ca-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.ca-table thead th{text-align:left;font-weight:600;font-size:13.5px;color:var(--ink-soft);padding:0 16px 10px 0;border-bottom:1px solid var(--ink)}
.ca-table tbody th,.ca-table td{text-align:left;vertical-align:top;padding:15px 16px 15px 0;border-bottom:1px solid var(--line)}
.ca-table tbody th{font-weight:600;color:var(--ink)}
.ca-table td{color:var(--ink-soft)}
.ca-never tbody th{width:34%}
.ca-signs{margin-top:36px}
.ca-signs tbody th{width:30%}
.ca-signs td:nth-child(2){width:32%}
.ca-verdict{font-weight:600;color:var(--ink)}

/* 家里 / 店里 */
.ca-list{list-style:none;margin:0;padding:0}
.ca-list li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--ink-soft)}
.ca-list li:last-child{border-bottom:1px solid var(--line)}
.ca-list li::before{content:"";position:absolute;left:0;top:calc(12px + .8em);width:10px;border-top:1px solid var(--gold)}

/* 给零售客人的保养卡：表面页签 + 加石头行 → 卡 → 复制 / 打印 */
.ca-cardsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:32px clamp(40px,6vw,104px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(56px,7vw,104px)}
.ca-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.ca-tabs{display:inline-flex;border:1px solid var(--ink)}
.ca-tab{min-height:44px;padding:0 18px;border:0;background:#fff;color:var(--ink);font:500 14px/1 var(--at-sans);letter-spacing:.02em;cursor:pointer;transition:background .2s,color .2s}
.ca-tab+.ca-tab{border-left:1px solid var(--ink)}
.ca-tab[aria-selected="true"]{background:var(--ink);color:#fff}
.ca-tab:not([aria-selected="true"]):hover{background:var(--paper-2)}
.ca-opt{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;cursor:pointer}
.ca-opt input{width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
.ca-stage{margin-top:14px;background:var(--paper-2);padding:clamp(24px,2.4vw,32px) clamp(16px,4vw,56px);display:grid;place-items:center}
.ca-card{position:relative;width:100%;max-width:440px;background:#fff;border:1px solid var(--line);padding:40px 32px 26px;box-shadow:0 22px 44px -30px rgba(33,31,28,.45)}
.ca-hole{position:absolute;top:15px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:1px solid var(--gold);background:var(--paper-2)}
.ca-card-t{font:400 22px/1.25 var(--at-serif);margin:0 0 16px}
.ca-lines{list-style:none;margin:0;padding:0}
.ca-lines li{position:relative;padding-left:20px;margin:0 0 8px;font-size:14.5px;line-height:1.5}
.ca-lines li:last-child{margin-bottom:0}
.ca-lines li::before{content:"";position:absolute;left:0;top:.78em;width:9px;border-top:1px solid var(--gold)}
.ca-extra{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
@keyframes ca-in{from{opacity:0}to{opacity:1}}
.ca-face:not([hidden]),.ca-extra:not([hidden]){animation:ca-in .3s var(--ease) both}
.ca-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px}
.ca-act{min-height:44px;padding:0 20px;font-size:13.5px}
.ca-status{font-size:13.5px;color:var(--gold-d)}

@media(max-width:1023px){
	.ca-top{grid-template-columns:minmax(0,1fr)}
	.ca-scale{margin-top:32px;max-width:560px}
	.ca-wear,.ca-split,.ca-cardsec{grid-template-columns:minmax(0,1fr)}
	.ca-wear .ca-small{grid-column:auto}
	.ca-clean{grid-template-columns:minmax(0,1fr)}
	.ca-tool{max-width:560px}
}
@media(max-width:640px){
	.ca-cols,.ca-why-2{grid-template-columns:minmax(0,1fr)}
	.ca-t{font-size:21px}
	.ca-rank li{grid-template-columns:28px minmax(0,1fr)}
	.ca-rank span{grid-column:2}
	.ca-table thead{display:none}
	.ca-table,.ca-table tbody,.ca-table tr,.ca-table th,.ca-table td{display:block;width:auto!important}
	.ca-table tr{padding:14px 0;border-bottom:1px solid var(--line)}
	.ca-table tbody th,.ca-table td{border:0;padding:2px 0}
	.ca-tabs{display:flex;width:100%}
	.ca-tab{flex:1;padding:0 10px}
	.ca-card{padding:42px 24px 26px}
	.ca-card-t{font-size:20px}
	.ca-act{flex:1}
}
@media(prefers-reduced-motion:reduce){
	.ca-coat,.ca-face:not([hidden]),.ca-extra:not([hidden]){animation:none}
}