/* fashionfy.a77.ch — only what this page adds on top of a77.css.
   Tokens, type, buttons, sections and units all come from a77.css (a copy of
   the main site's file: edit it there, copy it here, bump ?v= in the HTML).

   The one departure from the brand code: this page shows photographs. They
   are the product's output, the way a measured figure is a77's — so they sit
   in plain square frames on the ground colour, no shadow, no radius, and the
   page around them stays monochrome. */

/* Menu links land under the sticky header, not behind it. */
.sec { scroll-margin-top: 72px; }

/* margin, not a space: .head-mark is inline-flex, which drops the whitespace. */
.head-sub { font-weight: 600; color: var(--muted); letter-spacing: -0.01em; margin-left: .28em; white-space: nowrap; }
/* The header stays one line: on a phone the CTA needs the room. */
@media (max-width: 480px) { .head-sub { display: none; } }

/* ---- hero graphic: a hanger, where a77.ch has rings and affiliate a chart -----
   Same stroke language and strength. It lives on the right, crops off the edge
   and fades out before it reaches the text. The hook's end carries the dot. */
.hero-hanger {
  position: absolute; right: -6%; top: 2%; width: min(64vw, 900px); height: auto; max-width: none;
  z-index: 0; color: var(--fg); opacity: .9; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}
.hero-hanger path, .hero-hanger line { vector-effect: non-scaling-stroke; }
@media (max-width: 720px) {
  .hero-hanger {
    top: 8px; right: -70px; width: 200px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 80%);
            mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 80%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-hanger { animation: fade 2.4s var(--ease) both .2s; }
}

/* .hero .ff-h1, not .ff-h1: a77.css sets `.hero h1` for the wordmark. */
.hero .ff-h1, .ff-h1 {
  font-weight: 700; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.92;
  letter-spacing: -0.05em; max-width: 12ch; margin-top: 6px;
}
.hero .hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.hero .hero-cta { margin-top: 4px; }
.hero .hero-facts { position: relative; background: var(--bg); }
@media (max-width: 720px) {
  .hero .idx, .hero .ff-h1 { max-width: 70%; }
  .hero .ff-h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .hero .hero-grid { border-top: 0; }
}

.small { font-size: 13px; }
.label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

