/* The public pages' sections (D10qk, D10rm): the first screen, the heads in two tones, the bands ruled across the
   window, product UI on a washed card, How it works on a band of ink, the metric sets and the closing unit. The frame,
   the masthead, the buttons and the footer are the house's, in /folder.css (visual-direction.md section 12). Each
   public page links /type.css, /folder.css and then this file. */

/* Sections, the first screen and the heads. A head is one block in two tones: the head in ink, the line after it
   in muted. */
.sec{padding:clamp(56px,8vw,96px) 0}
.sec.first{position:relative;padding:0}
.sheet.folder .first .hero{padding:clamp(56px,9vw,120px) 0 clamp(56px,9vw,112px) clamp(0px,7vw,96px)}
.kick{margin-bottom:clamp(24px,3vw,40px);font-size:.875rem;font-weight:600}
.kick .mono{font-weight:400;color:var(--muted)}
.kick a{text-decoration:none}
.lead{max-width:14.5em;font-size:clamp(2rem,4.4vw,3.375rem);letter-spacing:-.022em;line-height:1.15}
.sheet.folder main .lead h1,.sheet.folder main .lead .sub{display:inline;margin:0;max-width:none;font:inherit;letter-spacing:inherit;line-height:inherit;font-weight:400}
.sheet.folder main .lead .sub{color:var(--muted)} /* the subhead runs on from the headline in the second tone */
.sheet.folder .sec h2{margin:0;padding-top:0;border-top:0;max-width:24em;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;
     letter-spacing:-.02em;line-height:1.15;text-wrap:balance;overflow-wrap:break-word} /* an address in a head wraps on a narrow phone */
.tone span{color:var(--muted)}
.sheet.folder .sec.ink h2{margin:0 auto;max-width:18em;text-align:center;font-size:clamp(2rem,4.4vw,3.5rem);letter-spacing:-.025em;line-height:1.03;color:var(--paper)}
.sheet.folder .sec h3{font-weight:400}

/* Buttons and fields. */
.ctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4vw,48px)}
.sheet.folder main .ctas .btn{display:inline-flex;align-items:center} /* the chevron stands centred beside the words */
.ctas .secondary:not(:hover){color:var(--signal);background:var(--paper)} /* on hover it fills with the signal (D10ol) */
.fin{display:block;width:100%;padding:15px 16px;font:inherit;font-size:1rem;line-height:1.4;color:var(--ink);
     background:var(--paper);border:1px solid var(--rule);border-radius:4px;transition:border-color .15s}
.fin:focus{border-color:var(--signal)}
.fin::placeholder{color:var(--muted);opacity:1}
.search{max-width:520px;margin-top:clamp(32px,4vw,48px)} /* the catalog search: Enter opens /catalog, no button (D10hu) */
.search .fin::-webkit-search-cancel-button{-webkit-appearance:none} /* no icon but the four (section 6) */

/* The contour field of / (D10qj): hairlines and microprint, drawn by the page's script, behind the masthead and the
   hero, to the window's right edge. */
.sheet.folder:has(.ribbon) :is(header .name,.tabs .btn:not(.primary),.kick,.lead){text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 6px var(--paper)} /* the lines clear around each letter, as security printing clears the ground under its text */
.ribbon{position:absolute;z-index:-1;top:-72px;left:calc(50% - 50vw);width:100vw;height:calc(100% + 72px);pointer-events:none}

/* A band ruled across the window: on the landing, the places where a verified metric goes (D10qw). */
.band{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin:0 calc(50% - 50vw);
     padding:24px calc(50vw - 50% + clamp(16px,3vw,48px));font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;
     background:color-mix(in srgb,var(--paper) 85%,transparent);border-block:1px solid var(--rule)}
.band a{text-decoration:none}

/* A card of product UI: a 6px radius and the signal's wash from its lower right corner, with no border (D10qr). Windows on
   it take a soft shadow (D10qk). */
