/* Scout by Delfin additions to the Gushwork ad-page design (design.css). Tokens only.
   The ad-page template has no long-form fields, no variable-length choice list, no provider box and no
   prose pages, so those are added here. Chosen layout values (not from the design system's exports) are
   marked "chosen". */

/* navbar wordmark: the Delfin icon and "Scout by Delfin" */
.nav-brand{display:inline-flex;align-items:center;gap:var(--gw-space-8);text-decoration:none;color:var(--gw-color-black)}
.nav-brand img{width:22px;height:22px}
.nav-brand span{font:var(--gw-text-h7-sem);letter-spacing:var(--gw-text-h7-sem-tracking)}
.nav-brand small{font:var(--gw-text-body-14-med);color:var(--gw-color-neutral-600)}

/* the quote form: textareas and a list of answers of any length */
.field--area{height:auto;align-items:flex-start;padding:var(--gw-space-12) var(--gw-space-16)}
.field textarea{width:100%;min-height:88px;border:0;background:none;outline:none;padding:0;resize:vertical;
  font:var(--gw-text-body-14-med);color:var(--gw-color-black)}
.field textarea::placeholder{color:var(--gw-color-neutral-500)}
.form .q{margin-bottom:var(--gw-space-24)}
.form .q legend{font:var(--gw-text-body-14-sem);letter-spacing:var(--gw-text-body-14-sem-tracking);color:var(--gw-color-black);
  margin-bottom:var(--gw-space-12)}
.form .q legend small{font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-600)}
.opts{display:flex;flex-direction:column;gap:var(--gw-space-8)}
.opt{display:flex;align-items:center;gap:var(--gw-space-8);padding:var(--gw-space-12);cursor:pointer;
  background:var(--gw-color-neutral-25);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-12);
  font:var(--gw-text-body-14-med);color:var(--gw-color-black)}
.opt:has(input:checked){border-color:var(--gw-color-primary-500);background:var(--gw-color-primary-25)}
.opt input{accent-color:var(--gw-color-primary-500);margin:0}
.q-error,.q-block{display:none;margin-top:var(--gw-space-8);font:var(--gw-text-body-12-med);color:var(--gw-color-red-600)}
.q.invalid .q-error,.q.blocked .q-block{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{margin-top:var(--gw-space-12);font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-600)}
.consent a{color:var(--gw-color-primary-500)}

/* who receives the request, under the hero copy */
.provider{margin-top:var(--gw-space-24);padding:var(--gw-space-20);max-width:620px;
  background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-16)}
.provider small{display:block;font:var(--gw-text-body-12-sem);letter-spacing:var(--gw-text-body-12-sem-tracking);
  color:var(--gw-color-primary-500);text-transform:uppercase;margin-bottom:var(--gw-space-8)}
.provider p{font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-neutral-800)}
.provider b{color:var(--gw-color-black)}

/* service features as cards (the template's feature rows need product visuals these pages don't have) */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gw-space-20);margin-top:var(--gw-space-48)}
.feat{display:flex;flex-direction:column;gap:var(--gw-space-12);padding:var(--gw-space-24);
  background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-20)}
.feat h3{font:var(--gw-text-h7-sem);letter-spacing:var(--gw-text-h7-sem-tracking);color:var(--gw-color-black)}
.feat p{font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-neutral-600)}
.feat .ticks{margin-top:var(--gw-space-4)}
.steps{margin-top:var(--gw-space-48)}

/* the closing call to action carries the end-of-page form where the template has a testimonial image.
   Column width chosen: the hero form's 500px less the CTA's own padding. */
.cta--form{grid-template-columns:minmax(0,1fr) minmax(0,480px);min-height:0;align-items:center;padding:var(--gw-space-20)}
.cta--form .cta-body{padding:var(--gw-space-40)}
.cta--form .form{margin:0}
.cta-ticks{display:flex;flex-direction:column;gap:var(--gw-space-8)}
.cta-ticks li{display:flex;align-items:center;gap:var(--gw-space-8);font:var(--gw-text-body-16-med);
  letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-white)}
.cta-ticks svg{width:16px;height:16px}
@media (max-width: 900px){
  .cta--form{grid-template-columns:1fr;padding:var(--gw-space-12)}
  .cta--form .cta-body{padding:var(--gw-space-24) var(--gw-space-12)}
}

