/* Lagos Life · P5 "Your phone runs your life", layout 3 "Annotated" (client pick, 8 Oct).
   From Design/variations/2026-10-08-phone-calm. Load AFTER phone.css. Phone + flows are unchanged; this only restyles what is around the phone. */
#phone {
  --hair: rgba(16, 22, 52, .1);
  --ink-3t: rgba(16, 22, 52, .42);
}
/* the floor under the arm: a hairline, not a 2.5px rule */
#phone .pp-stage::after { height: 1px; background: var(--hair); }
#phone .pp-layout::before { opacity: .7; }
#phone .pp-fine { font-size: 13px; margin-top: var(--s4); max-width: 62ch; text-align: center; }

/* shared bits */
#phone .c-ar { display: inline-block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-left: 6px; opacity: .5; transition: transform .25s var(--ease-out), opacity .25s; }

/* =================== 3 · Annotated =================== */
#phone .pp-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: 0; }
#phone .pp-stage, #phone .pp-try, #phone .pp-notes { grid-area: auto; }
#phone .pp-try { height: auto; align-items: center; margin-top: 0; }
#phone.pp-pre .pp-try { translate: 0 16px; }
#phone.pp-pre .pp-notes { translate: none; }
#phone .c-annos { position: absolute; inset: 0; z-index: 3; height: auto; display: block; pointer-events: none; transition: opacity .6s var(--ease-out) .5s; }
#phone .c-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#phone .c-leads line { stroke: var(--ink); stroke-opacity: .28; stroke-width: 1; stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-opacity .25s, stroke-dashoffset .5s var(--ease-out) calc(var(--i, 0) * 60ms + 80ms); }
#phone .c-leads circle { fill: var(--paper); stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.5; transition: fill .25s, stroke-opacity .25s, opacity .25s calc(var(--i, 0) * 60ms); }
#phone .c-leads .is-hot line { stroke-opacity: .8; }
#phone .c-leads .is-hot circle { fill: var(--fuch); stroke-opacity: 1; }
#phone .c-anno { --dx: 0px; position: absolute; width: 210px; padding: 6px 0; background: none; border: 0; border-radius: 6px; text-align: left; pointer-events: auto; translate: var(--dx) -50%; transition: opacity .35s var(--ease-out) calc(var(--i, 0) * 60ms + 220ms), translate .45s var(--ease-out) calc(var(--i, 0) * 60ms + 220ms); }
#phone .c-anno[data-side="l"] { text-align: right; }
#phone .c-anno b { display: inline; font: 600 15px/1.3 var(--text); letter-spacing: -.01em; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease-out); }
#phone .c-anno[data-side="l"] b { background-position: 100% 100%; }
/* clearing away: lines retract into their dots, labels fade and drift outward, staggered 60ms */
#phone .c-annos.is-clear .c-anno { opacity: 0; pointer-events: none; transition-delay: calc(var(--i, 0) * 60ms); }
#phone .c-annos.is-clear .c-anno[data-side="l"] { --dx: -14px; }
#phone .c-annos.is-clear .c-anno[data-side="r"] { --dx: 14px; }
#phone .c-annos.is-clear .c-leads line { stroke-dashoffset: 1; transition-delay: 0s, calc(var(--i, 0) * 60ms); }
#phone .c-annos.is-clear .c-leads circle { opacity: 0; transition-delay: 0s, 0s, calc(var(--i, 0) * 60ms + 380ms); }
#phone .c-anno span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
#phone .c-anno:hover b, #phone .c-anno:focus-visible b { background-size: 100% 1px; }
#phone .c-annos:not(.is-ready) { opacity: 0; }
#phone .c-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; width: min(1040px, 100%); margin: 0 auto; }
#phone .c-step { display: grid; grid-template-columns: 28px 1fr; row-gap: 4px; width: 100%; padding: 22px 0 4px; text-align: left; background: none; border: 0; border-radius: 0; position: relative; }
#phone .c-step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1.5px; background: var(--fuch); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
#phone .c-step__n { font: 600 13px/1.4 var(--text); color: var(--ink-3t); transition: color .2s; }
#phone .c-step__t { font: 600 16px/1.35 var(--text); letter-spacing: -.01em; color: var(--ink); }
#phone .c-step__s { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
#phone .c-step:hover .c-ar, #phone .c-step:focus-visible .c-ar { transform: translateX(3px); opacity: 1; }
#phone .c-step:hover .c-step__n { color: var(--ink); }
#phone .c-step.is-active::before { transform: none; }
#phone .c-step.is-active .c-step__n { color: var(--fuch); }
@media (max-width: 1023px) {
  #phone .c-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; max-width: 560px; }
  #phone .c-annos { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; max-width: 560px; width: 100%; margin: var(--s4) auto 0; padding: 0; overflow: visible; pointer-events: auto; opacity: 1 !important; order: 3; }
  #phone .c-leads { display: none; }
  #phone .c-annos.is-clear .c-anno { opacity: 1; pointer-events: auto; --dx: 0px; } /* below the phone as a list: never needs to clear */
  #phone .c-anno, #phone .c-anno[data-side="l"] { position: static; width: auto; translate: none; text-align: left; }
  #phone .c-anno b { font-size: 14px; }
}
@media (max-width: 560px) { #phone .c-steps { grid-template-columns: minmax(0, 1fr); } #phone .c-annos { grid-template-columns: 1fr; } }

#phone .c-anno:focus-visible, #phone .c-step:focus-visible { outline: 3px solid var(--fuch); outline-offset: 3px; }
/* reduced motion: an instant fade, no travel */
@media (prefers-reduced-motion: reduce) {
  #phone .c-step::before, #phone .c-ar { transition: none !important; }
  #phone.pp-pre .pp-try { translate: none; }
  #phone .c-anno, #phone .c-leads line, #phone .c-leads circle { transition: none !important; --dx: 0px !important; }
  #phone .c-leads line { stroke-dashoffset: 0 !important; }
  #phone .c-annos { transition: opacity .15s !important; }
  #phone .c-annos.is-clear { opacity: 0; }
}
.reduce-motion #phone .c-anno, .reduce-motion #phone .c-leads line, .reduce-motion #phone .c-leads circle { transition: none !important; --dx: 0px !important; }
.reduce-motion #phone .c-leads line { stroke-dashoffset: 0 !important; }
.reduce-motion #phone .c-annos { transition: opacity .15s !important; }
.reduce-motion #phone .c-annos.is-clear { opacity: 0; }

/* client 8 Oct: no Try-it row; one quiet disclaimer line right under the hand, then 40px into the gold film */
#phone .pp-fine { font-size: 13px; line-height: 1.45; color: rgba(16,22,52,.6); max-width: none; margin: 16px auto 0; text-wrap: balance; }