/* =============================================================================
   Comfort layer — loaded last, on every page.

   The palette, the two faces and the structure are unchanged. This sheet only
   softens the places where the original sheet was doing a printed-page
   impression at the reader's expense: answers and fields you could not tell
   were interactive, tap targets under 44px, headings breaking badly on narrow
   screens, and a few hairlines carrying work that needs a surface.
   ========================================================================== */

:root{
  --edge-firm:#D8CCDD;      /* a border you can actually see on a phone */
  --amber:#D99A2B;
}

/* Headings break on a sensible word rather than leaving one word alone. */
h1,h2,h3,.lede,legend{text-wrap:balance}
p,li{text-wrap:pretty}

/* Slightly more air between lines at reading sizes — the single cheapest
   thing that makes a dense page feel calm. */
.prose p,.post-body p,.lede{line-height:1.68}

/* ============================================================ answer rows ==
   Shared by the assessment and the prompt builder. Was: a line of type with a
   1px rule under it and a green underline when chosen. Now: a surface with a
   mark, a 48px+ target, and a state you can see from arm's length. */
.opts{display:grid;gap:.6rem}
.opt{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:.9rem 1.05rem;min-height:3.25rem;
  border:1.5px solid var(--edge-firm);border-radius:14px;background:var(--lift);
  cursor:pointer;line-height:1.5;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.opt:first-child{border-top:1.5px solid var(--edge-firm)}
.opt::before{
  content:"";flex:none;width:1.3rem;height:1.3rem;margin-top:.14rem;
  border:1.5px solid var(--edge-firm);border-radius:50%;background:var(--paper);
  background-position:center;background-repeat:no-repeat;background-size:.8rem;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.opt[data-multi]::before{border-radius:6px}
.opt > span{display:block;max-width:54ch;flex:1}
.opt small{display:block;color:var(--slate);margin-top:.2rem;font-size:.88rem}

.opt:hover{border-color:var(--plum-mid);background:var(--plum-tint)}
.opt:hover > span{text-decoration:none}
.opt:hover::before{border-color:var(--plum-mid)}

.opt:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.opt:has(input:checked) > span{
  font-weight:600;color:var(--plum);text-decoration:none;
}
.opt:has(input:checked)::before{
  border-color:var(--green-deep);background-color:var(--green);
  box-shadow:inset 0 0 0 4px var(--lift);
}
.opt[data-multi]:has(input:checked)::before{
  box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.2L13 4.8' fill='none' stroke='%23052B18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.opt:has(input:focus-visible){outline:2.5px solid var(--green);outline-offset:3px;border-radius:14px}
.opt:active{transform:scale(.995)}

@media (prefers-reduced-motion:reduce){
  .opt,.opt::before{transition:none}
  .opt:active{transform:none}
}

/* ================================================================== forms ==
   Fields get a real box and 48px of height, so they are visibly fillable and
   comfortable on a phone. 16px minimum stops iOS zooming on focus. */
.eform input,.eform select,.eform textarea,
.field input,.field select,.field textarea{
  font-size:max(1rem,16px);border:1.5px solid var(--edge-firm);border-radius:12px;
  background:var(--lift);padding:.78rem .9rem;min-height:3rem;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input,.field select,.field textarea{color:var(--ink)}
.eform input:focus,.eform select:focus,.eform textarea:focus,
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);padding-bottom:.78rem;
}
.eform select,.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.3L8 10.3 12 6.3' fill='none' stroke='%235E5566' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:1.05rem;
  padding-right:2.6rem;
}
.eform textarea{min-height:8.5rem}
.eform button{
  border-radius:999px;min-height:3.25rem;padding:.9rem 1.9rem;
  box-shadow:var(--shadow-sm);transition:background .15s,transform .15s,box-shadow .15s;
}
.eform button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.eform .req{font-weight:500}

/* Optional questions, folded away. Nine visible fields reads as paperwork;
   four reads as a message. */
.fld-more{
  border:1.5px solid var(--edge-firm);border-radius:14px;background:var(--plum-tint);
  padding:.25rem .25rem;
}
.fld-more > summary{
  cursor:pointer;list-style:none;padding:.9rem 1.05rem;min-height:3rem;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.7rem;align-items:center;
  font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--plum);
}
.fld-more > summary b{grid-column:1;grid-row:1;font-weight:600}
.fld-more > summary span{grid-column:1;grid-row:2}
@media (min-width:34rem){
  .fld-more > summary{grid-template-columns:auto minmax(0,1fr) auto;column-gap:.6rem}
  .fld-more > summary span{grid-column:2;grid-row:1}
}
.fld-more > summary::-webkit-details-marker{display:none}
.fld-more > summary::after{
  content:"";width:.55rem;height:.55rem;margin-left:auto;
  grid-column:-1;grid-row:1 / span 2;align-self:center;
  border-right:1.8px solid var(--slate);border-bottom:1.8px solid var(--slate);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.fld-more[open] > summary::after{transform:rotate(225deg) translateY(0)}
.fld-more > summary span{font-weight:400;color:var(--slate);font-family:var(--body);font-size:.92rem;line-height:1.4}
.fld-more .more-in{display:grid;gap:1.35rem;padding:.35rem 1.05rem 1.15rem}

@media (max-width:44rem){
  .eform .fld-2{grid-template-columns:1fr}
  .eform button{width:100%;justify-self:stretch}
  .form-wrap{grid-template-columns:1fr}
}

/* ================================================== buttons and targets ==*/
.btn-primary,.btn-quiet,.bar-cta,.ask>a,.talk-call,.btn-call{border-radius:999px}
.btn-primary,.btn-quiet{min-height:3rem;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:30rem){
  .cta .btn-primary,.phero .btn-primary{width:100%}
}
/* Footer and mega-menu links are 15px lines an inch apart on a phone; give
   them a thumb-sized row. */
@media (max-width:64rem){
  .foot-grid a,.mega-group a{display:block;padding-block:.42rem}
}

/* ============================================================== surfaces ==*/
.ask{border-radius:var(--r-lg);align-items:center}
.ask>a{border-radius:999px;min-height:3rem;display:inline-flex;align-items:center}
.form-side,.pcard,.cats a{border-radius:var(--r-lg)}
.cats a{border-radius:999px}
.eform .plan-note{border-radius:12px;border-left-width:4px}

/* Figures are the darkest thing on most pages; rounding and a softer frame
   stops them reading as an interruption. */
.fig-art .figsvg{border-radius:var(--r-lg)}
@media (max-width:40rem){
  .fig-art{margin-block:2rem}
}

/* The sticky bottom bar sits under the thumb on every page; make it feel
   like a shelf rather than a strip. On the enquiry page itself it is an
   invitation to go where you already are, so it stands down. */
.callbar a{min-height:3rem;border-radius:999px}
body:has(.eform) .callbar{display:none}
@media (max-width:860px){ body:has(.eform){padding-bottom:0} }