.wash{margin-top:clamp(32px,5vw,64px);padding:clamp(20px,5vw,64px) clamp(12px,4vw,56px);border-radius:6px;
     background:radial-gradient(120% 90% at 100% 100%,var(--signal),color-mix(in srgb,var(--signal) 65%,var(--paper)) 28%,color-mix(in srgb,var(--signal) 22%,var(--paper)) 55%,var(--paper) 80%)}
.wash .app,.wash .certificate{box-shadow:0 15px 35px color-mix(in srgb,var(--ink) 10%,transparent),0 5px 15px color-mix(in srgb,var(--ink) 7%,transparent)}

/* A band of ink across the window, with a glow of the signal at its foot: How it works. */
.sec.ink{position:relative;isolation:isolate;padding-block:clamp(64px,10vw,120px);color:var(--paper)}
.sec.ink::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);
     background:radial-gradient(60% 70% at 50% 120%,color-mix(in srgb,var(--signal) 45%,transparent),transparent 70%),var(--ink)}
.ink .lede{margin:14px auto 0;max-width:36em;text-align:center;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.5;color:color-mix(in srgb,var(--paper) 68%,var(--ink))}
.ink a{color:var(--paper)}
/* Steps as large numbers, as Stripe sets its figures. */
.bigsteps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px;max-width:1060px;margin:clamp(40px,6vw,72px) auto 0;text-align:center}
.bigsteps .mono{display:block;margin-bottom:14px;font-size:clamp(2rem,3.4vw,2.75rem);letter-spacing:-.03em;line-height:1}
.bigsteps b{display:block;font-weight:400;font-size:1rem;line-height:1.45;color:color-mix(in srgb,var(--paper) 82%,var(--ink))}
.ink .more{margin-top:clamp(32px,4vw,48px);text-align:center;font-size:.9375rem}

