/* ==========================================================================
   Contact page — "warm paper" v2 redesign.
   Scoped under body.ct so it can't leak into other pages. Same token palette
   as cheatsheets-v2.css / interview-questions-v2.css.
   ========================================================================== */

.ct {
   --paper:    #E9E8E3;
   --paper2:   #DFDDD7;
   --card:     #F8F7F4;
   --cardEdge: #D6D4CD;
   --rule:     #D6D4CD;
   --rule2:    #C9C7C0;
   --divider:  #DFDDD7;

   --ink:      #232320;
   --ink2:     #45443E;
   --ink3:     #67665F;
   --ink4:     #94938B;
   --ink5:     #B5B4AC;

   --orange:   #E55A12;
   --orangeD:  #C24A0B;
   --orangeS:  #F3E2D2;
   --orangeE:  #E5C4A4;

   --green:    #256E4C;
   --greenS:   #E0EAE2;
   --rose:     #9E3D2B;
   --roseS:    #F0E0DA;

   --dark:     #232320;
   --darkD:    #1B1B18;

   font-family: 'Instrument Sans', system-ui, sans-serif;
   color: var(--ink);
   background: var(--paper);
   -webkit-font-smoothing: antialiased;
}

.ct ::selection { background: rgba(229, 90, 18, .25); }
/* The form/hint toggles rely on the hidden attribute; keep it winning over
   the display values set on those components. */
.ct [hidden] { display: none !important; }
.ct *:focus { outline: none; }
.ct *:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.ct-main {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 32px 56px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ct-hero {
   padding: 30px 0 34px;
   border-bottom: 1px solid var(--rule);
   margin-bottom: 36px;
}
.ct-crumb {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: 'Fragment Mono', monospace;
   font-size: 13.5px;
   letter-spacing: 0.01em;
   color: var(--ink3);
   margin-bottom: 18px;
}
.ct-crumb a { color: var(--ink3); text-decoration: none; }
.ct-crumb a:hover { color: var(--ink); }
.ct-crumb svg { flex-shrink: 0; }
.ct-crumb [aria-current] { color: var(--ink); font-weight: 600; }
.ct-hero h1 {
   margin: 0;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 52px;
   font-weight: 700;
   letter-spacing: -0.045em;
   line-height: 1.02;
   color: var(--ink);
}
.ct-hero h1 .ct-dot { color: var(--orange); }
.ct-hero p {
   margin: 10px 0 0;
   font-size: 18px;
   color: var(--ink3);
   line-height: 1.5;
   max-width: 560px;
}

/* ── Form + rail grid ───────────────────────────────────────────────────── */
.ct-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 320px;
   gap: 28px;
   align-items: start;
}

/* ── Form card ──────────────────────────────────────────────────────────── */
.ct-card {
   background: var(--card);
   border: 1px solid var(--cardEdge);
   border-radius: 14px;
   padding: 28px;
   display: flex;
   flex-direction: column;
   gap: 18px;
}
.ct-field { display: flex; flex-direction: column; gap: 7px; }
.ct-label {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink3);
}
.ct-label-row { display: flex; align-items: baseline; }
.ct-label-row .ct-label { flex: 1; }
.ct-input {
   box-sizing: border-box;
   width: 100%;
   padding: 11px 13px;
   border-radius: 9px;
   background: var(--paper);
   border: 1px solid var(--rule2);
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 15.5px;
   color: var(--ink);
   line-height: 1.4;
}
.ct-input::placeholder { color: var(--ink5); }
textarea.ct-input { resize: vertical; min-height: 120px; }

/* Two-up name row — wraps when a field would go under 180px */
.ct-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ct-row .ct-field { flex: 1; min-width: 180px; }

/* Topic chips */
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip {
   cursor: pointer;
   white-space: nowrap;
   padding: 6px 12px;
   border-radius: 999px;
   font-family: inherit;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--ink2);
   background: var(--paper);
   border: 1px solid var(--rule2);
}
.ct-chip:hover { border-color: var(--ink4); }
.ct-chip.is-on {
   font-weight: 600;
   color: var(--paper);
   background: var(--dark);
   border-color: var(--dark);
}

/* Contextual hint under the chips */
.ct-hint {
   display: flex;
   gap: 8px;
   align-items: flex-start;
   padding: 9px 12px;
   border-radius: 9px;
   background: var(--orangeS);
   border: 1px solid var(--orangeE);
   font-size: 13.5px;
   color: var(--orangeD);
   line-height: 1.5;
}
.ct-hint svg { margin-top: 2px; flex-shrink: 0; }

/* Message counter */
.ct-count {
   font-family: 'Fragment Mono', monospace;
   font-size: 12px;
   color: var(--ink4);
}
.ct-count.is-hot { color: var(--orangeD); }

/* Server-side error note */
.ct-form-error {
   margin: 0;
   padding: 9px 12px;
   border-radius: 9px;
   background: var(--roseS);
   font-size: 14px;
   color: var(--rose);
   line-height: 1.5;
}

