/* the Claude page, 29 September: the sample for the three platform pages, one layout for all */
section{padding:0;border:0}
.top{padding:56px 0 36px;text-align:center}
.top .crumb{font-size:14px;color:#8F8B84;margin:0 0 18px}
.top .crumb a{color:#8F8B84}
.top h1{font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,44px);line-height:1.15;margin:0 0 12px}
.top .under1{font-size:17px;color:#5E5B55;margin:0 auto;max-width:560px}
.nametag{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;border:1.5px solid #E4E0D8;border-radius:14px;background:#fff;padding:6px 14px 6px 6px;font-size:15px;color:#4A4742}
.nametag .hello{background:linear-gradient(100deg,#EEF1FE,#F7EEFB 50%,#FDF1E6);border-radius:9px;padding:4px 10px;font-weight:800;font-size:12px;letter-spacing:.1em}
.nametag b{font-family:'Comfortaa',sans-serif;font-size:17px;color:#1A1A1A}
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px auto 0;max-width:820px}
.jump a{border:1.5px solid #E4E0D8;background:#fff;border-radius:999px;padding:6px 13px;font-size:14px;font-weight:700;color:#4A4742;text-decoration:none}
.jump a:hover{border-color:#C43CD8}
.jump a.main{background:var(--grad);color:#fff;border-color:transparent}

.part{padding:52px 0;border-top:1px solid var(--line)}
.part h2{font-size:clamp(22px,2.7vw,30px);margin:0 0 8px;display:flex;align-items:baseline;gap:12px}
.part h2 .n{font-size:14px;color:#C43CD8;font-weight:800;letter-spacing:.06em}
.part .lede{color:#5E5B55;font-size:16px;margin:0 0 26px;max-width:640px}
.part.quiet h2{font-size:clamp(20px,2.3vw,25px)}

.addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:2px solid transparent;border-radius:14px;padding:12px 14px;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;max-width:560px}
.addr code{font-size:16px;font-weight:700;color:#1A1A1A;word-break:break-all}
.copy{margin-left:auto;border:0;border-radius:999px;background:var(--grad);color:#fff;font:800 14px Nunito,sans-serif;padding:8px 16px;cursor:pointer}

/* the steps with their sketches, from her screenshots of 29 September */
.steps{display:flex;flex-direction:column;gap:34px}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px;align-items:center}
.step .say{font-size:17px;line-height:1.55}
.step .say .k{display:inline-block;font-size:13px;font-weight:800;color:#C43CD8;letter-spacing:.06em;margin-bottom:6px}
.step .say .fine{display:block;font-size:14.5px;color:#5E5B55;margin-top:8px}
@media (max-width:760px){.step{grid-template-columns:1fr;gap:14px}}

.sk{background:#fff;border:1.5px solid #E4E0D8;border-radius:16px;padding:16px 18px;font-size:14px;color:#4A4742;box-shadow:0 6px 18px rgba(143,139,132,.10);max-width:440px}
.sk .t{font-weight:800;font-size:18px;color:#1A1A1A;margin:0 0 10px}
.sk .row2{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.sk .ic{width:14px;height:14px;border:1.6px solid #8F8B84;border-radius:4px;flex:none}
.sk .mh{font-size:11.5px;color:#8F8B84;letter-spacing:.05em;margin:10px 0 2px 10px}
.sk .dim{color:#B5B0A7}
.sk .glow{position:relative;font-weight:800;color:#1A1A1A;background:#FCFBF8;box-shadow:0 0 0 2px rgba(196,60,216,.55),0 0 18px rgba(59,108,246,.18)}
.sk .sep{height:1px;background:#EFEBE4;margin:6px 0}
.sk .who{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-top:1px solid #EFEBE4;color:#1A1A1A;font-weight:700}
.sk .av{width:22px;height:22px;border-radius:50%;background:#EDEAE3;font-size:11px;display:flex;align-items:center;justify-content:center}
.sk .field{border:1.5px solid #E4E0D8;border-radius:10px;padding:9px 12px;margin:6px 0 2px;color:#1A1A1A;font-weight:700}
.sk .field.url{font-weight:600;font-size:13px;word-break:break-all}
.sk .help{font-size:12px;color:#8F8B84;margin:2px 0 8px}
.sk .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.sk .b{border:1.5px solid #E4E0D8;border-radius:10px;padding:6px 14px;font-weight:700}
.sk .b.go{background:#1A1A1A;color:#fff;border-color:#1A1A1A}
.sk .b.add{background:#1A1A1A;color:#fff;border-color:#1A1A1A;margin-left:auto}
.sk .list .row2{border-bottom:1px solid #F1EEE8;border-radius:0}
.sk .lg{width:22px;height:22px;border-radius:6px;border:1.5px solid #E4E0D8;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none}
.sk .cst{font-size:11px;background:#F1EEE8;border-radius:6px;padding:1px 6px;margin-left:6px}
.sk .ok{margin-left:auto;color:#1A1A1A}
.sk .drop{margin:6px 0 0 auto;width:210px;border:1.5px solid #E4E0D8;border-radius:12px;padding:4px;background:#fff}
.sk .drop .row2{padding:7px 10px}

/* permissions */
.perm{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.perm{grid-template-columns:1fr}}
.perm .grp{background:#fff;border:1.5px solid #E4E0D8;border-radius:16px;padding:16px 18px}
.perm .gh{font-size:13px;letter-spacing:.06em;color:#8F8B84;margin:0 0 8px;font-weight:700}
.perm .pr{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #F4F1EA;font-size:15px}
.perm .pr:last-child{border-bottom:0}
.perm .pr .what{font-size:12.5px;color:#8F8B84;margin-left:6px}
.three{margin-left:auto;display:flex;gap:2px;background:#F4F1EA;border-radius:9px;padding:2px;flex:none}
.three span{width:26px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#B5B0A7}
.three span.on{background:#fff;color:#1A1A1A;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.key{display:flex;flex-wrap:wrap;gap:18px;font-size:14.5px;color:#4A4742;margin:0 0 20px}
.key i{font-style:normal;display:inline-flex;width:24px;height:22px;border-radius:6px;background:#fff;border:1px solid #E4E0D8;align-items:center;justify-content:center;margin-right:6px;font-size:12px}
.rule{font-family:'Comfortaa',sans-serif;font-weight:700;font-size:20px;margin:0 0 6px}

/* shared bits */
.yellow{background:#FFF6D6;border:1.5px solid #F0DC8C;border-radius:14px;padding:14px 18px;font-size:15px;line-height:1.55;max-width:560px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1.5px solid #DCD6CB;border-radius:999px;padding:7px 14px;font-weight:700;font-size:15px;background:#FCFBF8}
.chat{display:flex;flex-direction:column;gap:10px;max-width:520px}
.chat .bubble.me{align-self:flex-end}
.chat .bubble.ai{align-self:flex-start;font-size:15.5px}
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.seat2{background:#fff;border:1.5px solid #E4E0D8;border-radius:14px;padding:14px;text-align:center;font-weight:800;font-size:15px}
.seat2 small{display:block;font-weight:600;color:#8F8B84;font-size:12.5px;margin-top:3px}
@media (max-width:760px){.seats{grid-template-columns:1fr 1fr}}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1.5px solid #E4E0D8;border-radius:16px;padding:18px 20px;font-size:15.5px;line-height:1.55}
.card h3{font-size:17px;margin:0 0 6px}
.card p{margin:0 0 8px}
.card p:last-child{margin:0}
.card .quote{display:inline-block;background:#EDEAE3;border-radius:12px;padding:4px 10px;font-size:14.5px;margin:2px 0}
.tbc{font-size:12px;font-weight:800;color:#B7791F;background:#FFF6D6;border:1px solid #F0DC8C;border-radius:6px;padding:1px 6px;margin-left:4px;letter-spacing:.03em;white-space:nowrap}
.check{font-size:14px;color:#8F8B84;margin:24px 0 0}
.others{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.others a{border:1.5px solid #DCD6CB;border-radius:12px;padding:10px 18px;font-weight:800;font-size:15px;text-decoration:none;background:#fff}

/* 29 September, her word: two screens, and Claude Design set apart */
.two{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;max-width:820px}
.two .arr{font-size:26px;color:#8F8B84}
.scrl{font-size:13px;font-weight:800;letter-spacing:.07em;color:#8F8B84;margin:0 0 8px}
@media (max-width:760px){.two{grid-template-columns:1fr}.two .arr{transform:rotate(90deg);justify-self:center}}
.aside2{background:#F4F1EA;border:0;border-radius:22px;padding:34px 30px;margin:0 0 8px}
.aside2 + .part{border-top:0}
.k2{font-size:13px;font-weight:800;letter-spacing:.07em;color:#C43CD8;margin:0 0 6px}
@media (max-width:760px){.seats{grid-template-columns:1fr 1fr !important}}
.part{scroll-margin-top:70px}

/* 29 September, her yes: the page opens short. Three steps, then drawers for later */
.three-steps{list-style:none;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0;margin:28px 0 0}
.three-steps a{display:flex;align-items:center;gap:10px;border:1.5px solid #E4E0D8;background:#fff;border-radius:999px;padding:8px 18px 8px 8px;font-weight:800;font-size:15px;text-decoration:none;color:#1A1A1A}
.three-steps a span{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.three-steps li+li:before{content:"→";color:#B5B0A7;margin-right:10px}
.three-steps li{display:flex;align-items:center}
.later{padding:56px 0 24px;border-top:1px solid var(--line)}
.later h2{font-size:clamp(22px,2.7vw,30px);margin:0 0 8px}
.drawer{border:1.5px solid #E4E0D8;border-radius:16px;background:#fff;margin:0 0 10px;scroll-margin-top:70px}
.drawer summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:16px 20px;position:relative;padding-right:48px}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary:after{content:"+";position:absolute;right:20px;top:12px;font-size:22px;color:#C43CD8;font-weight:700}
.drawer[open] summary:after{content:"–"}
.drawer .dt{font-family:'Comfortaa',sans-serif;font-weight:700;font-size:17px;line-height:1.4}
.drawer .dw{font-size:14.5px;color:#8F8B84}
.drawer .din{padding:4px 20px 22px;border-top:1px solid #F1EEE8}
.drawer .din > .lede:first-child{margin-top:14px}
.drawer:hover{border-color:#D9C3E6}
.later > .lede{font-size:16px;text-align:left;color:#5E5B55;margin:0 0 22px;max-width:640px}
.drawer .lede{font-size:16px;text-align:left;color:#5E5B55;margin:14px 0 18px;max-width:640px}

/* the three steps stay on one line; stacked without arrows on a phone */
.three-steps{flex-wrap:nowrap}
.three-steps a{font-size:14px;padding:6px 14px 6px 6px;white-space:nowrap}
@media (max-width:620px){.three-steps{flex-direction:column;align-items:center}.three-steps li+li:before{display:none}}

/* 29 September, her word: the bright colours pull the eye off the words. Buttons in the hello card's soft colours */
.copy{background:linear-gradient(100deg,#EEF1FE,#F7EEFB 50%,#FDF1E6);color:#4A4742;border:1.5px solid #E4E0D8}
.three-steps a span{background:linear-gradient(100deg,#EEF1FE,#F7EEFB 50%,#FDF1E6);color:#4A4742;border:1px solid #E4E0D8}

/* the same on the AI pages' chats */
.chat .bubble.me{background:#fff;border:1.5px solid #E4E0D8;box-shadow:0 2px 8px rgba(143,139,132,.08)}

/* 29 September, her word: Claude Design opens into its own page */
.aside2{padding:0;background:none}
.golink{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#F4F1EA;border-radius:22px;padding:24px 28px;text-decoration:none;color:#1A1A1A}
.golink b{font-size:20px}
.golink .k2{margin:0}
.aigo{background:linear-gradient(100deg,#EEF1FE,#F7EEFB 50%,#FDF1E6);color:#4A4742;border:1.5px solid #E4E0D8;border-radius:999px;padding:8px 18px;font-weight:800;font-size:14px}
.golink:hover .aigo{border-color:#D9C3E6;color:#1A1A1A}

/* 29 September, her words: Start a project, each ask with what it makes beside it */
.ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;margin:0 0 34px}
.ex:last-of-type{margin-bottom:10px}
.exk{font-size:13px;font-weight:800;letter-spacing:.06em;color:#4A4742;margin:0 0 10px}
.exn{font-size:15px;color:#5E5B55;margin:10px 0 0;line-height:1.5}
.exl .chat{max-width:none}
.exl .chat .bubble.me{align-self:flex-start}
.exr{max-width:none}
.fl{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14.5px;color:#4A4742;flex-wrap:wrap}
.fl.f0{font-size:16px;color:#1A1A1A}
.fl.f1{padding-left:18px}
.fl.f2{padding-left:40px;font-size:13.5px}
.fl.f3{padding-left:62px;font-size:13.5px}
.fl .fi{width:18px;height:13px;border-radius:3px;background:#E4DED2;border:1.5px solid #8F8B84;flex:none}
.fl .dc{width:11px;height:14px;border-radius:2px;border:1.4px solid #8F8B84;background:#fff;flex:none}
.fl .fw{font-size:12.5px;color:#8F8B84;margin-left:4px}
@media (max-width:760px){.ex{grid-template-columns:1fr;gap:12px}}

/* one frame, not two: the bubbles stand on the page */
.wrap .chat{border:0;padding:0;background:none;border-radius:0}

/* 29 September, her word: the builder seats keep their own notes */
.builder{margin-top:20px;background:#fff;border:1.5px solid #E4E0D8;border-radius:16px;padding:18px 22px;font-size:15.5px;line-height:1.55;max-width:720px;scroll-margin-top:70px}
.builder p{margin:0 0 8px}.builder p:last-child{margin:0}
@media (max-width:760px){.seats{grid-template-columns:1fr 1fr !important}}

/* 29 September, her word: Claude Design and Claude Code light up and stay lit, so people click them */
.seat2.lit2{font:inherit;font-weight:800;font-size:15px;color:#1A1A1A;text-decoration:none;cursor:pointer;display:block;width:100%}
.seat2.lit2 small{color:#8E3FA8;font-weight:700}
.lit-on .seat2.lit2{animation:tilelit 1.4s ease var(--d) both}
@keyframes tilelit{0%{background:#fff;border-color:#E4E0D8;box-shadow:none}40%{box-shadow:0 0 0 6px rgba(196,60,216,.14),0 0 22px rgba(59,108,246,.16)}100%{background:linear-gradient(100deg,#EEF1FE,#F7EEFB 50%,#FDF1E6);border-color:#D9C3E6;box-shadow:0 2px 10px rgba(196,60,216,.10)}}
.seat2.lit2:hover{border-color:#C43CD8 !important;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.lit-on .seat2.lit2{animation:none;background:linear-gradient(100deg,#EEF1FE,#F7EEFB 50%,#FDF1E6);border-color:#D9C3E6}}

/* the Detailed guide card, offered as itself: her word, 29 September */
.golink.guide{background:#fff;border:1.5px solid #D9C3E6;padding:26px 30px}
.golink.guide b{font-size:24px}
.golink.guide .gsub{display:inline-block;margin-top:6px;font-size:15.5px;color:#5E5B55}

/* 2 October: the rename list under step 1, and the CLAUDE.md line */
ul.exn.norn{margin:6px 0 0;padding-left:20px;font-size:14.5px}
ul.exn.norn li{margin:2px 0}
code.cl{display:inline-block;background:#FCFBF8;border:1.5px solid #E4E0D8;border-radius:10px;padding:6px 12px;font-family:ui-monospace,Menlo,monospace;font-size:13.5px;color:#1A1A1A}

/* 2 October, her yes: the Glossary's rename box, also on Questions and the three AI pages */
.norename.nr2{display:flex;gap:14px;align-items:flex-start;background:#F7EEFB;border:1.5px solid #E6D6EF;border-radius:18px;padding:16px 18px;margin:14px 0 0}
.nr2 .nrw{width:48px;height:42px;flex:none}
.nr2 .nrh{font-size:15.5px;font-weight:800;color:#1A1A1A;line-height:1.45;margin:0 0 10px !important;max-width:none}
.nr2 .nrl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.nr2 .nrl li{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid #E6D6EF;border-radius:999px;padding:4px 12px 4px 9px;font-size:14px;color:#4A4742;line-height:1.3}
.nr2 .fi2{width:15px;height:11px;border-radius:2px;background:#E4DED2;border:1.3px solid #8F8B84;flex:none}
.nr2 .dc2{width:10px;height:12px;border-radius:2px;background:#fff;border:1.3px solid #8F8B84;flex:none}
@media (max-width:620px){.norename.nr2{flex-direction:column;gap:6px}}

/* 2 October, her word: the name in the AI pages' headings in the front page's colours */
.lpn{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}

/* 4 October, her words: the headings in Comfortaa and plum, lighting up once as they come into view, as on Questions */
h2 .ht{font-family:'Comfortaa',sans-serif;font-weight:700;color:#8E3FA8}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
h2 .ht{display:inline-block;max-width:100%;background:linear-gradient(100deg,#8E3FA8 0%,#8E3FA8 34%,#3B6CF6 42%,#C43CD8 50%,#F2811D 58%,#8E3FA8 66%,#8E3FA8 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
h2 .ht.glow{animation:htglow 1.6s ease-in-out .15s both}
@keyframes htglow{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){h2 .ht.glow{animation:none}}
}