/* together.css: the Together page (shared-sessions.html) only, on the Signal
   foundation (signal-site.css: tokens, type, .sg-wrap / .sg-eyebrow /
   .sg-btn). The page is `body.sg-page`; the study's #/together is the design
   (journeys.css, landing.css, styles.css). Neutral grounds and text; violet
   only as a small accent (eyebrow dots, the selected step, focus rings, text
   links). The guide section (perm rows, fact cards, questions, the closing
   call to action) is styled here too, so the page loads no older sheet.
   Every rule is scoped to .tg-page or a together-/tg- class. */

.tg-page { --art-ground: var(--paper); display: block; }
.tg-page code { padding: 1px 5px; border-radius: 5px; background: var(--soft); color: var(--ink); font-size: .88em; }

/* One label style on the page (the study's .eyebrow): the hero, the room
   journey (.sg-eyebrow), the guide's section labels and the FAQ label. */
.tg-page .section-eyebrow,
.tg-page .page-faqs .eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font: 650 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.tg-page .section-eyebrow::before,
.tg-page .page-faqs .eyebrow::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

/* ── Hero beside the art (the study's .table-hero) ───────────────────── */
.together-hero { padding: 8px 0 0; }
.together-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px; align-items: center; }
.together-hero-lead { max-width: 620px; padding: 70px 0 46px; }
.together-hero h1 { margin: 0 0 22px; font-size: clamp(42px, 5vw, 68px); }
.tg-page .together-hero-line { max-width: 34em; margin: 0 0 26px; font-size: 18px; }
.together-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.tg-page .together-hero-fine { max-width: 46em; margin: 18px 0 0; font-size: 13px; line-height: 1.6; }

