/* The answer screen ('/'): docs/design/2026-09-redesign/answer/build.py's
 * TODAY_CSS, on family.css's tokens and shared pieces. The sky is tinted by
 * the verdict (body.v-g / body.v-n); at most two lines sit between the price
 * and the button. */
.page{max-width:600px}
/* the sky: tinted by the verdict, no card around the answer */
.sky{position:absolute;left:0;right:0;top:0;height:820px;z-index:0;pointer-events:none;
  background:radial-gradient(90% 55% at 50% 0%,var(--sky2) 0%,transparent 100%),
    linear-gradient(180deg,var(--sky) 0%,var(--sky) 38%,var(--ground) 100%)}
body.v-n{--sky:#e4e5ea;--sky2:#f6f6f8}
/* at night the sky is a soft glow behind the verdict, gone to black by the
   price: the green words and the check carry the hue, not the wall */
@media (prefers-color-scheme:dark){
  .sky{height:520px;background:radial-gradient(ellipse 78% 250px at 50% 70px,rgba(48,209,88,.24) 0%,rgba(48,209,88,.08) 52%,transparent 100%)}
  body.v-n .sky{background:radial-gradient(ellipse 78% 250px at 50% 70px,rgba(255,255,255,.09) 0%,transparent 100%)}
}
.hero{text-align:center;padding:30px 4px 0}
.verdict{display:inline-flex;align-items:center;gap:.3em;font-size:1.75rem;font-weight:700;letter-spacing:-.024em;line-height:1.15}
.verdict.go{color:var(--go)}
.verdict svg.g{width:1em;height:1em;vertical-align:0}
.route{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;margin-top:14px;line-height:1.25}
.when{color:var(--ink2);margin-top:2px}
.price{font-size:min(27vw,6.75rem);font-weight:600;letter-spacing:-.055em;line-height:1;margin-top:18px;
  font-variant-numeric:tabular-nums}
.price .cur{font-size:.5em;letter-spacing:-.02em;margin-left:.1em}
.price .cur.pre{font-size:.6em;margin:0 .04em 0 0}
.pp{color:var(--ink2);margin-top:8px}
.usual{color:var(--ink2)}
.usual .cap{margin-left:8px}
/* under the button: one evidence claim, then the money for two and the risk */
.after{margin-top:14px}
.cl{color:var(--ink2);max-width:24em;margin:2px auto 0;text-wrap:balance}
.cl.risk{color:var(--ink);margin-top:10px;max-width:22em}
.cl.risk svg.gi{vertical-align:-.16em}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:10px 8px;margin-top:2px;min-height:44px}
.more svg.chev{color:var(--ink2)}
.top-pill{text-align:center;margin-top:12px}
.links{margin-top:28px}
@media (max-width:359px){
  .when .n{display:block}.when .sep{display:none}
  .verdict{font-size:1.375rem}
  .row{grid-template-areas:"rr rr" "rd rp" "rv rv" "ro ro"}
  .rp{margin-top:1px}
}
/* with very large text on a narrow phone the dates no longer fit beside the
   price ("7 ian. 2027" broke as "2 / 027"): the price takes its own line
   under the route, its chevron at the row's end (F3) */
.others .group>li{container:row/inline-size}
@container row (max-width:10em){
  .row{grid-template-columns:minmax(0,1fr);grid-template-areas:"rr" "rp" "rd" "rv" "ro"}
  .rp{justify-content:space-between;margin-top:1px}
}
@media (min-width:960px){
  .page{max-width:1080px}
  .sky{height:960px}
  .bar{padding-top:18px}
  .hero{padding-top:64px}
  .verdict{font-size:2.125rem}
  .route{font-size:1.75rem;margin-top:18px}
  .when{margin-top:4px}
  .price{font-size:9.5rem;margin-top:26px}
  .cta{max-width:340px;margin-top:30px}
  .sec-h{margin:84px 0 16px;font-size:1.75rem;text-align:center}
  /* sized to its content and centred on the hero's axis: two cards or three */
  .others .group{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,346px));justify-content:center;gap:20px;background:none;border-radius:0;overflow:visible}
  .others .group>li{background:var(--card);border-radius:var(--r)}
  .others .group>li::before{display:none}
  /* the cards of a row stand equally tall, a caveat line or not; the row
     fills its card, so all of it is the link, its lines kept at the top */
  .others .row{padding:20px 22px 21px 24px;border-radius:var(--r);height:100%;align-content:start}
  .links{margin-top:32px}
  .links .group{display:flex;justify-content:center;gap:36px;background:none;overflow:visible}
  .links .group>li::before{display:none}
  .links .lrow{min-height:44px;padding:8px 4px;gap:8px;background:none}
  .links .lrow .s{display:none}
  .links .lrow svg.chev{color:var(--ink2)}
}
@media (min-width:960px) and (prefers-color-scheme:dark){
  .sky{height:640px;background:radial-gradient(ellipse 34% 290px at 50% 130px,rgba(48,209,88,.22) 0%,rgba(48,209,88,.07) 55%,transparent 100%)}
  body.v-n .sky{background:radial-gradient(ellipse 34% 290px at 50% 130px,rgba(255,255,255,.08) 0%,transparent 100%)}
}
/* --- beyond the mockup --------------------------------------------------- */
/* route_order's pointer: one quiet line under the hero when another route has the deal */
.pointer{text-align:center;margin-top:14px}
.pointer a{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);min-height:44px;padding:10px 8px}
.pointer svg.chev{color:var(--ink2)}
/* the error state's retry and the too-short state's way back, under the sentence */
.none .more{margin-top:14px}
.foot p+p{margin-top:8px}
/* the owner's link, shown only to the owner's browser */
.foot a{text-decoration:underline;text-underline-offset:3px}