/* Express your interest: only what styles.css does not already have. The tokens are styles.css's (the website's). */
/* the two ways in, as the site draws its two audiences: violet across the top for hosts, red for renters */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 40em) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choice { display: flex; flex-direction: column; gap: 10px; min-height: 9.5rem; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--rule); border-top: 3px solid var(--iris-9); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: transform var(--fast), box-shadow .3s var(--ease); }
@media (hover: hover) { .choice:hover { border-color: var(--rule); border-top-color: var(--iris-9); box-shadow: var(--shadow-2); color: var(--ink); transform: translateY(-2px); } }
.choice strong { font: 400 clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem)/1.08 var(--serif); letter-spacing: -.015em; }
.choice span { color: var(--ink-2); font-size: .95rem; }
#apply-choose .choice:nth-child(2), #apply-choose .choice:nth-child(2):hover { border-top-color: var(--red-9); background: linear-gradient(180deg, var(--red-2), var(--surface) 42%); }
fieldset.groups { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r-2); min-width: 0; }
fieldset.groups legend { padding: 0 .4rem; color: var(--ink); font-weight: 600; }
.group-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1.6fr) minmax(0, 1.2fr) 6.5rem auto; gap: 10px; align-items: end; }
@media (max-width: 40em) { .group-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .group-row > button { justify-self: start; } }
.howcheck, .whatdoes { display: flex; flex-direction: column; gap: 8px; padding: .9rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--tint); }
.howcheck h2, .whatdoes h3 { font: 600 1rem/1.3 var(--font); letter-spacing: -.012em; }
.howcheck ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .925rem; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.copy-row { display: flex; gap: 10px; align-items: center; }
.copy-row input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: .8125rem; }
.copy-row button { flex: none; }
.code { padding: .15rem .5rem; border-radius: var(--r-1); background: var(--space-2); color: var(--star); font-size: 1.05rem; letter-spacing: .06em; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs [aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
pre.command { max-height: 14rem; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: .75rem; }
.checks { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .925rem; }
.checks:empty { display: none; }
.estimate-head { font: 400 1.75rem/1.1 var(--serif); letter-spacing: -.015em; }
.privacy-line { color: var(--ink-2); }