/* Second Page — all-in-one suite.
   Sizes in --su units against the 1536x1024 reference (1px = 0.0651 units).
   --su was plain 1vw; the owner found the frames oversized ("太大 看了不舒服",
   2026-07-25), then the first shrink's side gutters too empty — the unit
   (defined on .second below) is the single knob that settled both. The
   content columns are capped at 89.6 units and centred, in the container
   rule at the bottom of this file. second-tools.css shares the unit (its
   blocks live inside .second and inherit it). */

/* Taller than one screen since the "second page new" reference: the two
   studios are followed by a row of four tool cards, and pinning all of that
   to 100vh would crush both. The page scrolls; only the stage is pinned. */
.second {
  /* The page unit. First pass shrank the board 15% (0.85vw, cap 13.1px) but
     on a ~1900px screen that left ~360px of dead black either side — the
     owner flagged the gutters next. 0.95vw / 15px is the middle: the board
     renders 5% under the reference below 1579px and freezes there above it,
     which puts the content at ~71% of a 1900px screen — wide enough to own
     the page, small enough to keep the calm scale. */
  --su: min(0.95vw, 15px);
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Top padding clears the fixed site header — the badge and headline were
     rendering underneath it. */
  padding: calc(9.6 * var(--su)) calc(5.21 * var(--su)) calc(2.6 * var(--su));
  background: radial-gradient(120% 80% at 50% 0%, #100d0a 0%, #070605 62%, #050404 100%);
  font-family: var(--font-ui);
}

.flourish {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.flourish--tr {
  top: 0;
  right: 0;
  width: 42%;
}

.flourish--bl {
  bottom: 0;
  left: 0;
  width: 34%;
  opacity: 0.75;
}

/* ---- Head -------------------------------------------------------- */

.second__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}

.second__badge {
  display: inline-flex;
  align-items: center;
  height: calc(2.15 * var(--su));
  min-height: 26px;
  padding: 0 calc(1.17 * var(--su));
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: calc(0.78 * var(--su));
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.second__headline {
  margin: calc(1.43 * var(--su)) 0 0;
  font-family: var(--font-display);
  font-size: calc(3.52 * var(--su));
  font-weight: 400;
  line-height: 1.15;
  color: var(--cream);
}

.second__headline em {
  font-style: italic;
  color: var(--gold);
}

.second__sub {
  margin: calc(0.85 * var(--su)) 0 0;
  font-size: calc(1.107 * var(--su));
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Studio panels ------------------------------------------------ */

.studios {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(1.82 * var(--su));
  margin-top: calc(3.6 * var(--su));
  flex: 1;
  min-height: 0;
}

.studio {
  display: flex;
  flex-direction: column;
  padding: calc(2.08 * var(--su));
  border: 1px solid rgba(201, 160, 99, 0.24);
  border-radius: calc(1.43 * var(--su));
  background: linear-gradient(150deg, rgba(30, 25, 20, 0.5) 0%, rgba(12, 10, 8, 0.72) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 0;
}

.studio__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: calc(1.5 * var(--su));
  flex-shrink: 0;
}

.studio__tile {
  display: grid;
  place-items: center;
  width: calc(4.23 * var(--su));
  height: calc(4.23 * var(--su));
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(201, 160, 99, 0.3);
  border-radius: calc(1.04 * var(--su));
  background: rgba(201, 160, 99, 0.07);
  color: var(--gold);
}

.studio__tile .icon {
  width: calc(2.02 * var(--su));
  min-width: 21px;
}

.studio__title {
  margin: calc(0.36 * var(--su)) 0 0;
  font-size: calc(1.237 * var(--su));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.studio__desc {
  margin: calc(0.72 * var(--su)) 0 0;
  font-size: calc(0.977 * var(--su));
  font-weight: 300;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
}

.studio__go {
  display: grid;
  place-items: center;
  width: calc(3.65 * var(--su));
  height: calc(3.65 * var(--su));
  /* 44px is the accessible minimum for a touch target; it was 38. */
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: 1px solid rgba(201, 160, 99, 0.32);
  border-radius: 50%;
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
  /* Colour and border only — a scale transform here would nudge the header
     row and make the whole card twitch on hover. */
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
    color 200ms var(--ease);
}

.studio__go:hover {
  background: rgba(201, 160, 99, 0.1);
  border-color: rgba(201, 160, 99, 0.55);
  color: var(--gold-bright);
}

.studio__go:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.studio__go .icon {
  width: calc(1.37 * var(--su));
  min-width: 15px;
}

/* Feature list beside the media tile */

/* Explicit height taken from the reference (260px of its 1402 width =
   18.5 units), not flex-driven: the section grew to auto height, which left
   `flex: 1` nothing to fill and collapsed the body to 140px — media small,
   feature rows crushed to half the reference's pitch. */
.studio__body {
  display: grid;
  grid-template-columns: minmax(0, 247fr) minmax(0, 350fr);
  gap: calc(1.17 * var(--su));
  margin-top: calc(1.6 * var(--su));
  height: calc(18.5 * var(--su));
  min-height: 210px;
}

.feats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feat {
  display: flex;
  align-items: center;
  gap: calc(0.86 * var(--su));
}

/* The tile was 46px against a 13px title — a 3.5x ratio, so the icon
   overpowered the label it exists to mark. Brought to roughly 2.4x, which
   is where a labelled list item reads as text-with-an-icon rather than
   icon-with-a-caption. The glyph keeps its 45% share of the tile so it does
   not end up rattling around inside a smaller box. */
.feat__tile {
  display: grid;
  place-items: center;
  width: calc(2.52 * var(--su));
  height: calc(2.52 * var(--su));
  min-width: 30px;
  min-height: 30px;
  flex-shrink: 0;
  /* Softer than before: the border was competing with the card's own edge.
     A faint wash plus a hairline reads as a container without shouting. */
  border: 1px solid rgba(201, 160, 99, 0.18);
  border-radius: calc(0.62 * var(--su));
  background: rgba(201, 160, 99, 0.045);
  color: var(--gold);
}

.feat__tile .icon {
  width: calc(1.15 * var(--su));
  min-width: 14px;
}

.feat__text {
  display: flex;
  flex-direction: column;
  gap: calc(0.12 * var(--su));
  min-width: 0;
}

/* Nudged up as the tile came down, so the pair rebalances rather than both
   simply shrinking. */
.feat__title {
  font-size: calc(1.09 * var(--su));
  font-weight: 500;
  letter-spacing: 0.002em;
  color: var(--white);
}

.feat__sub {
  font-size: calc(0.86 * var(--su));
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

/* Media tile — neutral fills stand in until the real stills arrive. */

.media {
  position: relative;
  border-radius: calc(0.91 * var(--su));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Zoomed in past `cover` so the villa fills the well with the house rather
   than the dark pool foreground; biased upward to keep the building. */
.media--villa {
  background-image: url('/luxury%20house%20for%20landing%20page.png');
  background-size: 129% auto;
  background-position: 50% 34%;
}

.media--presenter {
  /* Generated still; the gradient stays underneath as the loading and
     failure fallback. Zoomed in so the room centre fills the well instead of
     the dark curtains on the left and shelving on the right. The gradient
     layer keeps `cover` so the fallback still covers. */
  background-image: url('/gen/creator-media.jpg'), linear-gradient(165deg, #2a2119 0%, #14100c 100%);
  background-size: 150% auto, cover;
  background-position: 50% 52%, center;
}

.media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: calc(3.9 * var(--su));
  height: calc(3.9 * var(--su));
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--white);
}

.media__play .icon {
  width: calc(1.43 * var(--su));
  min-width: 15px;
}

/* Waveform behind the presenter */
/* A strip along the photo's bottom edge, as the reference has it — not a
   band across the middle. */
.media__wave {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 5%;
  height: calc(2 * var(--su));
  background: repeating-linear-gradient(
    to right,
    rgba(230, 200, 143, 0.55) 0 2px,
    transparent 2px 7px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  opacity: 0.8;
}

/* Expand chip in the lower-right corner, per the reference. */
.media__chip {
  position: absolute;
  right: 4%;
  bottom: 12%;
  display: grid;
  place-items: center;
  width: calc(2.86 * var(--su));
  height: calc(2.86 * var(--su));
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(201, 160, 99, 0.5);
  background: rgba(20, 16, 12, 0.7);
  color: var(--gold-bright);
}

.media__chip .icon {
  width: calc(1.17 * var(--su));
  min-width: 13px;
}

/* Summary strip */

.studio__strip {
  display: flex;
  align-items: center;
  gap: calc(1.24 * var(--su));
  margin-top: calc(1.7 * var(--su));
  padding: calc(1.04 * var(--su)) calc(1.3 * var(--su));
  border: 1px solid rgba(201, 160, 99, 0.18);
  border-radius: calc(0.78 * var(--su));
  background: rgba(201, 160, 99, 0.045);
  flex-shrink: 0;
}

.strip__spark {
  color: var(--gold);
  display: grid;
  place-items: center;
}

.strip__spark .icon {
  width: calc(1.63 * var(--su));
  min-width: 17px;
}

.strip__text {
  display: flex;
  flex-direction: column;
  gap: calc(0.2 * var(--su));
  min-width: 0;
}

.strip__title {
  font-size: calc(1.042 * var(--su));
  font-weight: 500;
  color: var(--gold-bright);
}

.strip__sub {
  font-size: calc(0.911 * var(--su));
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Built for ---------------------------------------------------- */

/* Sits between the tool row and the vision showcase as a breathing line —
   the two dense card groups were stacked edge to edge, and this light row
   of chips is what separates them. The margins are deliberately generous:
   it is the only air in the lower half of the page. */
.builtfor {
  position: relative;
  z-index: 1;
  margin: calc(5.8 * var(--su)) 0 calc(4.2 * var(--su));
  flex-shrink: 0;
}

.builtfor__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.72 * var(--su));
  margin: 0;
  font-size: calc(0.78 * var(--su));
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.builtfor__label i {
  width: calc(0.26 * var(--su));
  height: calc(0.26 * var(--su));
  min-width: 3px;
  min-height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

.builtfor__row {
  display: flex;
  justify-content: center;
  gap: calc(1.17 * var(--su));
  margin-top: calc(1.24 * var(--su));
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(0.65 * var(--su));
  height: calc(3.26 * var(--su));
  min-height: 36px;
  padding: 0 calc(1.43 * var(--su));
  border: 1px solid rgba(201, 160, 99, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.022);
  font-size: calc(1.042 * var(--su));
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.chip .icon {
  width: calc(1.3 * var(--su));
  min-width: 14px;
  color: var(--gold);
}

/* ---- Content column ------------------------------------------------ */

/* Every block on the page shares one centred column. Without the cap the
   1fr grids stretched the cards across whatever the viewport offered, which
   is what made the frames read as oversized on wide screens. 89.6 units is
   the reference's content width (1376px / 15.36px-per-unit), so the column
   is always a proportionally exact rendering of the design board at
   whatever the unit resolves to — 1344px once the 15px cap binds. */
.second__head,
.studios,
.tools4,
.builtfor,
.vision3 {
  width: 100%;
  max-width: calc(89.6 * var(--su));
  margin-inline: auto;
}

/* Motion preference. The hover transitions above are the only animation on
   this page; honour a reader who has asked for none. */
@media (prefers-reduced-motion: reduce) {
  .studio__go {
    transition: none;
  }
}