/* tend.net.au: the home page only (its hero, the typed headline and ring, the board cards). Linked from index.html's "styles". */

/* Moved from site.css (2026-11-07): rules only this page uses, so other pages don't carry them. */
.band-head { margin: 0 0 clamp(var(--space-6), 3vw, 36px); }
.tt-sm { font-size: 1.375rem; }
.tt-sm > p { color: var(--muted); }
.bento { display: grid; gap: var(--space-4); }
/* Phones (design 07, after Stripe's card rows): the five cards are one row you swipe, each snapping to the
   gutter with the next one peeking. JS off, it still scrolls; each card's vignette plays as it comes into view. */
@media (max-width: 719.98px) {
  .bento { grid-auto-flow: column; grid-auto-columns: 84vw; gap: var(--space-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding: var(--space-1) var(--space-4) var(--space-2); }
  .bento::-webkit-scrollbar { display: none; }
  .bcard { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento > .b3 { grid-column: span 3; }
  .bento > .b2 { grid-column: span 2; }
}
.bcard { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: var(--space-4); background: var(--bg-surface); border: 1px solid var(--rule); border-radius: var(--radius-xl); --pad: var(--space-4); padding: var(--pad) var(--pad) 0; text-decoration: none; color: inherit; overflow: hidden; }
.bcard:hover { border-color: var(--leaf-300); color: inherit; }
@media (min-width: 720px) { .bcard { --pad: var(--space-6); } }
.bcard-a { margin: var(--space-2) 0 0; font-size: var(--step-lead); line-height: 1.5; color: var(--ink); }
.bcard h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; }
.bcard p { color: var(--muted); margin: var(--space-2) 0 0; }
/* Each card's screen starts the same 24 px below its stage's top and runs off the bottom edge (owner, 2026-11-07:
   anchored to the bottom, the shorter screens left a gap at the top). Any height to spare is screen, not paper.
   The cards share their row's two tracks (subgrid), so the stages, and the screens on them, start level. */
.bcard .figure-ui { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--pad)); gap: 0; }
.bcard .stage { flex: 1; place-items: stretch center; border-radius: 0; border: 0; border-top: 1px solid var(--leaf-100); padding: var(--space-6) var(--space-4) 0 var(--space-10); }
.bcard .stage .ui { border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-md); }
.bcard .stage::before { left: var(--space-6); }
/* Phones (owner, 2026-11-07): a card fits one screen under the header. In this row only, each screen drops
   what it says twice or doesn't need here (.ui-lean: Today's counts, which its lists head, and its second row; the
   compliance checks' descriptions; the review's other row and its foot; the calendar keys whose colours a phone's
   bars don't show), the calendar's weeks are shorter, and the report's pages fan smaller. Homes shows the full cards. */
@media (max-width: 719.98px) {
  .bcard .ui-lean { display: none; }
  .bcard .ui-report { gap: var(--space-2); }
  .bcard .ui-pages { height: 100px; }
  .bcard .ui-page { width: 70px; height: 92px; }
  .bcard .ui-cal > div:not(.dow) { min-height: 36px; }
  .bcard .stage { padding-top: var(--space-4); }
}
/* The cards say "sample data" once, under the set, not on each card (owner, 2026-11-07; rule 5). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bcard { transition: border-color .15s ease, transform .15s ease; }
  .bcard:hover { transform: translateY(-2px); }
}
.price-big { font-family: var(--font-display); font-weight: 360; font-size: clamp(4.5rem, 3rem + 4vw, 6.5rem); line-height: 0.9; letter-spacing: -0.035em; color: var(--ink); margin: 0; font-variant-numeric: lining-nums; }
.price-unit { color: var(--muted); margin: var(--space-2) 0 0; }
.price-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); }
.price-row .price-unit { font-size: var(--step-small); line-height: 1.5; margin: 0 0 var(--space-2); max-width: 19em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tile { border-top: 1px solid var(--rule); padding: var(--space-3) 0 0; }
.tile strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.tile span { display: block; font-size: var(--step-small); color: var(--muted); }
.tile-free { border-top-color: var(--leaf-300); }
.tile-free strong { color: var(--leaf-700); }
@media (max-width: 599.98px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
  .tile strong { flex: none; }
}
.ring { position: relative; white-space: nowrap; margin-left: .06em; }
.ring svg { position: absolute; left: -.18em; top: -.28em; width: calc(100% + .54em); max-width: none; height: calc(100% + .44em); overflow: visible; pointer-events: none; transform: rotate(-1.5deg); }
.ring path { fill: none; stroke: var(--leaf-500); stroke-width: calc(1px + .045em); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) 0; padding: var(--space-4) 0; margin: 0; border-block: 1px solid var(--rule); font-size: var(--step-small); color: var(--stone-700); }
.proof li { padding-inline: 0 var(--space-4); margin-inline: 0 var(--space-4); border-right: 1px solid var(--rule); }
.proof li:last-child { border-right: 0; }
@media (max-width: 599.98px) {
  .proof { flex-direction: column; gap: var(--space-2); }
  .proof li { position: relative; border-right: 0; margin: 0; padding: 0 0 0 var(--space-6); }
  .proof li::before { content: ''; position: absolute; left: 3px; top: 0.4em; width: 10px; height: 5px; border-left: 2px solid var(--leaf-600); border-bottom: 2px solid var(--leaf-600); transform: rotate(-45deg); }
}
.price-show { display: grid; gap: var(--space-3); align-content: end; }
@media (min-width: 960px) {
  .price-show { justify-items: end; text-align: right; }
  .price-show .price-row { justify-content: flex-end; }
}
.price-show .tiles { min-width: min(100%, 320px); }
/* typed.js types the home headline once, then draws the ring around "one place." (owner, 2026-11-07; rule 4). */
.motion-ok [data-typed]:not(.typing):not(.typed) { opacity: 0; animation: tf-failsafe 0s 4s forwards; }
.typing .rest { color: transparent; }
.caret { position: relative; }
.caret::after { content: ''; position: absolute; top: .14em; bottom: .04em; width: 2px; background: currentColor; }