/* The threads band: the GlyphArt scene in the hero's second column. */
.together-band { margin: 0; padding: 34px 0 18px; }
.together-band-art { position: relative; overflow: hidden; height: clamp(380px, 40vw, 580px); touch-action: pan-y; }
.together-band-art .glyph-art-poster { object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 55%, transparent 100%); }
.together-band-art.art-fade > canvas {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 11%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 11%, #000 84%, transparent);
  mask-composite: intersect;
}
.together-band-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.together-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); }
.together-key i { width: 9px; height: 9px; border-radius: 50%; }
.together-key i:last-of-type { margin-right: 6px; }
.together-key .k1 { background: #6fc7c0; } .together-key .k2 { background: #e38b7a; }
.together-key .k3 { background: #e9c46a; } .together-key .k4 { background: #aa94ff; }
.together-band-foot small { font-size: 11px; color: var(--muted); }

/* ── One room. A shared starting point. (the study's .feature-split) ──── */
.tg-split { padding: 40px 0 75px; }
.tg-split-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 65px; align-items: center; }
.tg-split h2 { margin: 0 0 22px; font-size: clamp(30px, 3.6vw, 50px); }
.tg-split-copy p { max-width: 460px; margin: 0 0 14px; font-size: 15px; }
.tg-page .tg-small { font-size: 13px; }

/* The study's .people-scene around its .room-tile, on neutral grounds. */
.tg-scene { padding: 30px; border-radius: 22px; background: var(--soft); transform: rotate(1.5deg); }
.tg-tile { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.tg-badge { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px; font-size: 11px; font-weight: 550; color: var(--ink); }
.tg-tile h3 { margin: 17px 0 6px; font-size: 19px; }
.tg-page .tg-tile > p { margin: 0; font-size: 13px; }
.tg-tile-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.tg-tile-foot a { color: var(--violet); font-weight: 550; font-size: 14px; text-decoration: none; }
.tg-tile-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tg-members { display: inline-flex; align-items: center; gap: 8px; }

.tg-face { display: inline-grid; place-items: center; flex: none; width: 29px; height: 29px; border-radius: 50%; border: 2px solid var(--surface); font: 650 10px/1 var(--sans); }
.tg-face-a { background: #ddd7ef; color: #4b4169; }
.tg-face-b { background: #dce5d5; color: #41533a; }
.tg-face-c { background: #e8d9ca; color: #78523d; }
.tg-face-ergod { background: none; border-color: transparent; }
.tg-face-ergod img { width: 26px; height: 26px; object-fit: contain; display: block; }
.tg-faces { display: flex; }
.tg-faces .tg-face + .tg-face { margin-left: -7px; }

/* The room's plan: a light file, neutral paper. */
.tg-plan { margin-top: 20px; padding: 27px 30px; border: 1px solid #d6d4cf; background: #f1f0ec; color: #2b2b31; box-shadow: 0 20px 42px #0000002a; }
.tg-plan-head, .tg-plan-foot { display: flex; justify-content: space-between; gap: 20px; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: #5f5e66; }
.tg-plan-head { padding-bottom: 15px; border-bottom: 1px solid #cfcdc7; }
.tg-plan-title { margin: 23px 0; }
.tg-plan-title small, .tg-plan-result > span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5f5e66; }
.tg-plan-title h4 { margin: 9px 0; font: 600 clamp(25px, 2.2vw, 35px)/1.05 var(--display); letter-spacing: -.055em; color: #2b2b31; }
.tg-page .tg-plan-title p { margin: 0; font-size: 12px; color: #5f5e66; }
.tg-plan-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tg-plan-parts > div { display: flex; flex-direction: column; gap: 10px; min-height: 87px; padding: 12px; border: 1px solid #cfcdc7; font-size: 11px; line-height: 1.35; }
.tg-plan-parts b { font-size: 10px; color: #4d4c57; }
.tg-plan-result { display: grid; gap: 5px; margin: 18px 0 15px; padding: 15px 18px; background: #2a2b30; color: #f3f2ee; }
.tg-plan-result > span { color: #bdbcc4; }
.tg-plan-result strong { font-size: 16px; font-weight: 600; }
.tg-plan-result small { color: #d6d5dc; }

/* ── Three ways (the study's .feature-list) ──────────────────────────── */
.together-ways { padding: 0 0 65px; }
.together-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.together-card { display: flex; flex-direction: column; min-width: 0; padding-top: 25px; border-top: 1px solid var(--line); }
.together-card h3 { margin: 0 0 12px; font-size: 20px; }
.tg-page .together-card p { flex: 1; margin: 0 0 18px; font-size: 14px; }
.tg-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tg-links a { color: var(--violet); font-size: 14px; font-weight: 550; text-decoration: none; }
.tg-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── A room makes a plan (the study's .journey) ──────────────────────── */
.tg-journey { padding: 92px 0; border-top: 1px solid var(--line); }
.tg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; }
.tg-head h2 { max-width: 620px; margin: 0; font-size: clamp(30px, 3.6vw, 50px); }
.tg-page .tg-head > p { max-width: 350px; margin: 0 0 4px; }
.tg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.tg-step { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); font: 500 13px/1.3 var(--sans); text-align: left; cursor: pointer; }
.tg-step span { font-size: 10px; font-weight: 650; color: var(--violet); }
.tg-step:hover { color: var(--ink); }
.tg-step[aria-pressed="true"] { background: var(--surface); border-color: var(--ink); color: var(--ink); }

.tg-window { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tg-window-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 22px; border-bottom: 1px solid var(--line); font-size: 12px; }
.tg-window-bar span:last-child { font-size: 11px; color: var(--muted); }
.tg-window-bar b { margin-left: 8px; font-weight: 400; }
.tg-window-grid { display: grid; grid-template-columns: 1fr 1.12fr; min-height: 420px; }
.tg-chat { min-width: 0; padding: 28px; }
.tg-msg { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.tg-msg .tg-face { width: 26px; height: 26px; border: 0; font-size: 9px; }
.tg-msg strong { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 550; }
.tg-msg strong small { padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; font-size: 9px; font-weight: 400; color: var(--muted); }
.tg-page .tg-msg p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink); }
.tg-file { display: flex; align-items: center; gap: 13px; margin: 0 0 20px 38px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; }
.tg-file span { flex: 1; }
.tg-file small { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); }
.tg-file i { font-style: normal; color: var(--green); }
.tg-result { display: flex; flex-direction: column; min-width: 0; padding: 20px 25px 16px; border-left: 1px solid var(--line); background: var(--soft); }
.tg-result-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 10px; color: var(--muted); }
.tg-notes { display: grid; gap: 10px; }
.tg-page .tg-notes > p { margin: 0 0 4px; font-size: 13px; }
.tg-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.tg-note small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tg-note strong { font-size: 13px; font-weight: 550; }
.tg-doc { padding: 22px 25px; border: 1px solid #d6d4cf; border-radius: 8px; background: #f1f0ec; color: #2b2b31; }
.tg-doc-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 9px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #5f5e66; }
.tg-doc-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7b72c9; }
.tg-page .tg-doc h3 { margin: 0 0 8px; font: 400 28px/1.15 var(--serif); letter-spacing: -.02em; color: #2b2b31; }
.tg-page .tg-doc > p { margin: 0 0 14px; font-size: 12px; color: #5f5e66; }
.tg-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 6px; border-top: 1px solid #d6d4cf; font-size: 13px; transition: background .4s; }
.tg-row span { font-size: 11px; color: #6a6972; }
.tg-row strong { font-weight: 600; }
.tg-row small { font-size: 10px; color: #6a6972; }
.tg-row.is-changed { background: linear-gradient(90deg, #e3e0f3, transparent); }
.tg-row.is-changed small { color: #4d45a8; font-weight: 650; }
.tg-row.is-pending small { color: #8a4f12; font-weight: 650; }
.tg-programme { display: grid; gap: 5px; padding: 10px 6px 0; border-top: 1px solid #d6d4cf; }
.tg-programme span { display: flex; gap: 12px; font-size: 12px; }
.tg-programme b { width: 40px; font-weight: 600; }
.tg-programme .is-changed b { color: #4d45a8; }
.tg-next { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 16px; }
.tg-caption { display: flex; justify-content: space-between; gap: 25px; margin-top: 18px; font-size: 11px; color: var(--muted); }

/* ── The guide: one content edge, the study's section rhythm ───────────
   The guide keeps its long-form class names (install-section, perm-list,
   fact-grid, page-faqs), which other pages share; here they are styled for
   this page alone, on the foundation's tokens. */
.tg-page .install-container { width: min(var(--wrap-max), calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.tg-page .install-section { padding: 92px 0; border-top: 1px solid var(--line); }
.tg-page .install-section h2 { max-width: 820px; margin: 0 0 20px; font-size: clamp(30px, 3.6vw, 50px); }
.tg-page .install-section h2 em { font-style: normal; }
.tg-page .install-section > p { max-width: 68ch; margin: 0 0 22px; font-size: 15px; line-height: 1.7; }
.tg-page .install-section p a,
.tg-page .perm-row a,
.tg-page .fact-card a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.tg-page .together-guide .shared-hero-intro { max-width: 44em; font-size: 18px; line-height: 1.6; color: var(--muted); }
.tg-page .shared-hero-jumps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 720px; margin: 26px 0 18px; }
.tg-page .shared-hero-jumps a { display: flex; flex-direction: column; justify-content: space-between; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 550 13px/1.25 var(--sans); text-decoration: none; }
.tg-page .shared-hero-jumps a span:first-child { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.tg-page .shared-hero-jumps a span:last-child { align-self: flex-end; color: var(--muted); font-size: 16px; line-height: 1; }
.tg-page .shared-hero-jumps a:hover { background: var(--soft); border-color: #4a4b51; }
.tg-page .shared-hero-related { max-width: 68ch; font-size: 13px; color: var(--muted); }
.tg-page .perm-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.tg-page .perm-row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tg-page .perm-row:last-child { border-bottom: 0; }
.tg-page .perm-row strong { font-weight: 600; color: var(--ink); }
.tg-page .perm-row span { line-height: 1.6; color: var(--muted); }
.tg-page .fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tg-page .fact-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.tg-page .fact-card .label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tg-page .fact-card .label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.tg-page .fact-card h4 { margin: 0 0 6px; font: 600 18px/1.2 var(--display); letter-spacing: -.03em; color: var(--ink); }
.tg-page .fact-card p { margin: 0; font-size: 14px; line-height: 1.6; }
#guide, #who-pays { scroll-margin-top: 24px; }
.tg-page .page-faqs .sec-head h2 { margin-bottom: 32px; }
.tg-page .page-faqs .faq-list { max-width: 820px; margin: 0; }
.tg-page .page-faqs .faq-entry { padding: 26px 0; border-bottom: 1px solid var(--line); }
.tg-page .page-faqs .faq-entry:first-child { padding-top: 0; }
.tg-page .page-faqs .faq-entry:last-child { border-bottom: 0; }
.tg-page .page-faqs .faq-entry h2 { max-width: none; margin: 0 0 10px; font-size: 20px; line-height: 1.3; letter-spacing: -.03em; }
.tg-page .page-faqs .faq-entry p { max-width: 70ch; margin: 0; line-height: 1.6; }
/* The closing call to action: the study's .cta-band, on a neutral surface. */
.tg-page .install-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; margin: 8px 0 96px; padding: 40px 44px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.tg-page .install-cta-text h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 38px); }
.tg-page .install-cta-text p { margin: 0; font-size: 15px; }
.tg-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
  .together-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .together-hero-lead { padding-bottom: 0; }
  .tg-split-grid { gap: 35px; }
  .tg-steps { grid-template-columns: repeat(2, 1fr); }
  .tg-window-grid { grid-template-columns: 1fr 1fr; }
  .tg-chat { padding: 22px; }
  .tg-result { padding: 18px; }
  .tg-file { margin-left: 0; }
  .tg-page .install-cta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .together-hero-lead { padding: 28px 0 0; }
  .together-hero h1 { font-size: 42px; }
  .together-hero .sg-eyebrow { margin-bottom: 18px; }
  .tg-page .together-hero-line { margin-bottom: 22px; font-size: 16px; }
  .together-hero-ctas { flex-direction: column; }
  .together-hero-ctas .sg-btn { width: 100%; }
  .tg-page .together-hero-fine { font-size: 12.5px; }
  .together-band { padding: 20px 0 8px; }
  .together-band-art { height: 300px; }
  .tg-split { padding: 40px 0 53px; }
  .tg-split-grid { grid-template-columns: 1fr; gap: 30px; }
  .tg-split h2, .tg-head h2 { font-size: 34px; }
  .tg-scene { padding: 20px; }
  .tg-tile { padding: 19px; }
  .tg-plan { padding: 18px; }
  .tg-plan-parts { grid-template-columns: 1fr; }
  .tg-plan-parts > div { flex-direction: row; align-items: center; min-height: 0; }
  .tg-plan-head, .tg-plan-foot { font-size: 8px; }
  .together-cards { grid-template-columns: 1fr; gap: 15px; }
  .together-ways { padding-bottom: 40px; }
  .tg-journey { padding: 53px 0; }
  .tg-head { display: block; margin-bottom: 27px; }
  .tg-page .tg-head > p { margin-top: 17px; font-size: 14px; }
  .tg-step { padding: 10px; font-size: 12px; }
  .tg-window-bar { padding: 14px 15px; font-size: 11px; gap: 10px; }
  .tg-window-bar b { display: none; }
  .tg-window-grid { grid-template-columns: 1fr; min-height: 0; }
  .tg-chat { padding: 22px 18px 8px; }
  .tg-file { margin-left: 38px; }
  .tg-result { padding: 18px; border-left: 0; border-top: 1px solid var(--line); }
  .tg-doc { padding: 18px; }
  .tg-row { grid-template-columns: 56px 1fr; }
  .tg-row small { grid-column: 2; }
  .tg-next { flex-wrap: wrap; }
  .tg-caption { flex-direction: column; gap: 6px; }
  .tg-page .install-section { padding: 53px 0; }
  .tg-page .install-section h2 { font-size: 32px; }
  .tg-page .together-guide .shared-hero-intro { font-size: 16px; }
  .tg-page .shared-hero-jumps { gap: 5px; }
  .tg-page .shared-hero-jumps a { min-height: 61px; padding: 8px; font-size: 11px; }
  .tg-page .perm-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .tg-page .fact-grid { grid-template-columns: 1fr; }
  .tg-page .fact-card { padding: 18px; }
  .tg-page .install-cta { margin-bottom: 64px; padding: 28px 20px; }
  .tg-page .install-cta .sg-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-row { transition: none; }
}