/* Narto · home page components, all below the first screen.
   Loaded without blocking the first paint (see index.html). */

/* ==================== steps ==================== */
/* How it works: one small site drawn in CSS, seen three times: built, shared
   on the call, live on its domain. Tokens only. Sizes in cqw of the 4:3 stage. */

.howto-list { display: grid; gap: var(--space-s); padding: 0; list-style: none; }
.howto-step {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--white);
}
.howto-step--call { background: var(--accent); }
.howto-step--live { background: var(--ink); color: var(--night-text); }

.howto-text { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-xs); }
.howto-num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: .8;
}
.howto-title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1;
}
.howto-text p { max-width: 22em; }

@media (min-width: 641px) and (max-width: 999px) {
  .howto-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-l); }
}
@media (min-width: 1000px) {
  .howto-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.howto-stage { position: relative; aspect-ratio: 4 / 3; container-type: inline-size; overflow: hidden; }
.howto-stage span, .howto-ptr { position: absolute; }

/* Browser: a 1.5px ink line drawn over its content, like the level vial. */
.howto-win, .howto-call { inset: 0; overflow: hidden; border-radius: var(--radius); }
.howto-win { background: var(--white); }
.howto-win::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.howto-bar { left: 0; top: 0; width: 100%; height: 13cqw; background: var(--concrete); box-shadow: inset 0 -1px var(--rule); }
.howto-bar::before {
  content: "";
  position: absolute;
  left: 4cqw;
  top: 5.6cqw;
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: var(--rule);
  box-shadow: 2.8cqw 0 var(--rule), 5.6cqw 0 var(--rule);
}
.howto-url {
  left: 15cqw;
  right: 3cqw;
  top: 2.5cqw;
  height: 8cqw;
  display: flex;
  align-items: center;
  padding: 0 2.6cqw;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  font-size: max(10px, 4.4cqw);
  line-height: 1;
  white-space: nowrap;
}
.howto-url span { position: static; }
.howto-domain { font-weight: 500; }
.howto-live { display: flex; align-items: center; gap: .45em; margin-left: auto; font-weight: 600; }
.howto-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--accent); }
.howto-load { left: 0; top: 12.6cqw; width: 100%; height: .8cqw; background: var(--ink); transform-origin: 0 50%; opacity: 0; }

/* The site: header, headline, text, button, photo, three services, footer. */
.howto-view { left: 0; top: 13cqw; width: 100%; height: 62cqw; overflow: hidden; }
.howto-page { left: 0; top: 0; width: 100%; height: 88cqw; }
.howto-step--call .howto-page { top: -21cqw; } /* scrolled on the call */
.howto-logo { left: 5cqw; top: 2.6cqw; width: 12cqw; height: 3cqw; background: var(--ink); }
.howto-nav { right: 5cqw; top: 2cqw; width: 13cqw; height: 4.2cqw; box-shadow: inset 0 0 0 1.5px var(--ink); }
.howto-hd { left: 0; top: 8.4cqw; width: 100%; height: 1px; background: var(--rule); }
.howto-hd, .howto-h1, .howto-tx { transform-origin: 0 50%; }
.howto-h1 { left: 5cqw; top: 13cqw; width: 40cqw; height: 4.6cqw; background: var(--ink); }
.howto-h1 + .howto-h1 { top: 19.6cqw; width: 31cqw; }
.howto-tx { left: 5cqw; top: 27.6cqw; width: 38cqw; height: 1.6cqw; background: var(--rule); }
.howto-tx + .howto-tx { top: 31.2cqw; width: 28cqw; }
.howto-btn { left: 5cqw; top: 36.4cqw; width: 17cqw; height: 5.6cqw; background: var(--accent); }
.howto-img { left: 52cqw; top: 13cqw; width: 43cqw; height: 29cqw; background: var(--ink); }
.howto-img::before, .howto-img::after, .howto-card::before, .howto-foot::before, .howto-foot::after { content: ""; position: absolute; }
.howto-img::before {
  left: 31%;
  bottom: 0;
  width: 38%;
  height: 64%;
  background: var(--graphite);
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}
.howto-img::after { left: 46%; bottom: 0; width: 8%; height: 24%; background: var(--ink); }
.howto-card { left: 5cqw; top: 47cqw; width: 26.66cqw; height: 13cqw; background: var(--concrete); }
.howto-card + .howto-card { left: 36.67cqw; }
.howto-card + .howto-card + .howto-card { left: 68.34cqw; }
.howto-card::before { left: 3cqw; top: 3cqw; width: 12cqw; height: 2.2cqw; background: var(--ink); }
.howto-foot { left: 0; top: 65cqw; width: 100%; height: 23cqw; background: var(--concrete); }
.howto-foot::before { left: 5cqw; top: 5cqw; width: 34cqw; height: 4cqw; background: var(--ink); }
.howto-foot::after { left: 5cqw; top: 12cqw; width: 17cqw; height: 5.6cqw; background: var(--accent); }

