/* the brief page: container.css supplies the fonts, tokens, logo and buttons */
.brief{min-height:100vh}
.b-nav{display:flex;align-items:center;justify-content:space-between;padding:30px 48px}
.b-nav .back{font-size:13.5px;color:#333}
.b-nav .back:hover{color:var(--ink);text-decoration:underline}

.b-main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;max-width:1280px;margin:0 auto;padding:56px 48px 120px}
.b-intro{position:sticky;top:48px;align-self:start}
.b-intro h1,.b-panel h2{font-weight:600;font-size:clamp(40px,5vw,68px);line-height:.95;letter-spacing:-.045em;margin:18px 0 22px}
.b-panel h2{font-size:clamp(34px,4vw,52px)}
.b-intro>p:not(.mono){font-size:18px;line-height:1.45;max-width:30em;color:#333}
.b-next{list-style:none;padding:0;margin:36px 0 28px;border-top:1px solid #12121226}
.b-next li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid #12121226;font-size:15px}
.b-next .mono{color:#12121299}
.b-intro>p.fine,.fine{font-size:13px;color:#555}

/* who reads the brief */
.founder{display:flex;gap:18px;align-items:center;margin-top:32px;padding:20px;background:#fff}
.founder .avatar{flex:none;width:64px;height:64px;object-fit:cover;background:var(--brand)}
.founder a{text-decoration:underline;white-space:nowrap}
.founder p{margin:0;font-size:15px;line-height:1.4}
.founder b{display:block;font-size:17px;letter-spacing:-.01em}
.founder .mono{display:block;margin:2px 0 6px;color:#12121299;font-size:11px}

/* form: underlined fields, mono labels, numbered sections */
.b-form{display:grid;gap:44px}
.b-form fieldset{border:0;margin:0;padding:0;display:grid;gap:26px}
.b-form legend{display:flex;gap:14px;align-items:center;padding:0;margin-bottom:6px;font-size:12px}
.b-form legend span{background:var(--brand);padding:4px 7px;font-weight:500}
.b-form label{display:grid;gap:8px;font:500 11px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#12121299}
.b-form label em{font-style:normal;color:var(--ink)}
.b-form :is(input,select,textarea){font:400 18px/1.35 "Inter Tight",system-ui,sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid #12121240;border-radius:0;padding:8px 0 10px;width:100%;outline:0;transition:border-color .2s}
.b-form textarea{resize:vertical;min-height:110px}
.b-form select{appearance:none;cursor:pointer;padding-right:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121212' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center/12px 8px no-repeat}
.b-form ::placeholder{color:#12121255}
.b-form :is(input,select,textarea):focus{border-color:var(--ink)}
.b-form :is(input,select,textarea):focus-visible{box-shadow:0 2px 0 var(--brand)}
.b-form [aria-invalid="true"]{border-color:#B3362B}
.row{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.row.qty{grid-template-columns:1fr 1fr 1fr}
/* the "Which …?" field appears only when its select says Other (no script needed) */
.row .other{display:none}
.row:has(option[value="Other"]:checked) .other{display:grid}

.check{display:flex!important;align-items:flex-start;gap:12px;font:400 15px/1.4 "Inter Tight",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;cursor:pointer}
.check input{width:20px;height:20px;margin:0;accent-color:var(--brand);flex:none}
.check a{text-decoration:underline}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.send .btn-b{border:0;cursor:pointer;font-family:inherit}
.send .btn-b:disabled{opacity:.5;cursor:wait}
.status{margin:0;font-size:14px}

/* result panels: shown by the URL hash, so a plain form post (no script) lands on them too */
.b-panel{display:none;grid-column:2;align-self:start;background:var(--brand);padding:44px 44px 48px;outline:0}
.b-panel.failed{background:#F2D9D5}
.b-panel p:not(.mono){font-size:17px;max-width:30em}
.b-panel .btn-k{margin-top:12px}
.b-panel:target{display:block}
.brief:has(#sent:target) .b-form{display:none}
.brief:has(#failed:target) .b-form{margin-top:-20px}
.b-main:has(.b-panel:target) .b-form{grid-column:2}

@media (max-width:960px){
  .b-nav{padding:20px 16px}
  .b-main{grid-template-columns:1fr;gap:48px;padding:24px 16px 80px}
  .b-intro{position:static}
  .b-panel,.b-main:has(.b-panel:target) .b-form{grid-column:auto}
  .b-panel{padding:32px 24px}
}
@media (max-width:560px){
  .row,.row.qty{grid-template-columns:1fr}
}

/* the privacy notice */
.doc{max-width:760px;margin:0 auto;padding:40px 48px 120px}
.doc h1{font-weight:600;font-size:clamp(40px,5vw,64px);line-height:.95;letter-spacing:-.045em;margin:18px 0 22px}
.doc h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:44px 0 10px}
.doc .lead{font-size:19px;color:#333}
.doc p,.doc li{font-size:16px;line-height:1.6}
.doc p.mono{font-size:12px;line-height:1.5}
.doc ul{padding-left:20px}
.doc li{margin:8px 0}
.doc a{text-decoration:underline}
.doc mark{background:#F2D9D5;padding:0 3px}
.doc .draft{background:#F2D9D5;padding:10px 14px;margin:0 0 36px}
.doc .updated{margin-top:44px;color:#555}
.doc #tr{margin-top:72px;padding-top:40px;border-top:1px solid #12121226}
.doc .tr-title{font-size:30px;margin-top:14px}
@media (max-width:960px){.doc{padding:24px 16px 80px}}
.doc table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;line-height:1.4}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid #12121226}
.doc th{font:500 11px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#12121299}
@media (max-width:640px){.doc table,.doc tbody,.doc tr,.doc td{display:block}.doc thead{display:none}.doc tr{padding:10px 0;border-bottom:1px solid #12121226}.doc td{border:0;padding:2px 0}.doc td:first-child{font-weight:600}}
.b-form .hint{font:400 13px/1.4 "Inter Tight",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#555}

/* 404 */
.lost{padding-top:12vh}
.lost h1{max-width:12em}
.lost .go{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.lost .go a{text-decoration:none}