/* Version 2: the one-minute brief, results-first value and the "show more" buttons. Page tokens from version-beauty/style.css. */

/* in one minute */
.sec-brief { padding-top: clamp(4rem, 7vw, 6rem); }
.br-h { margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); }
.br-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.br-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.4rem 1.3rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); }
.br-card.acc { background: linear-gradient(160deg, rgb(var(--d-rgb) / .14), var(--surface) 60%); border-color: rgb(var(--d-rgb) / .35); }
.br-top { display: flex; align-items: center; gap: .55rem; }
.br-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.br-top .ph-light { font-size: 18px; color: var(--d); }
.br-top small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.br-card b { font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.br-card.acc b { font-family: var(--mono); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -.04em; color: var(--d); }
.br-card.acc b small { margin-left: .5rem; font-family: var(--font); font-size: 15px; letter-spacing: 0; color: var(--ink-2); }
.br-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.br-link { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--d-ink); font-size: 14px; text-decoration: none; }
.br-link .ph-light { transition: transform 300ms var(--ease); } .br-link:hover .ph-light { transform: translateY(2px); }

/* value: the three results first */
.vl-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.vl-sum > div { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.5rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.vl-sum b { font-family: var(--mono); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.05em; line-height: 1; color: var(--d); }
.vl-sum > div:last-child b { color: var(--ink); }
.vl-sum span { font-size: 14px; color: var(--ink-2); }

/* show more */
.pg-more-btn { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; height: 44px; padding: 0 18px 0 20px; border-radius: var(--pill); border: 1px solid var(--line-2); background: rgb(255 255 255 / .04); color: var(--ink); font: inherit; font-size: 14.5px; cursor: pointer; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); }
.pg-more-btn:hover { background: rgb(255 255 255 / .08); }
.pg-more-btn .ph-light { font-size: 15px; transition: transform 400ms var(--ease); }
.pg-more-btn[aria-expanded="true"] .ph-light { transform: rotate(180deg); }
.pg-more-btn:focus-visible { outline: 2px solid var(--d); outline-offset: 3px; }
.pg-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease); }
.pg-more > div { min-height: 0; overflow: hidden; }
.pg-more.open { grid-template-rows: 1fr; }
.pg-more > div > :first-child { margin-top: 1rem; }

@media (max-width: 1100px) { .br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .br-grid, .vl-sum { grid-template-columns: 1fr; }
  .pg-more-btn { width: 100%; justify-content: space-between; }
}

/* guide through the demo: a bouncing pointer at the next click */
.has-nudge { position: relative; z-index: 4; overflow: visible; }
.nudge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem .4rem .6rem; border-radius: var(--pill); background: var(--d); color: var(--on-d); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 28px -10px rgb(var(--d-rgb) / .8); }
.nudge .ph-light { font-size: 15px; }
.nudge[data-dir="left"] { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); animation: nudge-x 1.1s ease-in-out infinite; }
.nudge[data-dir="up"] { top: calc(100% + 14px); left: 50%; transform: translateX(-50%); animation: nudge-y 1.1s ease-in-out infinite; }
.nudge[data-dir="down"] { bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); animation: nudge-y 1.1s ease-in-out infinite reverse; }
@keyframes nudge-x { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }
@keyframes nudge-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
.auto-note { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .35rem .8rem; border-radius: var(--pill); background: rgb(var(--d-rgb) / .1); border: 1px solid rgb(var(--d-rgb) / .3); font-size: 13px; color: var(--ink-2); }
.auto-note .ph-light { color: var(--d); } .auto-note a { color: var(--d-ink); }
@media (max-width: 760px) {
  .nudge[data-dir="left"] { left: 50%; top: calc(100% + 14px); transform: translateX(-50%); animation-name: nudge-y; }
  .nudge[data-dir="left"] .ph-light { rotate: 90deg; }
  #sample-all.has-nudge { margin-bottom: 2.8rem; } /* room for the pointer above the panels */
  .auto-note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } }