/* ============================================================
   AGENT QUESTIONNAIRE, framelogic.media/questionnaire
   ------------------------------------------------------------
   Same tokens as styles.css and booth.css: paper, sage, green
   and gold, 3px corners. Montserrat for anything structural,
   Inter to read, JetBrains Mono for the small labels. Light only,
   because the site is light only.

   Mobile first. Most agents open this from a text message, so
   every control is at least 48px tall and inputs are 16px or
   larger so iOS never zooms the page.
   ============================================================ */

:root{
  --green:#627C58; --green-deep:#42553B; --green-ink:#26301F;
  --sage:#E9EDE4; --sage-2:#DDE4D5;
  --paper:#FAFAF6; --white:#FFFFFF;
  --text:#232921; --mute:#6C7367;
  --line:rgba(38,48,31,0.12); --line-2:rgba(38,48,31,0.22);
  --amber:#C99A5B; --amber-deep:#A87735; --amber-ink:#8A6224;
  --amber-soft:#F5E6CE; --amber-wash:#FFFBF3;
  --clay:#B4674A;
  --radius:3px;
  --shadow:0 24px 60px -24px rgba(38,48,31,0.22);
  --shadow-gold:0 24px 60px -24px rgba(168,119,53,0.35);
  --display:'Montserrat',"Helvetica Neue",Arial,sans-serif;
  --body:'Inter',"Helvetica Neue",Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%2342553B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%2326301F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 10% -120px, rgba(245,230,206,.55), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(233,237,228,.8), transparent 70%),
    var(--paper);
  background-repeat:no-repeat;
  color:var(--text);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0}
p{margin:0}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--amber);color:#fff}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

.q-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.q-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}