/* The call: two tiles, the shared browser below. */
.howto-call { background: var(--ink); }
.howto-tile {
  left: 37cqw;
  top: 2cqw;
  width: 12cqw;
  height: 9cqw;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--night-rule);
  color: var(--night-text);
  font-family: var(--font-display);
  font-size: 5cqw;
  font-weight: 800;
  line-height: 1;
}
.howto-tile + .howto-tile { left: 51cqw; }
.howto-talk { inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent); } /* Nikolaj is talking */
.howto-share { left: 10cqw; top: 13cqw; width: 100cqw; height: 75cqw; transform: scale(.8); transform-origin: 0 0; }
.howto-ptr { left: 52cqw; top: 50cqw; width: 3.6cqw; height: 5.4cqw; overflow: visible; }
.howto-ptr path { fill: var(--ink); stroke: var(--white); stroke-width: 1; stroke-linejoin: round; }

/* ==================== estimate ==================== */
/* Deal section: an estimate sheet from their own trade, with the work already done.
   Existing tokens only. Green: --accent for the tick strokes, --accent-tint for the vial liquid.
   The bubble outline is ink at 35% (as .level__bubble in site.css). */

.estimate { overflow-x: clip; } /* the sheet starts slightly tilted; never a sideways scroll */
.estimate-grid { display: grid; gap: var(--space-xl); align-items: start; }
.estimate-intro .section__lead { margin-bottom: 0; }
.estimate-stage { padding-top: 2rem; } /* room for the level resting on the sheet */

/* narto.dk: the two other options, as two smaller fields under the sheet. They never move.
   The gap above them is wider than between cards, so the tilted sheet's corners stay clear while it levels. */
.estimate-options {
  display: grid;
  gap: var(--space-s);
  max-width: 42rem;
  margin-top: var(--space-l);
}
.option {
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--white);
}
.option__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1;
}
.option__price { margin-bottom: var(--space-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.option__text { color: var(--graphite); font-size: var(--small-size); text-wrap: pretty; }
@media (min-width: 641px) {
  .estimate-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The sheet */
.estimate-sheet {
  position: relative;
  max-width: 42rem;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--white);
}
.estimate-title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
  font-weight: 800;
  line-height: .95;
}
.estimate-for { margin-bottom: var(--space-l); color: var(--graphite); font-size: var(--small-size); }
.estimate-for b { color: var(--ink); font-weight: 600; }

/* Line items: a tick column, the item, the value on the right */
.estimate-lines { margin: 0; }
.estimate-line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-m);
  padding: var(--space-s) 0 var(--space-s) 2.5rem;
  border-top: 1px solid var(--rule);
}
.estimate-line dt { font-weight: 600; line-height: 1.35; }
.estimate-line dd {
  max-width: 9em;
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.estimate-note { display: block; color: var(--graphite); font-size: var(--small-size); font-weight: 400; }

/* Hand-drawn tick, drawn in left to right by two opposing wrappers */
.estimate-tick {
  position: absolute;
  top: calc(var(--space-s) - .1rem);
  left: 0;
  width: 1.75rem;
  height: 1.5rem;
  overflow: hidden;
}
.estimate-draw, .estimate-tick svg { display: block; width: 100%; height: 100%; }
.estimate-tick path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.estimate-line:nth-child(2n) .estimate-tick svg { transform: rotate(-7deg) scale(.92); }
.estimate-line:nth-child(3n) .estimate-tick svg { transform: rotate(5deg) scale(1.04); }

/* Total: a heavier rule, then the sum */
.estimate-total { align-items: end; padding-top: var(--space-m); padding-bottom: 0; border-top: 0; }
.estimate-rule {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ink);
  transform-origin: 0 50%;
}
.estimate-total dt, .estimate-total dd {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1;
}
.estimate-sum { display: block; }

/* The level resting on the sheet's top edge: an ink body with the vial window */
.estimate-level {
  position: absolute;
  right: var(--space-l);
  bottom: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(10rem, 42%, 14rem);
  height: 2rem;
  border-radius: var(--radius);
  background: var(--ink);
}
.estimate-vial {
  position: relative;
  width: 6.5rem;
  height: 1.375rem;
  border-radius: 1rem;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.estimate-vial::before,
.estimate-vial::after { /* the two centre marks */
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(50% - 1.125rem);
  width: 1.5px;
  background: var(--ink);
}
.estimate-vial::after { left: calc(50% + 1.125rem - 1.5px); }
.estimate-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem;
  height: .75rem;
  margin: -.375rem 0 0 -.875rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(23, 24, 27, .35);
}