/* popup form: 30% scroll, exit intent and the "Get a quote" buttons */
dialog.modal{border:0;padding:0;background:transparent;width:min(520px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
dialog.modal::backdrop{background:var(--gw-color-neutral-alpha-50-black)}
.modal-card{position:relative}
.modal .form{margin:0}
.m-close{position:absolute;top:var(--gw-space-16);right:var(--gw-space-16);z-index:1;width:32px;height:32px;border:0;
  border-radius:var(--gw-radius-8);background:var(--gw-color-neutral-50);color:var(--gw-color-black);
  font:var(--gw-text-body-20-med);line-height:32px;cursor:pointer}
.modal .form-head{padding-right:var(--gw-space-40)}

/* who publishes the page (2026-10-08, for the phishing appeal): Google's guidance for a site that names a business
   it isn't an official partner of is a clear disclaimer. First line of the hero, and in the footer of every page. */
.disclaimer{font:var(--gw-text-body-14-med);letter-spacing:var(--gw-text-body-14-med-tracking);color:var(--gw-color-neutral-700);
  padding:var(--gw-space-8) var(--gw-space-12);background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);
  border-radius:var(--gw-radius-8)}
.site-disclaimer{margin-top:var(--gw-space-12);max-width:760px;font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-400)}
@media (max-width: 767px){ .hero .disclaimer{margin-bottom:var(--gw-space-12)} }

/* marketplace version's trust sections (2026-10-09), built from the ad-page template's parts: the process is a
   fold/ With image row (.split, the visual on the left) with the steps as an accordion; reasons are icon cards in a
   grid sized to their count; credentials sit in a band, as text with icon tiles (never another organisation's
   badge or logo: its mark would suggest it backs the page). Icons: Phosphor, Regular. Sizes chosen. */
.acc{width:100%;display:flex;flex-direction:column;gap:var(--gw-space-8);margin-top:var(--gw-space-4)}
.acc details{background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-12);
  padding:var(--gw-space-12) var(--gw-space-16);transition:box-shadow .2s ease,border-color .2s ease}
.acc details[open]{border-color:var(--gw-color-neutral-200);box-shadow:var(--gw-shadow-s2)}
.acc summary{display:flex;align-items:center;gap:var(--gw-space-12);cursor:pointer;list-style:none;
  font:var(--gw-text-body-16-sem);letter-spacing:var(--gw-text-body-16-sem-tracking);color:var(--gw-color-black)}
.acc summary::-webkit-details-marker{display:none}
.acc .tile{width:32px;height:32px;border-radius:var(--gw-radius-8)}
.acc .tile svg{width:16px;height:16px}
.acc details[open] .tile{background:var(--gw-color-primary-500);color:var(--gw-color-white)}
.acc .acc-title{flex:1}
.acc p{margin:var(--gw-space-8) 0 var(--gw-space-4) calc(32px + var(--gw-space-12))}
/* a photo in place of the stage card: it fills the column, as tall as the steps beside it */
.proc{align-items:stretch}
.slot--photo{padding:0;min-height:440px;overflow:hidden;position:relative}
.slot--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stages{display:flex;flex-direction:column;gap:var(--gw-space-4);list-style:none;padding:0}
.stages .ev{padding:var(--gw-space-8);border-radius:var(--gw-radius-8);align-items:center;transition:background .2s ease}
.stages .ev.on{background:var(--gw-color-primary-25)}
.stages .ev.on .tile{background:var(--gw-color-primary-500);color:var(--gw-color-white)}
.stages small{margin-top:2px}

.why-grid{display:grid;gap:var(--gw-space-20);margin-top:var(--gw-space-48);grid-template-columns:repeat(3,minmax(0,1fr))}
.why-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.why-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.why{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gw-space-12);padding:var(--gw-space-24);
  background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-20)}
.why .tile{width:40px;height:40px;border-radius:var(--gw-radius-12);margin-bottom:var(--gw-space-8)}
.why .tile svg{width:20px;height:20px}
.why h3{font:var(--gw-text-h7-sem);letter-spacing:var(--gw-text-h7-sem-tracking);color:var(--gw-color-black)}
.why p{font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-neutral-600)}

.creds-band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gw-space-48);align-items:center;
  padding:var(--gw-space-48);background:var(--gw-color-neutral-25);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-20)}
.creds-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gw-space-16)}
.creds-head .sub{font:var(--gw-text-body-16-med);color:var(--gw-color-neutral-600)}
.creds-list{display:flex;flex-direction:column;list-style:none;padding:0;background:var(--gw-color-white);
  border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-16);box-shadow:var(--gw-shadow-s2)}