/* ---- photo frames: square, hairline, the ground colour behind ---------------- */
.ph { position: relative; margin: 0; background: var(--wash); overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-contain img { object-fit: contain; padding: 8%; background: #fff; }

/* ---- § 01 · one jacket: your photo → the shot → the choices ------------------- */
.look {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(16px, 2.6vw, 40px); align-items: start;
  border-top: 1px solid var(--line-strong); padding-top: clamp(20px, 2.6vw, 32px);
}
.look-src { display: flex; flex-direction: column; gap: 10px; }
.look-src .ph { aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.look-arrow { font-weight: 700; font-size: 2.4rem; letter-spacing: -0.05em; line-height: 1; }
.look-shot { aspect-ratio: 4 / 5; }
.look-shot img { transition: opacity .3s var(--ease); }
.look-shot.is-loading img { opacity: .35; }
.look-tag {
  position: absolute; left: 0; top: 0; z-index: 1; padding: 8px 12px;
  background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
}
.look-side { display: flex; flex-direction: column; gap: 10px; }

/* Style rows: the signature link row — hover and the chosen one flood with the
   inverse colour, the arrow slides 12px. */
.picks { margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.pick {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 44px; padding: 10px 24px 10px 12px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: left;
  text-transform: lowercase; letter-spacing: -0.01em; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pick span { transition: transform .15s var(--ease); }
.pick:hover, .pick:focus-visible, .pick[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.pick:hover span, .pick[aria-pressed="true"] span { transform: translateX(12px); }
.pick small { font-weight: 400; color: inherit; opacity: .6; margin-left: auto; margin-right: 18px; font-size: 13px; }

.faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.face {
  padding: 0; border: 1px solid var(--line); background: var(--wash); cursor: pointer;
  aspect-ratio: 1; overflow: hidden; outline-offset: 2px;
}
/* The cast photos are full length: zoom in on the face. */
.face img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.6); transform-origin: 50% 3%; }
.face:hover { border-color: var(--fg); }
.face[aria-pressed="true"] { outline: 2px solid var(--fg); }
.look-note { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
@media (max-width: 960px) {
  .look { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
  .look-side { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .look { grid-template-columns: minmax(0, 1fr); }
  .look-src { flex-direction: row; align-items: center; }
  .look-src .ph { width: 5.5rem; flex: none; }
}

/* ---- § 02 · every style: a hairline grid of photos -------------------------- */
.wall-h { margin: clamp(28px, 3.6vw, 44px) 0 12px; }
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wall-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wall .ph { aspect-ratio: 4 / 5; background: var(--bg); }
.wall figcaption {
  position: absolute; left: 0; bottom: 0; padding: 7px 10px;
  background: var(--bg); color: var(--fg); font-size: 13px; font-weight: 600; text-transform: lowercase;
}
@media (max-width: 860px) { .wall, .wall-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- § 03 · the app itself ------------------------------------------------------ */
.shot { margin-top: clamp(32px, 4vw, 52px); border: 1px solid var(--line-strong); }
.shot img { width: 100%; height: auto; }
.shot-cap { margin-top: 10px; color: var(--muted); font-size: 13.5px; }

/* ---- § 05 · plans: four columns, the price is the figure ------------------------ */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.plan { --gap: clamp(16px, 2.2vw, 28px); padding: var(--gap) var(--gap) var(--gap) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.plan + .plan { padding-left: var(--gap); border-left: 1px solid var(--line); }
.plan h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); letter-spacing: -0.025em; }
.plan-price { margin-top: clamp(14px, 2vw, 24px); font-weight: 700; font-size: clamp(2.8rem, 5vw, 4.4rem); letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.plan-year { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.plan ul { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.plan li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.plan li b { color: var(--fg); font-weight: 600; }
@media (max-width: 960px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; }
  .plan, .plan + .plan { padding-left: 0; border-left: 0; }
}

/* ---- § 06 · questions: native <details>, styled as hairline rows ----------------
   Copied from affiliate.css. */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 44px; padding-block: clamp(16px, 2.2vw, 24px); cursor: pointer; list-style: none;
  font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--fg); font-weight: 400; font-size: 22px; line-height: 1;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.faq summary:hover::after, .faq summary:focus-visible::after { background: var(--fg); color: var(--bg); }
.faq details[open] summary::after { content: "−"; background: var(--fg); color: var(--bg); }
.faq details p { color: var(--muted); max-width: 62ch; padding-bottom: clamp(18px, 2.4vw, 26px); margin-top: -4px; }
.faq a { color: var(--fg); }

/* ---- § 07 · on the inverted band ------------------------------------------------- */
#get .lede { margin-top: 0; margin-bottom: clamp(22px, 2.8vw, 32px); }

/* ---- /privacy/ · a text page on the same hairline grid ----------------------
   Heading on the left with its number, the text on the right; one hairline
   per section. No hanger in the hero, so the title may use the full width. */
@media (max-width: 720px) { .hero-doc .idx, .hero-doc .ff-h1 { max-width: none; } }
.doc-updated { margin-top: clamp(24px, 3vw, 36px); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.policy { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.policy li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px clamp(24px, 5vw, 72px); padding-block: clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.policy h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.03em; line-height: 1.05; }
.policy h2 b { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--muted); }
.policy p { color: var(--muted); max-width: 60ch; }
.policy p + p { margin-top: 12px; }
.policy a { color: var(--fg); font-weight: 600; }
.policy code { font: inherit; font-weight: 600; color: var(--fg); }
@media (max-width: 760px) { .policy li { grid-template-columns: 1fr; } }