/* Points: a short grid of what a page offers, each a head and one line (D10ql). */
.points{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:clamp(28px,4vw,40px)}
.points h3{font-size:1.0625rem;font-weight:600;line-height:1.35}
.points h3 a{text-decoration-thickness:1px}
.points p{margin-top:6px;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.sec>.more{margin-top:16px;font-size:.9375rem;color:var(--muted)}
.sec.ink>.more{color:color-mix(in srgb,var(--paper) 82%,var(--ink))} /* on ink the line stays light; its link takes the color of the line */

/* The lists of the RFP guides (D10qn). */
.glist{list-style:none;columns:3 220px;column-gap:32px;margin-top:clamp(24px,3vw,32px)}
.glist li{break-inside:avoid;padding:5px 0;font-size:.9375rem;line-height:1.45}

/* A metric set: the table, its note, and the blocks of lines to copy (D10qd, D10qe). A block is short, as a buyer
   writes it in practice, and shows its lines on a wash with one Copy button (D10qk). */
.setname{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:400;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.settab{width:100%;table-layout:fixed;margin-top:14px;border-collapse:collapse;font-size:.9375rem;line-height:1.45}
.settab th{padding:0 16px 8px 0;font-size:.8125rem;font-weight:400;text-align:left;color:var(--muted);border-bottom:1px solid var(--rule)}
.settab td{padding:10px 16px 10px 0;vertical-align:top;border-bottom:1px solid var(--rule)}
.settab td+td{color:var(--muted)}
.settab th:first-child{width:50%}
.settab th:nth-child(2){width:20%} /* the columns stay in place from one set to the next */
.settab .why{display:block;margin-top:2px;font-size:.8125rem;color:var(--muted)}
.setnote{margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(28px,4vw,40px)}
.block{min-width:0}
.bhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bhead h3,.bhead h4{font-size:.9375rem;font-weight:600;line-height:1.35}
.block .copy{min-width:84px;padding:9px 16px;font-size:.875rem;font-weight:600;line-height:1.4} /* a small outline button, its border in the signal (D10on); Copied keeps its width */
.blede{margin-top:6px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.ltext{margin-top:12px;padding:16px 18px;font-size:.9375rem;line-height:1.55;overflow-wrap:break-word;background:var(--wash);border:1px solid var(--rule);border-radius:6px}
.ltext ol{margin-top:8px;padding-left:1.5em}
.ltext li::marker{font-variant-numeric:tabular-nums}
.ltext li+li,.ltext p+p{margin-top:2px}
.blocks.one{grid-template-columns:minmax(0,1fr)}
/* Find a certificate (D10qp): the field with Find beside it, and one line for each certificate that answers. */
.findform{display:flex;gap:8px;max-width:520px;margin-top:clamp(20px,3vw,28px)}
.findform .btn{flex:none;padding:0 24px}
.found{list-style:none;margin-top:clamp(20px,3vw,28px)}
.found li{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--rule);font-size:.9375rem;line-height:1.5}
.found li:last-child{border-bottom:1px solid var(--rule)}
.found b{font-weight:600}
.found span{color:var(--muted)}


/* What the buyer's closing unit and the vendor's start share (D10qd, D10qr): the hidden label, the address with Continue
   beside it, the send (D10jc), the consent line and the status line, and the reply that replaces the form (D10lb). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.flow{max-width:520px;margin-top:clamp(24px,4vw,36px);transition:opacity .3s,transform .3s}
.flow.gone{opacity:0;transform:translateY(-6px)}
.flow>.mail,.flow>.find .mail{position:relative;display:flex;gap:8px} /* the first step: the address with Continue beside it */
.flow>.mail .go,.flow>.find .mail .go{position:static;width:auto;height:auto;flex:none;display:flex;align-items:center;gap:10px;padding:0 24px;font-size:1rem;font-weight:400;line-height:1;border-radius:4px;overflow:hidden}
.mail .go .arr{display:inline-block}
.mail .go.sending .arr,.mail .go:hover:not(:disabled) .arr{animation:send .7s cubic-bezier(.5,0,.5,1) infinite} /* hover runs the send too (D10mj) */
.sheet.folder main .mail .go.primary:hover{background:var(--signal)} /* the arrow moves, the color stays (D10ml, D10om) */
@keyframes send{45%{transform:translateX(20px);opacity:0}55%{transform:translateX(-20px);opacity:0}}
.fnote,.ferr{margin-top:10px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.ferr:empty{margin-top:0} /* empty, the status line takes no room but stays in the accessibility tree */
.thanks{max-width:32em;margin-top:clamp(24px,4vw,36px);text-wrap:balance;font-size:1.125rem;letter-spacing:-.02em;animation:rise .45s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

@media (min-width:481px){.settab :is(th,td):nth-child(2){padding-left:12px}} /* a table cell ignores calc(50% + 12px), so the cell takes the gap as padding */
@media (max-width:760px){
  .blocks{grid-template-columns:minmax(0,1fr)}
  .bigsteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-block:20px;font-size:1rem}
}
@media (max-width:480px){
  /* A card of product UI runs from guide line to guide line, so a certificate keeps its phone width (D10nb). */
  .wash{margin-inline:calc(-1 * clamp(16px,2vw,24px));padding:16px 0;border-radius:0}
  /* The table stacks: the name takes the row, the unit and the cadence stand under it (section 5, as the share table). */
  .settab,.settab thead,.settab tbody{display:block}
  .settab tr{display:grid;grid-template-columns:2fr 3fr;column-gap:16px;padding:9px 0;border-bottom:1px solid var(--rule)}
  .settab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* each row shows its own unit and cadence; a screen reader keeps the heads (D10qi) */
  .settab th,.settab td{padding:0;border:0;width:auto}
  .settab :is(th,td):first-child{grid-column:1/-1;width:auto}
  .settab td:first-child{margin-bottom:2px}
  .flow>.mail,.flow>.find .mail{flex-direction:column}
  .flow>.mail .go,.flow>.find .mail .go{justify-content:center;padding:14px 24px}
}
@media (prefers-reduced-motion:reduce){.mail .go .arr,.thanks{animation:none!important}.flow{transition:none}}
[hidden]{display:none!important} /* a grid or a flex rule must not show what the script hides */