/* ---------------- header + progress ---------------- */
.q-top{
  position:sticky;top:0;z-index:40;
  background:rgba(250,250,246,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.q-top-in{
  max-width:720px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px 12px;
}
.q-logo{
  font:800 21px/1 var(--display);letter-spacing:-.022em;color:var(--green-ink);
  text-decoration:none;display:inline-flex;align-items:baseline;white-space:nowrap;
}
.q-logo span{color:var(--green)}
.q-logo small{
  font:500 9px/1 var(--mono);letter-spacing:.2em;color:var(--amber-deep);margin-left:3px;
}
.q-logo-sm{font-size:16px}
.q-office{
  display:inline-flex;align-items:center;gap:8px;min-width:0;
  font:500 10.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.q-office i{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
/* the flex box itself cannot ellipsis; its text can */
.q-office > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.q-progress{height:3px;background:var(--sage-2)}
.q-progress i{
  display:block;height:100%;width:3%;
  background:linear-gradient(90deg,var(--green),var(--amber));
  transition:width .55s cubic-bezier(.2,.8,.25,1);
}

/* ---------------- frame + card ---------------- */
.q-main{max-width:720px;margin:0 auto;padding:18px 16px 26px}
.q-frame{
  position:relative;padding:2px;border-radius:12px;
  background:linear-gradient(125deg,var(--green-deep) 0%,var(--green) 45%,var(--amber) 100%);
  box-shadow:var(--shadow);
}
.q-card{
  position:relative;background:var(--paper);border-radius:10px;
  padding:28px 22px 24px;overflow:hidden;
}
.q-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 260px at 0% 0%, var(--amber-wash), transparent 70%),
    radial-gradient(460px 280px at 100% 100%, var(--sage), transparent 70%);
}
.q-card > *{position:relative}

/* viewfinder corners */
.q-card > .q-corner{
  position:absolute;width:15px;height:15px;border:2px solid var(--amber);
  opacity:.85;pointer-events:none;
}
.q-card > .q-tl{top:9px;left:9px;border-right:0;border-bottom:0}
.q-card > .q-tr{top:9px;right:9px;border-left:0;border-bottom:0}
.q-card > .q-bl{bottom:9px;left:9px;border-right:0;border-top:0}
.q-card > .q-br{bottom:9px;right:9px;border-left:0;border-top:0}

/* the small label row at the top of every card */
.q-hud{
  display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;
  margin-bottom:20px;
  font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.q-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--green-deep);min-width:0}
.q-eyebrow::before{content:"";flex:0 0 22px;height:1.5px;background:var(--amber)}
.q-eyebrow::after{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.q-time{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.q-rec{display:none;width:7px;height:7px;border-radius:50%;background:var(--clay)}
.q-time.rec .q-rec,.q-rec.q-rec-on{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .q-time.rec .q-rec{animation:qBlink 1.6s steps(2,start) infinite}
}
@keyframes qBlink{to{visibility:hidden}}

/* ---------------- type ---------------- */
.q-h1{
  font:800 clamp(32px,9vw,50px)/1.03 var(--display);letter-spacing:-.025em;
  color:var(--green-ink);text-wrap:balance;
}
.q-h2{
  font:800 clamp(25px,6.9vw,34px)/1.13 var(--display);letter-spacing:-.02em;
  color:var(--green-ink);text-wrap:balance;
}
.q-h3{font:800 19px/1.25 var(--display);letter-spacing:-.01em;color:var(--green-ink);margin-top:30px}
.q-gold{
  background:linear-gradient(100deg,var(--green-deep) 0%,var(--amber-deep) 30%,var(--amber) 62%,#E3C48F 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.q-lede{font-size:17px;line-height:1.6;margin-top:16px;max-width:52ch}
.q-hint{font-size:15.5px;line-height:1.55;color:var(--mute);margin-top:10px}
.q-back-note{
  margin-top:14px;font-size:14.5px;color:var(--green-deep);
  padding:10px 13px;background:var(--sage);border-radius:var(--radius);
}

.q-pill{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:8px 12px 8px 10px;border-radius:999px;
  background:var(--amber-soft);color:var(--amber-ink);
  font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}
.q-pill svg{width:14px;height:14px;flex:0 0 auto}

/* ---------------- welcome ---------------- */
.q-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.q-tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 14px 13px;display:flex;flex-direction:column;gap:6px;min-width:0;
}
.q-tile .k{font:500 10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber-ink)}
.q-tile b{font:800 18px/1.2 var(--display);color:var(--green-ink);letter-spacing:-.01em}
.q-tile em{font-style:normal;font-size:13.5px;line-height:1.35;color:var(--mute)}
.q-tile-dark{background:var(--green-ink);border-color:var(--green-ink)}
.q-tile-dark .k{color:var(--amber)}
.q-tile-dark b{color:var(--paper)}
.q-tile-dark em{color:#C9D2C2}

.q-ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.q-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5}
.q-ticks li::before{
  content:"";flex:0 0 20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--sage) var(--tick) center/12px no-repeat;
}
.q-ticks li > span{min-width:0}
.q-ticks b{font-family:var(--display);font-weight:700;color:var(--green-ink)}

/* ---------------- fields ---------------- */
.q-field{margin-top:18px;display:flex;flex-direction:column;gap:7px}
.q-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font:700 14.5px/1.35 var(--display);color:var(--green-ink);
}
.q-opt{
  flex:0 0 auto;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.q-input,.q-area{
  display:block;width:100%;
  font:400 17px/1.4 var(--body);color:var(--text);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:14px;min-height:54px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.q-input:focus,.q-area:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(98,124,88,.15)}
.q-input::placeholder,.q-area::placeholder{color:#9AA094;opacity:1}
.q-area{min-height:136px;resize:none;line-height:1.5;margin-top:20px;overflow:hidden}
.q-field .q-area{margin-top:0}
.q-area-sm{min-height:96px}
.q-input.needs,.q-signature.needs{border-color:var(--amber);box-shadow:0 0 0 3px rgba(201,154,91,.2)}
.q-check.needs{border-color:var(--amber);box-shadow:0 0 0 3px rgba(201,154,91,.2)}
.q-nudge{
  display:flex;gap:8px;align-items:flex-start;
  font-size:14.5px;line-height:1.45;color:var(--amber-ink);margin-top:2px;
}
.q-nudge::before{content:"";flex:0 0 6px;height:6px;margin-top:7px;border-radius:50%;background:var(--amber)}
.q-count{margin-top:6px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute);text-align:right}

/* social handles: one row each, the network named on the left */
.q-handles{border:0;margin:26px 0 0;padding:0;min-width:0}
.q-handles legend{padding:0;width:100%;margin-bottom:10px}
.q-hgrid{display:grid;grid-template-columns:1fr;gap:8px}
.q-hrow{
  display:flex;align-items:stretch;min-height:52px;min-width:0;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius);
  transition:border-color .2s, box-shadow .2s;
}
.q-hrow:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(98,124,88,.15)}
.q-hrow label{
  flex:0 0 102px;display:flex;align-items:center;padding:0 0 0 13px;
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);
  border-right:1px solid var(--line);cursor:pointer;
}
.q-at{display:flex;align-items:center;padding-left:12px;font-size:17px;color:var(--mute)}
.q-hrow input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font:400 16.5px/1.3 var(--body);padding:0 12px;
}
.q-at + input{padding-left:2px}
.q-hrow input::placeholder{color:#9AA094;opacity:1}

/* chips: real checkboxes, styled as big tap targets */
.q-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.q-chip{position:relative;display:inline-flex;max-width:100%}
.q-chip input,.q-opt-card input,.q-check input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.q-chip span{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:11px 15px 11px 13px;
  border:1.5px solid var(--line-2);border-radius:var(--radius);background:var(--white);
  font:600 15px/1.25 var(--display);color:var(--green-ink);cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s, border-color .18s, color .18s, transform .18s;
}
.q-chip span::before{
  content:"";flex:0 0 18px;height:18px;border-radius:3px;border:1.5px solid var(--line-2);
  background:var(--white) center/12px no-repeat;transition:.18s;
}
.q-chip span:hover{border-color:var(--green)}
.q-chip input:checked + span{background:var(--green-ink);border-color:var(--green-ink);color:var(--paper)}
.q-chip input:checked + span::before{background-color:var(--amber);border-color:var(--amber);background-image:var(--tick-ink)}
.q-chip input:focus-visible + span{outline:2px solid var(--amber-deep);outline-offset:2px}
.q-chip span:active{transform:scale(.97)}

/* camera comfort: three big radio cards */
.q-opts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.q-opt-card{position:relative;display:block}
.q-opt-card span{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;
  padding:15px 16px;border:1.5px solid var(--line-2);border-radius:var(--radius);
  background:var(--white);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.q-opt-card span:hover{border-color:var(--green)}
.q-opt-card b{grid-column:1;font:700 17px/1.25 var(--display);color:var(--green-ink)}
.q-opt-card em{grid-column:1;font-style:normal;font-size:14px;line-height:1.4;color:var(--mute)}
.q-opt-card i{
  grid-column:2;grid-row:1 / span 2;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--line-2);background:var(--white);transition:.18s;
}
.q-opt-card input:checked + span{border-color:var(--green);background:var(--sage);box-shadow:inset 4px 0 0 var(--green)}
.q-opt-card input:checked + span i{border:7px solid var(--green)}
.q-opt-card input:focus-visible + span{outline:2px solid var(--amber-deep);outline-offset:2px}
.q-opt-card span:active{transform:scale(.99)}

.q-callout{
  margin-top:16px;padding:12px 15px;font-size:14.5px;line-height:1.5;
  border-left:3px solid var(--amber);background:var(--amber-wash);
  border-radius:0 var(--radius) var(--radius) 0;
}

/* ---------------- release ---------------- */
.q-release{
  margin-top:18px;padding:18px 18px 6px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  font-size:14.5px;line-height:1.62;color:var(--text);
  /* the full text, in its own scroll box, so the tick box and the
     signature sit on the same screen on a phone */
  max-height:min(380px,40vh);overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* a soft fade at the foot says there is more to read; at the very end it
   sits below the last line, so nothing stays faded */
.q-release::after{
  content:"";position:sticky;bottom:0;display:block;height:26px;margin:-12px -18px 0;
  background:linear-gradient(rgba(255,255,255,0),#fff 80%);pointer-events:none;
}
.q-release:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.q-release h3{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font:800 16px/1.3 var(--display);color:var(--green-ink);
}
.q-release h3::before{content:"";flex:0 0 18px;height:1.5px;background:var(--amber)}
.q-release p{margin:0 0 12px}
.q-release p b{font-family:var(--display);font-weight:700;color:var(--green-ink)}

.q-check{
  position:relative;display:flex;align-items:center;gap:14px;margin-top:16px;
  min-height:60px;padding:14px 16px;cursor:pointer;
  background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--radius);
  font:600 15.5px/1.35 var(--display);color:var(--green-ink);
  -webkit-tap-highlight-color:transparent;transition:background .18s, border-color .18s, box-shadow .18s;
}
.q-check:hover{border-color:var(--green)}
.q-check.on{background:var(--sage);border-color:var(--green)}
.q-box{
  flex:0 0 26px;height:26px;border:2px solid var(--line-2);border-radius:3px;
  background:var(--white) center/16px no-repeat;transition:.18s;
}
.q-check input:checked + .q-box{background-color:var(--green);border-color:var(--green);background-image:var(--tick-white)}
.q-check input:focus-visible + .q-box{outline:2px solid var(--amber-deep);outline-offset:2px}

.q-sign{margin-top:24px}
.q-signature{
  display:block;width:100%;
  font:italic 600 25px/1.2 var(--display);color:var(--green-ink);letter-spacing:-.01em;
  background:transparent;border:0;border-bottom:2px solid var(--green-ink);border-radius:0;
  padding:10px 2px 8px;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.q-signature:focus{border-bottom-color:var(--amber)}
.q-signature::placeholder{color:#B4B9AE;opacity:1}
.q-signmeta{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;
  font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}

/* ---------------- review ---------------- */
.q-review{margin-top:18px;border-top:1px solid var(--line)}
.q-rrow{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;width:100%;
  padding:14px 4px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .18s;
}
.q-rrow:hover{background:rgba(233,237,228,.55)}
.q-rk{grid-column:1;font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink)}
.q-rv{grid-column:1;font-size:15.5px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;white-space:pre-line}
.q-rv strong{font-family:var(--display);font-weight:700;color:var(--green-ink)}
.q-rv .q-sub{display:block;font-size:14px;color:var(--mute)}
.q-rv .q-handle b{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);margin-right:4px}
.q-rv .q-skip{color:var(--amber-ink);font-style:italic}
.q-rv .q-need{color:var(--amber-ink);font-weight:600}
.q-rv .q-ok{color:var(--green-deep);font-weight:600}
.q-rgo{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  font:600 13px/1 var(--display);color:var(--green-deep);
  display:inline-flex;align-items:center;gap:4px;
}
.q-rgo svg{width:14px;height:14px}

/* ---------------- status + nav ---------------- */
.q-status{
  margin-top:18px;padding:13px 15px;border-radius:var(--radius);
  font-size:14.5px;line-height:1.5;
  background:var(--amber-wash);border:1px solid var(--amber-soft);
}
.q-status.retry{background:#FBF2EE;border-color:rgba(180,103,74,.28)}
.q-status b{font-family:var(--display);font-weight:700;color:var(--green-ink)}
.q-status .q-link{font-size:inherit}
/* small text links still get a 44px tall tap area, with no change to the line */
.q-status .q-link,.q-edit .q-link,.q-back-note .q-link{display:inline-block;padding:12px 4px;margin:-12px -4px}

.q-nav{display:flex;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.q-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:0 22px;
  border:1.5px solid transparent;border-radius:var(--radius);
  font:700 16px/1.1 var(--display);text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s cubic-bezier(.2,.8,.25,1), background .2s, box-shadow .2s, border-color .2s, color .2s, filter .2s;
}
.q-btn svg{width:18px;height:18px;flex:0 0 auto}
.q-btn:active{transform:scale(.98)}
.q-back{flex:0 0 auto;padding:0 16px 0 12px;background:transparent;border-color:var(--line-2);color:var(--green-deep)}
.q-back:hover{border-color:var(--green);background:var(--white)}
.q-next{flex:1 1 auto;background:var(--green);color:#fff;box-shadow:0 10px 26px -12px rgba(98,124,88,.9)}
.q-next:hover{background:#6E8A63}
.q-next.skip{background:var(--white);color:var(--green-deep);border-color:var(--green);box-shadow:none}
.q-next.skip:hover{background:var(--sage)}
.q-next.send{
  background:linear-gradient(100deg,var(--amber-deep),var(--amber));
  box-shadow:0 10px 30px -12px rgba(168,119,53,.95);
}
.q-next.send:hover{filter:brightness(1.05)}
.q-next:disabled{opacity:.72;cursor:progress;transform:none}
.q-next.busy svg{display:none}

.q-saved{
  margin-top:12px;text-align:center;
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  opacity:.5;transition:opacity .5s, color .5s;
}
.q-saved.flash{opacity:1;color:var(--green-deep);transition:none}

.q-link{
  background:none;border:0;padding:0;cursor:pointer;
  font:600 1em/1.4 var(--display);color:var(--green-deep);
  text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.q-link:hover{color:var(--amber-ink)}

/* ---------------- done ---------------- */
.q-ticket{
  position:relative;overflow:hidden;margin-top:24px;padding:26px 20px 22px;
  background:var(--green-ink);border-radius:10px;color:var(--paper);box-shadow:var(--shadow);
}
.q-ticket::before,.q-ticket::after{
  content:"";position:absolute;left:0;right:0;height:7px;
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(250,250,246,.2) 10px 20px);
}
.q-ticket::before{top:6px}
.q-ticket::after{bottom:6px}
.q-ticket .k{font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.q-ticket b{display:block;margin-top:10px;font:800 clamp(27px,7.6vw,38px)/1.08 var(--display);letter-spacing:-.02em;color:var(--paper)}
.q-ticket p{margin-top:8px;font-size:15px;color:#D3DACB}
.q-ticket-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.q-btn-gold{
  flex:1 1 210px;color:#fff;
  background:linear-gradient(100deg,var(--amber-deep),var(--amber));
  box-shadow:0 10px 30px -12px rgba(201,154,91,.9);
}
.q-btn-gold:hover{filter:brightness(1.06)}
.q-btn-ghost{flex:1 1 150px;background:transparent;color:var(--paper);border-color:rgba(250,250,246,.32)}
.q-btn-ghost:hover{border-color:var(--paper);background:rgba(250,250,246,.06)}
.q-tbd{color:var(--green-deep)}
.q-ticks-next{margin-top:14px;gap:13px}
.q-edit{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;color:var(--mute)}
.q-edit-alt{display:block;margin-top:14px}

/* ---------------- footer ---------------- */
.q-foot{
  max-width:720px;margin:0 auto;
  padding:4px 20px calc(30px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;
  font-size:13px;color:var(--mute);
}

/* ---------------- motion ---------------- */
.q-screen.in-fwd{animation:qInF .42s cubic-bezier(.2,.8,.28,1) both}
.q-screen.in-back{animation:qInB .42s cubic-bezier(.2,.8,.28,1) both}
.q-done.in-fwd{animation:qInF .5s cubic-bezier(.2,.8,.28,1) both}
@keyframes qInF{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes qInB{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .q-screen.in-fwd,.q-screen.in-back,.q-done.in-fwd{animation:none}
  .q-progress i{transition:none}
}

/* ---------------- larger screens ---------------- */
@media (min-width:620px){
  .q-hgrid{grid-template-columns:1fr 1fr}
  .q-opts{gap:12px}
}
@media (min-width:720px){
  .q-top-in{padding:16px 24px 15px}
  .q-logo{font-size:24px}
  .q-logo-sm{font-size:17px}
  .q-main{padding:44px 24px 34px}
  .q-card{padding:42px 46px 34px}
  .q-card > .q-corner{width:20px;height:20px}
  .q-card > .q-tl{top:14px;left:14px}
  .q-card > .q-tr{top:14px;right:14px}
  .q-card > .q-bl{bottom:14px;left:14px}
  .q-card > .q-br{bottom:14px;right:14px}
  .q-hud{margin-bottom:26px}
  .q-tile b{font-size:20px}
  .q-ticket{padding:30px 28px 26px}
  .q-foot{padding:4px 24px 36px}
}
/* phones: the gold send button keeps its words on one line */
@media (max-width:420px){
  .q-back{padding:0 12px 0 8px;gap:6px}
  .q-next{padding:0 14px}
  .q-next.send svg{display:none}
}
@media (max-width:359px){
  /* 320px phones (Display Zoom, older SE): room for the whole office name */
  .q-top .q-logo small{display:none}
  .q-office{letter-spacing:.12em}
  .q-card{padding:26px 16px 22px}
  .q-hrow label{flex-basis:88px;padding-left:10px;letter-spacing:.08em}
  .q-tiles{grid-template-columns:1fr}
}