/* Footer row: privacy checkbox + submit */
.ct-form-foot {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
   padding-top: 4px;
}
.ct-agree { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.ct-agree input {
   width: 15px;
   height: 15px;
   margin: 0;
   accent-color: var(--orange);
}
.ct-agree span { font-size: 14px; color: var(--ink3); }
.ct-agree a { color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; }
.ct-form-foot .ct-spacer { flex: 1; }
.ct-submit {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 11px 22px;
   border-radius: 9px;
   border: none;
   background: linear-gradient(180deg, #2E2E2A, var(--dark));
   color: var(--paper);
   border: 1px solid var(--darkD);
   box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px -22px rgba(35,35,32,.7);
   font-family: inherit;
   font-size: 14.5px;
   font-weight: 600;
}
.ct-submit:hover { background: var(--darkD); }
.ct-submit:disabled { opacity: .6; cursor: default; }

/* Success state — replaces the form card */
.ct-done {
   background: var(--card);
   border: 1px solid var(--cardEdge);
   border-radius: 14px;
   padding: 64px 48px;
   text-align: center;
}
.ct-done-badge {
   width: 52px;
   height: 52px;
   border-radius: 999px;
   margin: 0 auto 18px;
   background: var(--greenS);
   color: var(--green);
   display: grid;
   place-items: center;
}
.ct-done h2 {
   margin: 0 0 8px;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -0.035em;
   color: var(--ink);
}
.ct-done p {
   margin: 0 auto;
   font-size: 15.5px;
   color: var(--ink3);
   line-height: 1.6;
   max-width: 380px;
}
.ct-again {
   cursor: pointer;
   margin-top: 22px;
   padding: 9px 16px;
   border-radius: 8px;
   background: transparent;
   border: 1px solid var(--rule2);
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;
   color: var(--ink2);
}
.ct-again:hover { border-color: var(--ink4); }

/* ── Help rail ──────────────────────────────────────────────────────────── */
.ct-rail { display: flex; flex-direction: column; gap: 14px; }
.ct-rail-card {
   background: var(--card);
   border: 1px solid var(--cardEdge);
   border-radius: 14px;
   padding: 16px 18px;
   display: flex;
   gap: 13px;
   align-items: flex-start;
}
.ct-rail-icon {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   flex-shrink: 0;
   background: var(--paper2);
   color: var(--ink2);
   display: grid;
   place-items: center;
}
.ct-rail-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ct-rail-body { font-size: 13.5px; color: var(--ink3); line-height: 1.55; }

/* "Elsewhere" card */
.ct-elsewhere {
   border: 1px dashed var(--rule2);
   border-radius: 14px;
   padding: 16px 18px;
}
.ct-elsewhere .ct-label { display: block; color: var(--ink4); margin-bottom: 10px; }
.ct-elsewhere-links { display: flex; flex-direction: column; gap: 8px; }
.ct-elsewhere-links a {
   display: flex;
   align-items: baseline;
   gap: 8px;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--ink2);
   text-decoration: none;
}
.ct-elsewhere-links a:hover { color: var(--ink); }
.ct-elsewhere-links .ct-handle {
   font-family: 'Fragment Mono', monospace;
   font-size: 12px;
   font-weight: 400;
   color: var(--ink4);
}

/* ── FAQ accordion ──────────────────────────────────────────────────────── */
.ct-faq { margin-top: 64px; }
.ct-faq-eyebrow {
   font-family: 'Fragment Mono', monospace;
   font-size: 12.5px;
   font-weight: 400;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--orangeD);
   margin-bottom: 10px;
}
.ct-faq h2 {
   margin: 0 0 20px;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 32px;
   font-weight: 700;
   letter-spacing: -0.035em;
   color: var(--ink);
}
.ct-faq-card {
   background: var(--card);
   border: 1px solid var(--cardEdge);
   border-radius: 14px;
   overflow: hidden;
}
.ct-faq-item + .ct-faq-item { border-top: 1px solid var(--divider); }
.ct-faq-btn {
   cursor: pointer;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 14px;
   width: 100%;
   padding: 17px 22px;
   background: none;
   border: none;
   text-align: left;
   font-family: inherit;
}
.ct-faq-idx {
   font-family: 'Fragment Mono', monospace;
   font-size: 12.5px;
   font-weight: 400;
   color: var(--ink4);
   flex-shrink: 0;
}
.ct-faq-item.is-open .ct-faq-idx { color: var(--orange); }
.ct-faq-q { font-size: 16px; font-weight: 600; color: var(--ink); flex: 1; line-height: 1.4; }
.ct-faq-chev {
   color: var(--ink4);
   flex-shrink: 0;
   transition: transform .2s;
}
.ct-faq-item.is-open .ct-faq-chev { transform: rotate(180deg); }
.ct-faq-a {
   display: none;
   padding: 0 22px 20px 61px;   /* left-aligns the answer with the question text */
   font-size: 15px;
   color: var(--ink3);
   line-height: 1.65;
   max-width: 640px;
}
.ct-faq-item.is-open .ct-faq-a { display: block; }
.ct-faq-a strong { font-weight: 600; color: var(--ink); }

/* ── Mobile (< 860px): rail stacks below the form ───────────────────────── */
@media (max-width: 859px) {
   .ct-main { padding: 0 16px 40px; }
   .ct-hero { padding: 18px 0 22px; margin-bottom: 22px; }
   .ct-hero h1 { font-size: 36px; }
   .ct-hero p { font-size: 16px; }
   .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
   .ct-card { padding: 20px; }
   .ct-done { padding: 40px 24px; }
   .ct-faq { margin-top: 40px; }
   .ct-faq h2 { font-size: 26px; }
   .ct-faq-btn { padding: 15px 16px; }
   .ct-faq-q { font-size: 15px; }
   .ct-faq-a { padding: 0 16px 16px 41px; }
}

/* ── Honeypot — offscreen bot trap; must never use display:none (some bots
      skip hidden fields) ─────────────────────────────────────────────────── */
.ct-hp {
   position: absolute;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}