.creds-list li{display:flex;gap:var(--gw-space-16);align-items:center;padding:var(--gw-space-16) var(--gw-space-20)}
.creds-list li + li{border-top:1px solid var(--gw-color-neutral-100)}
.creds-list .tile{width:40px;height:40px;border-radius:var(--gw-radius-12)}
.creds-list .tile svg{width:20px;height:20px}
.creds-list b{display:block;font:var(--gw-text-body-16-sem);letter-spacing:var(--gw-text-body-16-sem-tracking);color:var(--gw-color-black)}
.creds-list span:not(.tile){display:block;font:var(--gw-text-body-14-med);letter-spacing:var(--gw-text-body-14-med-tracking);color:var(--gw-color-neutral-600)}

@media (max-width: 1100px){
  .why-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creds-band{grid-template-columns:1fr;gap:var(--gw-space-24);padding:var(--gw-space-32)}
}
@media (max-width: 767px){
  .why-grid,.why-grid--2,.why-grid--4{grid-template-columns:1fr;margin-top:var(--gw-space-32)}
  .proc .slot{display:none}          /* phones: the accordion carries the steps, the page stays short */
  .why{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--gw-space-16);row-gap:var(--gw-space-4);padding:var(--gw-space-20)}
  .why .tile{grid-row:span 2;margin:0}
  .creds-band{padding:var(--gw-space-20)}
  .creds-list li{padding:var(--gw-space-12) var(--gw-space-16)}
}

/* the mid-page button carries the form heading, which can be longer than a phone is wide: let it wrap */
@media (max-width: 767px){
  .center-cta .btn{height:auto;min-height:48px;white-space:normal;text-align:center;padding:var(--gw-space-12) var(--gw-space-16)}
}

/* marketplace hero (2026-10-09): 3-4 selling points about the firm where "Who will contact you" was; that box moves
   into the closing call to action, beside the last form, in white on its blue. Sizes chosen. */
.usps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gw-space-12);max-width:620px;margin-top:var(--gw-space-8);
  list-style:none;padding:0}
.usps li{display:flex;align-items:center;gap:var(--gw-space-12);padding:var(--gw-space-12) var(--gw-space-16);
  background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-12);
  font:var(--gw-text-body-14-sem);letter-spacing:var(--gw-text-body-14-sem-tracking);color:var(--gw-color-black)}
.usps .tile{width:32px;height:32px;border-radius:var(--gw-radius-8)}
.usps .tile svg{width:16px;height:16px}
.provider--cta{margin-top:0;max-width:none;background:var(--gw-color-neutral-alpha-10-white);border-color:var(--gw-color-neutral-alpha-30-white)}
.provider--cta small{color:var(--gw-color-white)}
.provider--cta p{color:var(--gw-color-neutral-alpha-90-white)}
@media (max-width: 767px){
  .hero .usps{order:6;grid-template-columns:1fr;margin-top:var(--gw-space-16)}
  .provider--cta p{font:var(--gw-text-body-14-med)}
}

/* footer company block, above the copyright line */
.company{display:flex;flex-wrap:wrap;gap:var(--gw-space-8) var(--gw-space-24);font:var(--gw-text-body-14-med);
  color:var(--gw-color-neutral-400)}
.company a{color:var(--gw-color-neutral-200)}

/* prose pages: about, privacy, thank you, 404 */
.doc{padding:var(--gw-space-80) 0}
.doc .wrap{max-width:760px}
.doc h1{font:var(--gw-text-h4);letter-spacing:var(--gw-text-h4-tracking);color:var(--gw-color-black);margin-bottom:var(--gw-space-24)}
.doc h2{font:var(--gw-text-h7-sem);letter-spacing:var(--gw-text-h7-sem-tracking);color:var(--gw-color-black);
  margin:var(--gw-space-40) 0 var(--gw-space-12)}
.doc p,.doc li{font:var(--gw-text-body-16-reg);letter-spacing:var(--gw-text-body-16-reg-tracking);color:var(--gw-color-neutral-700);
  margin-bottom:var(--gw-space-12)}
.doc ul{padding-left:var(--gw-space-20);list-style:disc}
.doc a{color:var(--gw-color-primary-500)}

@media (max-width: 900px){
  .feat-grid{grid-template-columns:1fr}
  .doc{padding:var(--gw-space-40) 0}
}

