:root{
    --ink:#13120F; --paper-dim:#E7E0D2;
    --brass:#B8873B; --brass-soft:#8F6B30; --sage:#6F8F79;
    --cream:#EFE8D9; --cream-dim:#B9B1A0; --line:#33312A; --red:#B65C3F;
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--ink); color:var(--cream);
    font-family:"Instrument Sans",sans-serif; font-size:17px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  .wrap{max-width:720px; margin:0 auto; padding:0 28px;}
  .wrap-wide{max-width:920px; margin:0 auto; padding:0 28px;}
  h1,h2,h3{font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-0.025em; margin:0;}
  a{color:inherit;}
  ::selection{background:var(--brass); color:var(--ink);}

  .mark{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 28px; max-width:920px; margin:0 auto;
  }
  .mark .name{font-family:"Instrument Sans",sans-serif; font-size:19px; font-weight:500; letter-spacing:-0.01em;}
  .mark .name span{color:var(--brass);}
  .mark .tag{font-size:13px; color:var(--cream-dim);}

  .hero{padding:64px 0 40px; text-align:center;}
  .hero h1{font-size:clamp(30px,5.6vw,52px); line-height:1.12; max-width:16ch; margin:0 auto; font-weight:600; letter-spacing:-0.035em;}
  .hero h1 em{font-style:italic; color:var(--brass); font-weight:600;}
  .hero p{max-width:46ch; margin:26px auto 0; color:var(--cream-dim); font-size:17px; line-height:1.6;}
  .cta{
    display:inline-flex; align-items:center; gap:10px; margin-top:34px;
    background:var(--brass); color:#181410; font-family:"Instrument Sans",sans-serif;
    font-weight:600; font-size:15.5px; padding:14px 26px; border-radius:3px;
    text-decoration:none; border:none; cursor:pointer;
    transition:transform .18s ease, background .18s ease;
  }
  .cta:hover{background:#C6963F; transform:translateY(-1px);}
  .cta.ghost{background:transparent; color:var(--cream); border:1px solid var(--line);}
  .cta.ghost:hover{border-color:var(--brass); background:transparent;}

  .jobs{padding:30px 0 70px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .job{display:grid; grid-template-columns:34px 1fr; gap:16px; padding:20px 0;}
  .job + .job{border-top:1px solid var(--line);}
  .job .n{font-family:"Instrument Sans",sans-serif; font-size:20px; color:var(--brass); font-style:italic;}
  .job h3{font-size:18px; font-weight:500; margin-bottom:4px; font-family:"Instrument Sans",sans-serif;}
  .job p{margin:0; color:var(--cream-dim); font-size:15.5px; max-width:56ch;}

  .demo{padding:76px 0 90px;}
  .demo .lede{text-align:center; margin-bottom:44px;}
  .demo .lede h2{font-size:clamp(24px,4vw,32px); max-width:20ch; margin:0 auto;}
  .demo .lede p{color:var(--cream-dim); margin-top:14px; font-size:15.5px;}

  /* ================= phone shell ================= */
  .phone{
    max-width:360px; margin:0 auto; background:#0B0B0B;
    border-radius:38px; padding:10px;
    box-shadow:0 50px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px #2a2a2a;
  }
  .phone-screen{border-radius:29px; overflow:hidden; display:flex; flex-direction:column; height:640px; position:relative;}

  /* iOS-style status bar */
  .ios-bar{
    background:#008069; color:#fff; font-family:"Instrument Sans",sans-serif; font-size:13px; font-weight:600;
    display:flex; justify-content:space-between; align-items:center; padding:8px 20px 2px;
  }
  .ios-bar .icons{display:flex; gap:5px; align-items:center;}

  /* WhatsApp header */
  .wa-header{
    background:#008069; color:#fff; display:flex; align-items:center; gap:11px;
    padding:6px 12px 12px;
  }
  .wa-back{font-size:20px; opacity:.9; line-height:1;}
  .wa-avatar{
    width:36px; height:36px; border-radius:50%; background:#0B4A3F; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
  }
  .wa-id{flex:1; min-width:0;}
  .wa-name{font-family:"Instrument Sans",sans-serif; font-size:15.5px; font-weight:600; line-height:1.2;}
  .wa-sub{font-size:12px; color:#D9F2EA; opacity:.85;}
  .wa-icons{display:flex; gap:16px; font-size:16px; opacity:.95;}

  /* chat wallpaper — original abstract doodle, not WhatsApp's actual asset */
  .wa-chat{
    flex:1; overflow-y:auto; padding:14px 10px 8px;
    background-color:#E9E3D6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(0,0,0,.035) 0 2px, transparent 2px),
      radial-gradient(circle at 82% 34%, rgba(0,0,0,.035) 0 2px, transparent 2px),
      radial-gradient(circle at 34% 62%, rgba(0,0,0,.03) 0 2px, transparent 2px),
      radial-gradient(circle at 68% 82%, rgba(0,0,0,.03) 0 2px, transparent 2px),
      radial-gradient(circle at 8% 88%, rgba(0,0,0,.03) 0 2px, transparent 2px),
      radial-gradient(circle at 92% 8%, rgba(0,0,0,.03) 0 2px, transparent 2px);
    background-size:140px 140px;
    display:flex; flex-direction:column; gap:3px;
  }
  .wa-chat::-webkit-scrollbar{width:0;}

  .row{display:flex; width:100%;}
  .row.in{justify-content:flex-start;}
  .row.out{justify-content:flex-end;}

  .bubble{
    max-width:82%; padding:7px 9px 6px 10px; border-radius:8px; font-size:14.5px; line-height:1.4;
    position:relative; box-shadow:0 1px 0.5px rgba(0,0,0,.1); margin:2px 6px;
  }
  .bubble.in{background:#fff; color:#111; border-top-left-radius:2px;}
  .bubble.out{background:#D9FDD3; color:#111; border-top-right-radius:2px;}
  .bubble .txt{white-space:pre-wrap; padding-right:44px;}
  .bubble .meta{
    position:absolute; right:8px; bottom:5px; font-size:10.5px; color:#00000066;
    display:flex; align-items:center; gap:3px; white-space:nowrap;
  }
  .bubble.out .meta .tick{color:#53BDEB;}

  .typing-row{display:flex; justify-content:flex-start; margin:2px 6px;}
  .typing-bubble{
    background:#fff; border-radius:8px; border-top-left-radius:2px; padding:10px 12px;
    display:flex; gap:4px; box-shadow:0 1px 0.5px rgba(0,0,0,.1);
  }
  .typing-bubble i{width:6px; height:6px; border-radius:50%; background:#9AA0A6; display:block; animation:bounce 1.1s infinite;}
  .typing-bubble i:nth-child(2){animation-delay:.15s;}
  .typing-bubble i:nth-child(3){animation-delay:.3s;}
  @keyframes bounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

  /* quick-reply buttons, WhatsApp business style */
  .wa-buttons{margin:2px 6px 6px; max-width:82%; align-self:flex-start;}
  .wa-btn{
    display:block; width:100%; text-align:center; background:#fff; color:#00A5F4;
    border:none; border-top:1px solid #ECECEC; padding:11px 10px; font-family:"Instrument Sans",sans-serif;
    font-size:14px; font-weight:600; cursor:pointer;
  }
  .wa-btn:first-child{border-top:none; border-radius:0;}
  .wa-buttons-wrap{background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 0.5px rgba(0,0,0,.1); margin:2px 6px;}
  .wa-buttons-wrap .cap{padding:10px 12px 9px; font-size:14.5px; color:#111; border-bottom:1px solid #F1F1F1;}
  .wa-btn:hover{background:#F5FAFF;}
  .wa-btn:disabled{color:#B8B8B8; cursor:default;}
  .wa-btn:disabled:hover{background:#fff;}

  /* compose bar */
  .wa-compose{
    background:#F0F0F0; display:flex; align-items:center; gap:8px; padding:8px 10px;
    border-top:1px solid #00000010;
  }
  .wa-compose .field{
    flex:1; background:#fff; border-radius:20px; padding:9px 14px; display:flex; align-items:center; gap:8px;
    font-size:14px; color:#8b8b8b;
  }
  .wa-compose .field input{
    border:none; outline:none; flex:1; font-family:"Instrument Sans",sans-serif; font-size:14px; color:#111; background:transparent;
  }
  .wa-compose .field input::placeholder{color:#9a9a9a;}
  .wa-compose .emoji{font-size:17px; opacity:.7;}
  .wa-compose .send{
    width:34px; height:34px; border-radius:50%; background:#008069; border:none; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; flex-shrink:0;
  }
  .wa-compose .send:disabled{background:#B7CFC7; cursor:default;}
  .wa-compose.locked .field{opacity:.55;}

  .close{padding:20px 0 100px; text-align:center; border-top:1px solid var(--line);}
  .close h2{font-size:clamp(26px,4.6vw,38px); max-width:16ch; margin:60px auto 0; line-height:1.22;}
  .close p{color:var(--cream-dim); max-width:40ch; margin:20px auto 0; font-size:15.5px;}

  footer{padding:26px 28px 40px; text-align:center; font-size:12.5px; color:var(--cream-dim); border-top:1px solid var(--line);}
  footer a{text-decoration:underline; text-underline-offset:2px;}

  @media (max-width:520px){
    .phone{max-width:100%; border-radius:0; padding:0;}
    .phone-screen{height:78vh; min-height:520px; border-radius:0;}
    .hero{padding:48px 0 32px;}
  }

  /* link-preview card (Instinct/WhatsApp style) */
  .card{background:#fff; border-radius:8px; border-top-left-radius:2px; overflow:hidden; box-shadow:0 1px .5px rgba(0,0,0,.1); margin:2px 6px; max-width:82%;}
  .card .prev{display:flex; gap:10px; background:#F3F4F1; padding:10px;}
  .card .logo{width:46px; height:46px; border-radius:6px; background:#13120F; color:#B8873B; display:flex; align-items:center; justify-content:center; font-family:"Instrument Sans",sans-serif; font-size:24px; flex-shrink:0;}
  .card .pt{font-weight:600; font-size:13.5px; color:#111; line-height:1.25;}
  .card .ps{font-size:12px; color:#667; margin-top:2px; line-height:1.3;}
  .card .pd{font-size:11.5px; color:#8a8f98; margin-top:4px;}
  .card .body{padding:8px 10px 6px; font-size:14.5px; color:#111; line-height:1.4; position:relative;}
  .card .body .meta{position:static; display:block; text-align:right; font-size:10.5px; color:#00000066; margin-top:2px;}
  .card .go{display:block; width:100%; border:none; border-top:1px solid #ECECEC; background:#fff; color:#00A5F4; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:14px; padding:10px; cursor:pointer;}
  .card .go:disabled{color:#B8B8B8; cursor:default;}
  /* reactions on the owner's messages */
  .row.out{position:relative; flex-direction:column; align-items:flex-end;}
  .react{margin:-6px 12px 6px 0; background:#fff; border-radius:12px; padding:1px 6px; font-size:13px; box-shadow:0 1px 2px rgba(0,0,0,.15); align-self:flex-end;}
  .sys{align-self:center; background:#FFF6D6; color:#6B5A1E; font-size:12px; padding:5px 10px; border-radius:7px; margin:6px 0; text-align:center; max-width:86%;}

  /* ---------------- sign-in (after Instinct: phone = account, code on WhatsApp) ---------------- */
  .si-back{position:fixed; inset:0; z-index:100; background:rgba(19,18,15,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center; padding:20px;}
  .si-back.open{display:flex;}
  .si{color-scheme:light; background:#FBF8F2; color:#16140F; width:100%; max-width:440px; border-radius:14px; padding:44px 40px 36px; position:relative;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.6);}
  .si-x{position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px; color:#8A8271; cursor:pointer; line-height:1;}
  .si h3{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:32px; letter-spacing:-.02em; margin:0 0 10px; line-height:1.1;}
  .si p.sub{color:#6B6455; font-size:15.5px; margin:0 0 26px; line-height:1.5;}
  .si-field{display:flex; align-items:center; border:1px solid #CFC7B6; border-radius:8px; background:#fff; overflow:hidden;}
  .si-field:focus-within{border-color:#16140F; box-shadow:0 0 0 3px rgba(184,135,59,.18);}
  .si-field select{border:none; background:transparent; font-family:"Instrument Sans",sans-serif; font-size:15px; padding:14px 6px 14px 12px; color:#16140F; cursor:pointer; outline:none;}
  .si-field .div{width:1px; align-self:stretch; background:#E4DDCB; margin:10px 0;}
  .si-field input{flex:1; border:none; outline:none; font-family:"Instrument Sans",sans-serif; font-size:17px; padding:14px 14px; color:#16140F; background:transparent; min-width:0; letter-spacing:.01em;}
  .si-field input::placeholder{color:#B5AE9E;}
  .si input, .si select, .si textarea{color-scheme:light; background:#fff; color:#16140F;}
  .si input::placeholder{color:#A9A294;}
  .si-err{color:#B65C3F; font-size:13px; min-height:18px; margin:8px 2px 0;}
  .si-legal{font-size:12.5px; color:#8A8271; line-height:1.55; margin:6px 0 22px;}
  .si-legal a{color:#6B6455;}
  .si-go{width:100%; background:#16140F; color:#FBF8F2; border:none; border-radius:10px; padding:14px; font-family:"Instrument Sans",sans-serif;
    font-weight:600; font-size:15.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;}
  .si-go:disabled{opacity:.45; cursor:default;}
  .si-otp{display:flex; gap:8px; margin:4px 0 6px;}
  .si-otp input{width:100%; aspect-ratio:5/6; max-width:56px; text-align:center; font-family:"Instrument Sans",sans-serif; font-size:22px; font-weight:600;
    border:1px solid #CFC7B6; border-radius:8px; background:#fff; color:#16140F; outline:none;}
  .si-otp input:focus{border-color:#16140F; box-shadow:0 0 0 3px rgba(184,135,59,.18);}
  .si-demo{font-size:12px; color:#8F6B30; background:#F4EAD6; display:inline-block; padding:3px 8px; border-radius:5px; margin:6px 0 18px;}
  .si-help{font-size:13.5px; color:#6B6455; line-height:1.7;}
  .si-help button{background:none; border:none; padding:0; font:inherit; color:#16140F; text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
  .si-help button:disabled{color:#B5AE9E; cursor:default;}
  .si-ok{width:44px; height:44px; border-radius:50%; background:#E7EFE8; color:#3E5346; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px;}
  .si-note{font-size:12.5px; color:#8A8271; margin-top:14px; text-align:center;}
  @media (max-width:520px){ .si{padding:36px 20px calc(24px + env(safe-area-inset-bottom,0px));} .si h3{font-size:26px;} .si-otp{gap:6px;} }

  /* ---------------- connections page ---------------- */
  .si.wide{max-width:860px; padding:0; display:flex; flex-direction:column; max-height:min(94vh,1000px);}
  .cx-head{padding:26px 34px 10px;}
  .cx-head h3{margin-bottom:6px; font-size:26px;}
  .cx-head .sub{font-size:14.5px; line-height:1.45;}
  .cx-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 34px 16px; flex:1 1 auto; min-height:0;}
  .cx-sec{margin:16px 0 7px; align-items:baseline; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8A8271; display:flex; justify-content:space-between; gap:10px;}
  .cx-sec em{font-style:normal; text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px; color:#A39B89; text-align:right;}
  .cx-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:9px; align-items:start;}
  .cx{border:1px solid #E4DDCB; border-radius:10px; background:#fff; padding:12px; display:flex; gap:11px; align-items:flex-start;}
  .cx.on{border-color:#6F8F79; background:#F3F8F4;}
  .cx.soon{opacity:.65; padding:9px 12px; align-items:center; background:#FAF7F0;}
  .cx.soon .ds, .cx.soon .pv{display:none;}
  .cx.soon .mono{width:28px; height:28px; font-size:11px; border-radius:7px; background:#B5AE9E;}
  .cx.soon .nm{font-size:13.5px; font-weight:500; color:#6B6455;}
  .cx.soon .act{margin-top:0;}
  .cx .mono{width:38px; height:38px; flex-shrink:0; border-radius:9px; background:#16140F; color:#FBF8F2; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; letter-spacing:.02em;}
  .cx.on .mono{background:#3E5346;}
  .cx .main{flex:1; min-width:0;}
  .cx .nm{font-weight:600; color:#16140F; font-size:15px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .cx .tag{font-size:10.5px; font-weight:600; color:#8F6B30; background:#F4EAD6; padding:1px 6px; border-radius:4px;}
  .cx .ds{font-size:12.5px; color:#6B6455; line-height:1.4; margin:2px 0 0;}
  .cx .pv{font-size:11.5px; color:#9A9384; line-height:1.35; margin:3px 0 0;}
  .cx .act{margin-top:9px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .cx .btn{background:#16140F; color:#FBF8F2; border:none; border-radius:7px; padding:7px 14px; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:13px; cursor:pointer;}
  .cx .btn:disabled{opacity:.5; cursor:default;}
  .cx .ok{color:#3E5346; font-weight:600; font-size:13px;}
  .cx .undo{background:none; border:none; color:#8A8271; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:0; font-family:inherit;}
  .cx-foot{border-top:1px solid #E4DDCB; padding:12px 34px 16px; background:#FBF8F2; border-radius:0 0 14px 14px; box-shadow:0 -10px 16px -14px rgba(0,0,0,.25);}
  .cx-meter{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; color:#16140F;}
  .cx-meter b{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:18px;}
  .cx-bar{height:5px; background:#E9E2D2; border-radius:4px; margin:7px 0 9px; overflow:hidden;}
  .cx-bar i{display:block; height:100%; width:0; background:#B8873B; border-radius:4px; transition:width .35s ease;}
  /* one horizontal row: the full list cost six lines of the panel */
  .cx-caps{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; margin:0 0 10px; padding-bottom:2px; scrollbar-width:none; -ms-overflow-style:none; -webkit-mask-image:linear-gradient(to right,#000 90%,transparent);}
  .cx-caps::-webkit-scrollbar{display:none;}
  .cx-caps span{font-size:11.5px; padding:3px 8px; border-radius:20px; border:1px solid #E4DDCB; color:#A39B89; background:#fff; white-space:nowrap; flex:0 0 auto;}
  .cx-caps span.y{border-color:#6F8F79; color:#3E5346; background:#F3F8F4;}
  .cx-note{font-size:12px; color:#8A8271; margin:7px 0 0; text-align:center;}
  .qr{display:flex; justify-content:center; margin:6px 0 16px;}
  .qr > div, .qr canvas, .qr img{border:10px solid #fff; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.12);}
  @media (max-width:620px){
    .cx-grid{grid-template-columns:1fr;}
    .cx-head{padding:28px 20px 12px;}
    .cx-body{padding:0 20px 16px; overflow:visible; flex:0 0 auto; min-height:auto;}
    .cx-foot{padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px)); position:sticky; bottom:0;}
    /* Scroll the sheet itself: an inner scroll pane is unreliable on phones. */
    .si-back{padding:0; align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch;}
    .si{border-radius:0; min-height:100dvh;}
    .si.wide{max-width:100%; max-height:none; height:auto; min-height:100dvh; border-radius:0;}
    .cx .act{flex-wrap:wrap;}
    .cx-key, .cx-in{min-width:0; width:100%;}
  }

  /* ---------------- "Your AI" cards + key input ---------------- */
  .cx-key{flex:1; min-width:0; border:1px solid #CFC7B6; border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
  .cx-ai{font-size:12px; color:#8A8271; margin:-2px 0 9px;}
  .cx-ai b{color:#16140F; font-weight:600;}

  /* ---------------- Meta's WhatsApp sign-up (preview of the real steps) ---------------- */
  .meta{max-width:420px; margin:0 auto;}
  .meta-bar{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#65676B; border-bottom:1px solid #E4E6EB; padding:0 0 12px; margin:0 0 18px;}
  .meta-bar .m{width:22px; height:22px; border-radius:6px; background:#0866FF; color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center;}
  .meta h4{font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px; color:#1C1E21;}
  .meta p{font-size:14px; color:#65676B; margin:0 0 16px; line-height:1.45;}
  .meta label.opt{display:flex; gap:10px; align-items:flex-start; border:1px solid #E4E6EB; border-radius:8px; padding:12px; margin:0 0 8px; cursor:pointer; font-size:14px; color:#1C1E21; line-height:1.4;}
  .meta label.opt small{display:block; color:#65676B; font-size:12.5px; margin-top:2px;}
  .meta .row2{display:flex; gap:8px; margin:0 0 6px;}
  .meta select,.meta input[type=tel],.meta input[type=text]{border:1px solid #CCD0D5; border-radius:6px; padding:10px; font:inherit; font-size:15px; background:#fff;}
  .meta input[type=tel]{flex:1; min-width:0;}
  .meta .go{width:100%; background:#0866FF; color:#fff; border:none; border-radius:6px; padding:11px; font:inherit; font-weight:600; font-size:15px; cursor:pointer; margin-top:10px;}
  .meta .go:disabled{opacity:.5; cursor:default;}
  .meta .back{background:none; border:none; color:#65676B; font:inherit; font-size:13.5px; cursor:pointer; margin-top:10px; padding:0;}
  .meta .steps{display:flex; gap:4px; margin:0 0 16px;} .meta .steps i{flex:1; height:3px; border-radius:2px; background:#E4E6EB; display:block;} .meta .steps i.on{background:#0866FF;}
  .meta .phone-hint{display:flex; gap:12px; align-items:center; background:#F0F2F5; border-radius:8px; padding:12px; font-size:13.5px; color:#1C1E21; margin:0 0 12px;}
  .meta .qr{margin:4px 0 8px;}
  .meta-note{font-size:11.5px; color:#8A8271; text-align:center; margin:16px 0 0;}

  /* ---------------- connect page: a normal page section, not a small popup ---------------- */
  /* Ten cards need room; the page already knows how to scroll, so let it. */
  .connect-page{display:none; background:var(--ink); padding:56px 20px 96px;}
  .connect-page:not([hidden]){display:block;}
  .connect-card{position:relative; max-width:880px; margin:0 auto; background:#FBF8F2; color:#16140F;
    border-radius:16px; box-shadow:0 40px 90px -30px rgba(0,0,0,.55);}
  .connect-card .si-x{position:absolute; top:16px; right:18px;}
  /* Override the old modal sizing: no fixed height, no inner scroll pane — just flow with the page. */
  .connect-card .cx-head{padding:34px 40px 14px;}
  .connect-card .cx-body{padding:0 40px 8px; overflow:visible; max-height:none; flex:none; min-height:0;}
  .connect-card .cx-foot{padding:16px 40px 28px; position:static; border-radius:0 0 16px 16px;}
  @media (max-width:620px){
    .connect-page{padding:0;}
    .connect-card{border-radius:0; box-shadow:none;}
    .connect-card .cx-head{padding:26px 20px 10px;}
    .connect-card .cx-body{padding:0 20px 8px;}
    .connect-card .cx-foot{padding:14px 20px calc(22px + env(safe-area-inset-bottom,0px)); position:static;}
  }