/* matched.css — 7 October 2026, her ask: the Connect pages on white, matched to the new pages (How to use it, Glossary, Questions, Gemini),
   and every page sharing the same headings and numbers. Loaded last, so it sits over draft.css, connect-platform.css and calm.css.
   The words and the layout stay; only the look changes. */

:root{--ink:#2B1F3A;--soft:#5E5852;--faint:#8A837C;--line:#EEECE8;--page:#FFFFFF;--cream:#F6F6F8}
html{scroll-behavior:smooth}
body{background:#FFFFFF;color:#2B1F3A}
a{color:#2B1F3A}a:hover{color:#7B4FE0}
b,strong{color:#2B1F3A}

/* page titles: Comfortaa, 44px, plum-black */
main h1{font-family:Comfortaa,sans-serif!important;font-weight:700!important;font-size:clamp(30px,4.4vw,44px)!important;line-height:1.2!important;letter-spacing:0;color:#2B1F3A}
.top .under1,.lede{color:#5E5852}

/* section headings: Comfortaa, 40px, plum-black, still */
main h2{font-family:Comfortaa,sans-serif!important;font-weight:700!important;font-size:clamp(24px,2.8vw,30px)!important;line-height:1.22!important;color:#2B1F3A}
/* her words, 7 October: "i want to keep the gradient that washes over it" — plum-black, the gradient passing once as each heading comes into view, as on Questions */
main h2 .ht{font-family:Comfortaa,sans-serif;font-weight:700;display:inline-block;max-width:100%;background:linear-gradient(100deg,#2B1F3A 0%,#2B1F3A 34%,#3B6CF6 42%,#C43CD8 50%,#F2811D 58%,#2B1F3A 66%,#2B1F3A 100%)!important;background-size:300% 100%!important;background-position:100% 0;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent}
main h2 .ht.glow{animation:mglow 1.6s ease-in-out .15s both!important}
@keyframes mglow{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){main h2 .ht.glow{animation:none!important;background-position:0 0}}

/* small headings: Comfortaa, 20px */
main h3:not(.tag){font-family:Comfortaa,sans-serif!important;font-weight:700!important;font-size:20px!important;line-height:1.3!important;color:#2B1F3A}

/* step numbers: the gradient circle with a white number */
.part h2 .n,.three-steps a span,.three-steps li:nth-child(n) a span,.cxn,#add h2 .n,#allow h2 .n,#first h2 .n,.mo h2 .n{
  width:28px!important;height:28px!important;min-width:28px;border-radius:50%!important;border:none!important;
  background:linear-gradient(135deg,#4F6BF5,#B84FD9 50%,#F07A2E)!important;color:#FFFFFF!important;
  display:inline-flex!important;align-items:center;justify-content:center;flex:none;
  font-family:Comfortaa,sans-serif!important;font-weight:700!important;font-size:13px!important;letter-spacing:0!important;line-height:1!important;vertical-align:middle}
.part h2 .n{margin-right:12px}

/* the top of the page lines up on the left, as on Gemini */
.top{text-align:left!important}
.top .crumb{margin:0 0 14px}
.top .under1{margin:0!important;max-width:none}
.top .hi{margin:0 0 8px!important}
.three-steps{justify-content:flex-start!important;margin-left:0!important;padding-left:0}

/* the step links at the top: soft lavender pills, as on Gemini */
.three-steps li:nth-child(n) a{background:#F4F0FA!important;border:none!important;box-shadow:none!important;color:#2B1F3A!important;font-weight:700}

/* sketches of the AI's screens and cards: the new look's lines */
.sk,.card,.pic{border-color:#EEECE8!important}
.wtabs{background:#F6F6F8}

/* the rows that open, as on Questions */
.drawer{background:#FFFFFF;border:1px solid #EEECE8!important;border-radius:16px;overflow:hidden}
.drawer summary:after{color:#B84FD9!important}
.drawer .dt{font-family:Comfortaa,sans-serif;font-weight:700;color:#2B1F3A}
.drawer .din{border-top:none!important}
.drawer .din p,.drawer .din li{color:#5E5852}

footer{color:#6F6862;font-size:13px;border-top:1px solid #EEECE8;padding:28px 20px!important;margin-top:72px}

/* the STEP labels: one small lavender chip on every page */
.step .say .k,.say .k,span.k{display:inline-block;padding:3px 10px;border-radius:999px;background:#F4F0FA!important;border:none!important;color:#8E3FA8!important;font-family:Nunito,sans-serif;font-size:12px!important;font-weight:800!important;letter-spacing:.06em;line-height:1.5}

/* her words, 7 October: "this beige is too dark" — the beige boxes and fills take the new look's soft wash and light grey */
.golink:not(.guide),.aside2{background:linear-gradient(135deg,#F6F7FF 0%,#FBF6FD 50%,#FEF7F2 100%)!important}
.three,.wtabs{background:#F6F6F8!important}
.pic.seats,.sk .glow,.pill,code.cl{background:#FFFFFF!important}
.perm .pr{border-bottom-color:#EEECE8!important}
.pill,code.cl{border-color:#EEECE8!important}