/* card labels sit as compact pills, not full-width bars */
.feat .eyebrow{align-self:flex-start}

/* compact quote form (2026-10-07: the full template spacing made the form too long). Every question stays,
   but short fields share a row, fields are 44px (touch-target size) with 8px gaps, answers wrap as pills
   and the text boxes start at two lines and grow as people type. Sizes chosen, not from the system's exports. */
.lead-form{padding:var(--gw-space-24)}
.lead-form .form-head{margin-bottom:var(--gw-space-16)}
.lead-form .form-head h2{font:var(--gw-text-h7-sem);letter-spacing:var(--gw-text-h7-sem-tracking)}
.lead-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gw-space-8)}
.lead-form .field{height:44px;margin-bottom:var(--gw-space-8);padding:var(--gw-space-8) var(--gw-space-12)}
.lead-form .field--area{height:auto;padding:var(--gw-space-8) var(--gw-space-12)}
.lead-form .field textarea{min-height:40px;resize:none;overflow:hidden}
.lead-form .q{margin:var(--gw-space-12) 0 var(--gw-space-8)}
.lead-form .q legend{margin-bottom:var(--gw-space-8)}
.lead-form .opts{flex-direction:row;flex-wrap:wrap;gap:var(--gw-space-8)}
.lead-form .opt{padding:var(--gw-space-8) var(--gw-space-12);border-radius:var(--gw-radius-full);font:var(--gw-text-body-14-med)}
.lead-form .btn--glow{height:44px;margin-top:var(--gw-space-4)}
.lead-form .consent{margin-top:var(--gw-space-8)}
@media (max-width: 420px){ .lead-form .row2{grid-template-columns:1fr;gap:0} }
.lead-form .form-head .req-note{margin-top:var(--gw-space-4);font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-500)}

/* ---------------------------------------------------------------------------------------------
   Phone (2026-10-07). The template stacks the hero in source order, which put the form below the
   first screen. On phones the form comes straight after the headline (its heading says who gets the
   request), then the proof ticks and the provider box. A sticky "Get a quote" bar opens the popup
   whenever no form is in view, the steps become compact rows, and the popup becomes a bottom sheet.
   --------------------------------------------------------------------------------------------- */
.sticky-cta{display:none}
@media (max-width: 767px){
  .hero h1{font:var(--gw-text-h4);letter-spacing:var(--gw-text-h4-tracking)}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero-sub{order:3}
  .hero-grid > .lead-form{order:4;margin-top:var(--gw-space-24)}
  .hero .checks-strip{order:5;margin-top:var(--gw-space-24)}
  .hero .provider{order:6;margin-top:var(--gw-space-16);padding:var(--gw-space-16)}
  .provider p{font:var(--gw-text-body-14-med);letter-spacing:var(--gw-text-body-14-med-tracking)}

  .lead-form{padding:var(--gw-space-20)}
  .lead-form .form-head h2{font:var(--gw-text-h8);letter-spacing:var(--gw-text-h8-tracking)}

  /* steps: number left, text right, no tall cards */
  .step{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:var(--gw-space-12);padding:var(--gw-space-16)}
  .step-body h3{margin-top:0}

  .feat{padding:var(--gw-space-20)}
  .feat-grid{margin-top:var(--gw-space-32)}
  .steps{margin-top:var(--gw-space-32)}

  /* sticky bar: only while no form is on screen (the script toggles .show) */
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:var(--gw-space-12) var(--gw-space-16) calc(var(--gw-space-12) + env(safe-area-inset-bottom,0px));
    background:var(--gw-color-white);border-top:1px solid var(--gw-color-neutral-100);
    transform:translateY(110%);transition:transform var(--gw-motion-fast, .2s) ease}
  .sticky-cta.show{transform:none}
  .sticky-cta .btn{height:48px}
  .footer{padding-bottom:calc(var(--gw-space-16) + 76px + env(safe-area-inset-bottom,0px))}

  /* popup as a bottom sheet */
  dialog.modal{width:100%;max-width:none;margin:auto 0 0;max-height:92dvh}
  dialog.modal .form{border-radius:var(--gw-radius-20) var(--gw-radius-20) 0 0;
    padding-bottom:calc(var(--gw-space-20) + env(safe-area-inset-bottom,0px))}
  .m-close{top:var(--gw-space-12);right:var(--gw-space-12)}
}