/* calm.css — the calmer look for the connect pages, 5 October 2026: her yes, "yes calmer page replaces all pages" */
/* 5 October — the calmer version: her two-tabs idea for step 1; Claude Design's layout for Start a project, with her words; thinner lines and fewer boxes in both */
.part .sk,.later .sk{border-width:1px;box-shadow:none}
.wtabs{display:flex;gap:6px;padding:5px;background:#F4F1EA;border-radius:999px;margin:6px 0 24px;max-width:520px}
.wtabs button{flex:1;font:inherit;font-weight:800;font-size:16.5px;border:0;background:none;color:#5E5B55;padding:11px 18px;border-radius:999px;cursor:pointer}
.wtabs button:hover{color:#1A1A1A}
.wtabs button small{display:block;font-size:12.5px;font-weight:600;color:#8F8B84;margin-top:1px}
.wtabs{border-radius:22px}.wtabs button{border-radius:18px;padding:8px 18px;line-height:1.25}
.wtabs button[aria-selected="true"]{background:#fff;color:var(--c1);box-shadow:0 0 0 1.5px var(--b1),0 2px 8px rgba(90,111,208,.12)}
.wtabs button:focus-visible{outline:2px solid #5A6FD0;outline-offset:2px}
.wpanel .brw{margin:0 0 30px}
.icopt{display:flex;align-items:center;gap:12px;max-width:820px;margin:18px 0 0;padding:12px 0 0;border-top:1px solid #EFEBE4;text-decoration:none;color:#5E5B55;font-size:15px;line-height:1.45}
.icopt img{border-radius:8px;flex:none}
.icopt b{color:#1A1A1A}
.icopt .dl{margin-left:auto;flex:none;font-weight:800;color:#5A6FD0;white-space:nowrap}
.icopt:hover .dl{text-decoration:underline}
.wpanel .brw .fine{display:block;margin-top:8px;font-size:15px;color:#6B6862}
.step.desk2{align-items:start}
.step.desk2 .say p{margin:14px 0 0;font-size:16px;line-height:1.6}
.step.desk2 .dk1{color:#5E5B55}
@media (max-width:620px){.icopt{flex-wrap:wrap}.icopt .dl{margin-left:40px}.wtabs button{padding:8px 13px;font-size:14.5px}}
/* Start a project */
.cx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start;padding:30px 0;border-top:1px solid #EFEBE4}
.cx.one{grid-template-columns:minmax(0,1fr)}
.cx.one > div{max-width:620px}
.cxk{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:#8F8B84;margin:0 0 10px}
.cxn{width:22px;height:22px;border-radius:50%;border:1px solid #F3DCC4;color:#B5672A;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.cxs{font-size:21px;line-height:1.4;font-weight:600;color:#1A1A1A;margin:0}
.cxs::before{content:"“";color:#C9C4BB}.cxs::after{content:"”";color:#C9C4BB}
.cxe{font-size:15.5px;line-height:1.55;color:#6B6862;margin:10px 0 0}
.cxw{margin:14px 0 0;font-size:15px}
.cxw + .cxw{margin-top:8px}
.cxw summary{display:flex;gap:9px;align-items:baseline;cursor:pointer;list-style:none;color:#4A4742;font-weight:700}
.cxw summary::-webkit-details-marker{display:none}
.cxw .plus{width:18px;flex:none;text-align:center;font-weight:800;color:#F2811D;font-size:17px;transition:transform .15s}
.cxw[open] .plus{transform:rotate(45deg)}
.cxw ul{margin:8px 0 0 27px;padding:0;list-style:none;color:#5E5B55;line-height:1.7}
.cxw li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#F2811D;margin-right:9px;vertical-align:1px}
.cxp{max-width:none}
.cxp .keep::after{content:"";width:7px;height:7px;border-radius:50%;background:#F2811D;order:-1;margin-left:-15px;margin-right:0;flex:none}
.cxp .keep{position:relative}
.cxa{padding:4px 0 0 18px;border-left:2px solid #EFEBE4}
.cxa p:last-child{margin:0;font-size:16.5px;line-height:1.55;color:#1A1A1A}
@media (max-width:760px){.cx{grid-template-columns:minmax(0,1fr);gap:18px}.cxs{font-size:19px}}

/* 5 October, her words: "i liked lighter or like design's maybe not white but not colors, a number can be colored but the button ligher" */
.three-steps li+li:before{display:none}
.three-steps li:nth-child(n) a{background:#FFFEFC;border:1px solid #E8E4DD}
.three-steps li:nth-child(1) a span{background:#fff;color:var(--c1);border:1.5px solid var(--c1)}
.three-steps li:nth-child(2) a span{background:#fff;color:var(--c2);border:1.5px solid var(--c2)}
.three-steps li:nth-child(3) a span{background:#fff;color:var(--c3);border:1.5px solid var(--c3)}
.three-steps a:hover{border-color:#D9D3C9}
#add h2 .n{background:#fff;border:1.5px solid var(--c1)}
#allow h2 .n{background:#fff;border:1.5px solid var(--c2)}
#first h2 .n{background:#fff;border:1.5px solid var(--c3)}

/* what you say, as plain large text without a bubble (Claude Design's layout, 5 October) */
main .chat .bubble.me{background:none;border:0;box-shadow:none;border-radius:0;padding:0;font-size:19px;font-weight:600;color:#1A1A1A;line-height:1.4;align-self:flex-start;text-align:left}
main .chat .bubble.me::before{content:"“";color:#C9C4BB}main .chat .bubble.me::after{content:"”";color:#C9C4BB}
/* the Start a project label in the AI pages' own colour for the number */
.cxa .gcard,.cxa .sk{margin-top:8px}

/* How to use it, the same calm: what you say as plain text, light numbers, thin lines */
.mo .ways .bubble.me{background:none;border:0;box-shadow:none;border-radius:0;padding:0;font-size:19px;font-weight:600;color:#1A1A1A;line-height:1.4;text-align:left}
.mo .ways .bubble.me::before{content:"“";color:#C9C4BB}.mo .ways .bubble.me::after{content:"”";color:#C9C4BB}
.mo .ways{gap:8px}
.mo h2 .n{background:#fff;border:1.5px solid var(--c)}
.mo .lands{box-shadow:none;border-width:1px}
.mo .lands .lh{background:none;border:0;padding:0;color:#8F8B84;letter-spacing:.06em}