/* Help, terms, privacy, the forms and the style guide: a quiet page head on the bare linen, a
   narrow column on frosted glass, form fields. Colors, fonts and shapes from brand.css only. */
.narrow{max-width:760px}
.page-head{padding:clamp(48px,9vw,110px) 0 clamp(36px,6vw,64px)}
.page-head h1{font-size:clamp(40px,7vw,72px);line-height:1.03;letter-spacing:-.02em;margin-top:16px}
.page-head h1 em{color:var(--brand-ink-2)}
.page-body{padding:clamp(36px,6vw,72px) 0 clamp(60px,9vw,110px);background:var(--brand-glass-frost)}

/* help */
.hgroup + .hgroup{margin-top:44px}
.hgroup-title{font:600 12px/1.4 var(--brand-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink-2);margin:0 0 6px}
.help-cards{display:grid;gap:18px;margin-top:56px}
.hcard{background:var(--brand-card);border:1px solid var(--brand-rule);border-radius:var(--brand-radius-lg);padding:26px 24px}
.hcard h2{font-size:32px;margin:0 0 8px}
.hcard p{color:var(--brand-ink-2);margin-bottom:18px}
@media (min-width:760px){.help-cards{grid-template-columns:1fr 1fr}}

/* terms and privacy */
.lsec + .lsec{margin-top:38px}
.lsec h2{font-size:clamp(26px,3.6vw,34px);line-height:1.15;margin:0 0 12px;display:flex;gap:14px;align-items:baseline}
.lsec h2 .num{font:600 12px/1 var(--brand-font-ui);letter-spacing:.16em;color:var(--brand-accent)}
.lsec p{max-width:62ch}
.lsec p + p{margin-top:12px}

/* forms */
.form-box{background:var(--brand-card);border:1px solid var(--brand-rule);border-radius:var(--brand-radius-lg);padding:clamp(22px,4vw,36px);display:grid;gap:22px;box-shadow:var(--brand-shadow)}
.fields{display:grid;gap:22px}
.field{display:grid;gap:8px;border:0}
.field .lbl,.field legend{font:500 var(--brand-text)/1.35 var(--brand-font-ui)}
.field legend{margin-bottom:8px}
.opt,.hint{font-weight:400;color:var(--brand-ink-2)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field textarea{
  width:100%;min-height:52px;padding:12px 14px;font:400 var(--brand-text)/1.4 var(--brand-font-ui);color:var(--brand-ink);
  background:var(--brand-paper);border:1px solid var(--brand-line);border-radius:var(--brand-radius);appearance:none}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand-accent);outline-offset:1px;border-color:var(--brand-accent)}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:var(--brand-tap)}
.check input{width:24px;height:24px;margin-top:1px;flex:none;accent-color:var(--brand-ink)}
.star-row{display:flex;gap:4px}
.star{position:relative;display:grid;place-items:center;width:52px;height:52px;cursor:pointer;color:var(--brand-ink-2)}
.star:not(.lit) .star-ico svg{opacity:.4}
.star input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.star-ico svg{width:36px;height:36px;fill:currentColor;display:block;transition:color .15s,transform .15s}
.star.lit{color:var(--brand-accent)}
.star:has(input:focus-visible){outline:2px solid var(--brand-accent);border-radius:var(--brand-radius)}
.msg{min-height:1.6em;color:var(--brand-ink-2)}
.msg:empty{display:none}
.msg.bad{color:var(--brand-danger)}
.form-box .btn{justify-self:start;min-width:160px}
.bot:empty{display:none}
.thanks{background:var(--brand-card);border:1px solid var(--brand-rule);border-radius:var(--brand-radius-lg);padding:clamp(22px,4vw,36px)}
.thanks h2{margin:0 0 10px;font-size:clamp(32px,5vw,48px)}
.thanks p{color:var(--brand-ink-2)}

/* style guide */
.sg + .sg{margin-top:56px}
.sg-title{font:600 12px/1.4 var(--brand-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink-2);margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--brand-rule)}
.sg-row{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center}
.sg-h1{font:400 clamp(38px,6vw,68px)/1.03 var(--brand-font-body);letter-spacing:-.02em;margin:14px 0}
.sg-h2{font:400 clamp(30px,4vw,44px)/1.1 var(--brand-font-body);margin:0 0 14px}
.sg-h1 em,.sg-h2 em{display:block;font-weight:300;color:var(--brand-ink-2)}
.sg-card{background:var(--brand-card);border-radius:var(--brand-radius-lg);padding:24px;box-shadow:var(--brand-shadow)}
.sg-card h3{font:400 26px/1.15 var(--brand-font-body);margin-bottom:6px}
.sg-marks svg.h{width:71px;height:66px}
.sg-marks .bars{width:60px;height:46px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.swatch .chip{display:block;height:64px;border-radius:var(--brand-radius-md);border:1px solid var(--brand-rule)}
.swatch figcaption{margin-top:6px;font-weight:500}
.swatch small{display:block;font-weight:400;color:var(--brand-ink-2)}
.sw-paper{background:var(--brand-paper)}.sw-panel{background:var(--brand-panel)}.sw-card{background:var(--brand-card)}
.sw-ink{background:var(--brand-ink)}.sw-ink-2{background:var(--brand-ink-2)}.sw-line{background:var(--brand-line)}
.sw-accent{background:var(--brand-accent)}.sw-accent-ink{background:var(--brand-accent-ink)}.sw-accent-big{background:var(--brand-accent-big)}
.sw-quiet{background:var(--brand-quiet)}.sw-dark{background:var(--brand-dark)}.sw-on-dark{background:var(--brand-on-dark)}
.sw-on-dark-2{background:var(--brand-on-dark-2)}.sw-accent-on-dark{background:var(--brand-accent-on-dark)}.sw-frame{background:var(--brand-frame)}
.sw-danger{background:var(--brand-danger)}.sw-ok{background:var(--brand-ok)}