@media (max-width: 640px) {
  .estimate-sheet { padding: var(--space-l) var(--space-m) var(--space-m); }
  .estimate-level { right: var(--space-m); }
  .estimate-line { gap: var(--space-s); padding-left: 2.25rem; }
  /* The total gets its own line for the label, the value under it on the right. */
  .estimate-total { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .estimate-total dd { justify-self: end; max-width: none; }
}
@media (min-width: 900px) {
  .estimate-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--space-xl); }
  .estimate-intro { position: sticky; top: var(--space-xl); } /* stays beside the taller sheet */
}

/* ==================== thread ==================== */
/* Review add-on: a phone that receives the review request by text.
   One derived tint: --thread-grey, the incoming bubble = 93% --concrete + 7% --ink
   (falls back to --rule where color-mix is missing). Everything else uses site tokens. */

.thread {
  --thread-grey: var(--rule);
  padding-top: 0; /* follows the deal section; the panel's inner space is the gap */
}
@supports (color: color-mix(in srgb, red, blue)) {
  .thread { --thread-grey: color-mix(in srgb, var(--concrete) 93%, var(--ink)); }
}

.thread-panel {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-m) 0;
  border-radius: var(--radius);
  background: var(--white);
}
.thread-label {
  margin-bottom: var(--space-s);
  color: var(--accent-text);
  font-size: var(--small-size);
  font-weight: 600;
}
.thread .section__title { margin-bottom: var(--space-m); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.thread-text { max-width: 30em; color: var(--graphite); text-wrap: pretty; }
.thread-text:not(:last-child) { margin-bottom: var(--space-s); }

/* The phone. Its lower part runs past the panel edge, so only the thread shows. */
.thread-device {
  justify-self: start;
  width: min(100%, 17.5rem);
  height: 22.5rem;
  margin-inline: -2px;
  padding-inline: 2px; /* room for the side keys */
  overflow: hidden;
  font-family: var(--font-text);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.thread-phone {
  position: relative;
  height: 34rem;
  padding: .4375rem;
  border-radius: 2.75rem;
  background: var(--ink);
}
.thread-phone::before,
.thread-phone::after {
  content: "";
  position: absolute;
  width: 2px;
  background: var(--ink);
}
.thread-phone::before { left: -2px; top: 6.5rem; height: 3.5rem; border-radius: 1px 0 0 1px; }
.thread-phone::after { right: -2px; top: 8rem; height: 4.5rem; border-radius: 0 1px 1px 0; }

.thread-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.3125rem;
  background: var(--white);
}
/* Camera cut-out */
.thread-screen::before {
  content: "";
  position: absolute;
  top: .5625rem;
  left: 50%;
  width: 4.5rem;
  height: 1.3125rem;
  margin-left: -2.25rem;
  border-radius: 1rem;
  background: var(--ink);
}

.thread-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5rem;
  padding: 0 1.375rem 0 1.5rem;
}
.thread-bar svg { display: block; fill: currentColor; }

.thread-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem 1rem .625rem;
  border-bottom: 1px solid var(--rule);
}
.thread-back {
  width: .5625rem;
  height: .5625rem;
  margin: 0 .125rem 0 .25rem;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  transform: rotate(45deg);
}
.thread-avatar {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--white);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.thread-name { font-size: .9375rem; font-weight: 600; line-height: 1.2; }

.thread-day {
  padding: .875rem 0 .75rem;
  color: var(--graphite);
  font-size: .6875rem;
  line-height: 1.35;
  text-align: center;
}
.thread-day span { display: block; font-weight: 600; }

.thread-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 .875rem;
  font-size: .8125rem;
  line-height: 1.38;
}
.thread-slot { position: relative; max-width: 84%; }
.thread-typing,
.thread-msg { border-radius: 1.125rem 1.125rem 1.125rem .3125rem; background: var(--thread-grey); }
.thread-msg { padding: .5rem .8125rem .5625rem; }
/* Only the motion script shows the typing bubble; without it the thread is already finished. */
.thread-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: .25rem;
  padding: .8125rem 1rem;
  opacity: 0;
  visibility: hidden;
}
.thread-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--graphite); }

.thread-link {
  width: 84%;
  margin-top: .1875rem;
  padding: .5625rem .8125rem .625rem;
  border: 1px solid var(--thread-grey);
  border-radius: .3125rem 1.125rem 1.125rem 1.125rem;
  background: var(--white);
}
.thread-link b { display: block; font-weight: 600; }
.thread-link span {
  display: block;
  color: var(--graphite);
  font-size: .6875rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (min-width: 641px) {
  .thread-device { width: 18.75rem; height: 24rem; }
}
@media (min-width: 900px) {
  .thread-panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    padding: var(--space-2xl) var(--space-2xl) 0;
  }
  .thread-copy { align-self: center; padding-bottom: var(--space-2xl); }
  .thread-device { justify-self: center; align-self: end; height: 25rem; }
}