/* ==========================================================================
   Dactyl Websites — the Features page's own parts (October 2026)

   The page is the home page's five questions, told as five features, and
   uses the home page's own files for them (home.css, asks.css, asks-shared.css,
   desk.css; see features.html). Only what this page has and the home page
   doesn't is here:

     The hero       the shared page hero (site.css .phero).
     The contents   the five features as a book's contents page: number,
                    name, what it does, its package and an arrow, one row
                    each between hairlines. Type only, no pictures.
     The CTA        on a wide screen it follows straight on from the last
                    feature, in the same linen, as that feature's ending.

   Colours, fonts and radii are site.css's. On linen: ink 16:1, ink-3
   5.7:1, plan labels site.css; the arrow's circle filled, linen on ink 16:1.
   ========================================================================== */

/* -------------------------------------------------------------------- Hero
   The shared page hero (site.css .phero): tape, heading, the hairline, the
   deck on the left and the detail on the right, as on Pricing. Only what
   it takes to win over the home page's own header grid (desk.css) is here. */

/* ---------------------------------------------------------------- Contents */
.fidx { margin: 2.4rem 0 6.5rem; }
.fidx__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}
.fidx__list li { position: relative; border-bottom: 1px solid var(--hair); }

/* On a phone: number and package over the name, what it does under it,
   the arrow on the right across all three. */
main .fidx a.fidx__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "k  go"
    "n  go"
    "d  go";
  align-items: center;
  column-gap: 1rem;
  padding: 1rem 0 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
.fidx__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.fidx__k {
  grid-area: k;
  display: flex;
  gap: .9rem;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--ink-3);
}
/* The package it comes with, as the site's plan labels (site.css .pkg),
   opposite the number on a phone and in its own column on a wide screen. */
.fidx__f { grid-area: k; justify-self: end; display: inline-flex; gap: .3rem; }
/* The name's inner span is what rises into view; its box is the mask. */
.fidx__n {
  grid-area: n;
  display: block;
  overflow: hidden;
  margin-top: .35rem;
  padding-bottom: .08em;
  font-family: var(--display);
  font-size: clamp(1.4rem, 6.2vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.fidx__n > span { display: inline-block; transition: transform .6s var(--glide), color .3s var(--ease); }
.fidx__d {
  grid-area: d;
  margin-top: .25rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* The arrow: a chevron in a hairline circle. */
.fidx__go {
  grid-area: go;
  position: relative;
  width: 2.2rem;
  aspect-ratio: 1;
  border: 1px solid var(--hair-2, rgba(20, 17, 13, .18));
  border-radius: 50%;
  color: var(--ink);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.fidx__go::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .42rem;
  height: .42rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(-70%, -50%) rotate(45deg);
  transition: transform .45s var(--glide);
}

/* Arriving: the rows come in one after another, each name rising out of
   its own line, the rest of the row settling in behind it. CSS only, so
   nothing waits for a script; with reduced motion it is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .fidx__n > span { animation: fidx-rise 1s var(--glide) both; animation-delay: var(--d, .2s); }
  .fidx__k, .fidx__f, .fidx__d, .fidx__go { animation: fidx-in .7s var(--ease) both; animation-delay: calc(var(--d, .2s) + .25s); }
  .fidx__list li:nth-child(2) { --d: .28s; }
  .fidx__list li:nth-child(3) { --d: .36s; }
  .fidx__list li:nth-child(4) { --d: .44s; }
  .fidx__list li:nth-child(5) { --d: .52s; }
}
@keyframes fidx-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fidx-in   { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------- Feature names
   Set a size up from the home page's questions: a question carries itself
   by its length, a name of one to three words needs the size instead. */
.feats .ask__q { text-wrap: balance; }

/* ---------------------------------------------------------------- Phones */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  /* The page opens with the heading, so a little less room above it than
     the home page leaves under its film. */
  .feats.asks { padding-top: calc(var(--nav-h, 64px) + 7.5rem + 50px); }
  .feats .ask__q { font-size: clamp(2.4rem, 11vw, 3rem); line-height: 1.02; letter-spacing: -.03em; }
  .feats + .cta { padding-top: 6.5rem; }
}

/* ---------------------------------------------------------------- Wide */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  /* The shared hero's grid over the home page's header grid. */
  .feats.asks { padding-top: calc(var(--nav-h, 56px) + clamp(6.5rem, 18svh, 11.5rem)); }
  .feats.asks > .wrap.phero { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: start; row-gap: 0; }
  .feats .phero__pin { grid-column: 1 / -1; grid-row: 1; }

  /* One line per feature, the columns shared by all five so the names,
     lines and flags stand in straight columns down the page. */
  .fidx { margin: clamp(2.8rem, 7svh, 4.5rem) 0 clamp(7rem, 16svh, 11rem); }
  main .fidx a.fidx__row {
    grid-template-columns: 3.75rem minmax(0, 1.1fr) minmax(0, 1fr) 9.5rem 2.5rem;
    grid-template-areas: "k n d f go";
    align-items: center;
    column-gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(.8rem, 1.5svh, 1.1rem) 0;
  }
  .fidx__k { align-self: center; }
  .fidx__f { grid-area: f; justify-self: end; }
  .fidx__n { margin: 0; font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.1; }
  /* From 1200px every name holds one line; below, the longest wraps. */
  @media (min-width: 1200px) { .fidx__n { white-space: nowrap; } }
  .fidx__d { margin: 0; font-size: clamp(.9rem, .95vw, 1rem); }
  .fidx__go { justify-self: end; width: 2.3rem; }

  /* Pointed at: a terracotta rule draws along the row's foot, the name
     steps in and takes the accent, the arrow's circle fills with ink. */
  .fidx__list li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .8s var(--glide);
    pointer-events: none;
  }
  .fidx__list li:has(.fidx__row:is(:hover, :focus-visible))::after { transform: scaleX(1); }
  .fidx__row:is(:hover, :focus-visible) .fidx__n > span { transform: translateX(.55rem); color: var(--accent-ink); }
  .fidx__row:is(:hover, :focus-visible) .fidx__go { background-color: var(--ink); border-color: var(--ink); color: var(--linen); }
  .fidx__row:is(:hover, :focus-visible) .fidx__go::before { transform: translate(-50%, -50%) rotate(45deg); }

  /* The CTA is the end of the last feature, not a sheet of its own: the
     last sheet is not held (no run under the list), and the orange tab
     follows straight on in the same linen, so Monthly Marketing Boost
     flows into it. */
  .feats .asks__list::after { display: none; }
  .feats + .cta { background: var(--linen); padding-top: clamp(7rem, 17svh, 12rem); }
}

/* ------------------------------------------------------- The question
   Under each feature's name, the question it answers, so the sheet's
   "Our answer" has something to answer (and the page says what its title
   and description promise). The serif at a reading size, a step down from
   the name, in ink-2 (8.15:1 on sand, 9.41:1 on linen); ivory 75% on the
   dark Smart Form sheet (9.2:1). */
.feat-q {
  max-width: 24em;
  margin: .9rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ink-2);
  text-wrap: balance;
}
.ask--form .feat-q { color: rgba(243, 238, 230, .75); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .feat-q { margin-top: 1.1rem; font-size: clamp(1.35rem, 1.7vw, 1.8rem); }
}