/*
 * Homepage hero: the "Live canvas" design from /hero-ideas replaces Framer's intro
 * (.framer-XUag4), plus editable pen-tool curves in empty margins. Built by
 * custom/home-hero.js; only present on the homepage.
 */

/* Hide Framer's intro but keep its space, so the hero section keeps its layout. */
body.av-home .framer-XUag4,
body.av-home .framer-YXJ8e { /* desktop and mobile intro components */
  visibility: hidden !important;
}

.avh, .avpen {
  --avh-canvas: #fff9f2;
  --avh-white: #fff;
  --avh-black: #000;
  --avh-muted: #06060699;
  --avh-graphite: #444;
  --avh-h5: #0000000d;
  --avh-h7: #00000012;
  --avh-h10: #0000001a;
  --avh-green: #039754;
  --avh-purple: #8427de;
  --avh-blue: #008ff0;
  --avh-orange: #f4ac28;
  --avh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --avh-display: "PP Neue Montreal Medium", "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --avh-sans: Inter, "Inter Placeholder", "Helvetica Neue", Arial, sans-serif;
  --avh-mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  position: absolute;
  z-index: 5;
  font-family: var(--avh-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--avh-black);
}

/* ---- Live canvas ---- */
.avh {
  display: grid;
  grid-template-columns: 190px 1fr 210px;
  background: var(--avh-white);
  border: 1px solid var(--avh-h10);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.6s var(--avh-ease), translate 0.8s var(--avh-ease);
}
.avh.in { opacity: 1; translate: 0 0; }
.avh * { box-sizing: border-box; }
.avh-bar { grid-column: 1 / -1; background: #f4f1ec; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--avh-h7); font-size: 12px; color: var(--avh-graphite); }
/* Window buttons: grey at rest; hovering the group lights them up with their glyphs, as on macOS. */
.avh-lights { display: flex; gap: 8px; padding: 4px 0; cursor: default; }
.avh-lights i { width: 12px; height: 12px; border-radius: 50%; background: #00000024; display: grid; place-items: center; transition: background 0.15s ease; }
.avh-lights svg { width: 8px; height: 8px; fill: none; stroke: #0000008c; stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity 0.15s ease; }
.avh-lights:hover .close { background: #ff5f57; }
.avh-lights:hover .min { background: #febc2e; }
.avh-lights:hover .max { background: #28c840; }
.avh-lights:hover svg { opacity: 1; }
.avh-bar .file { margin-left: 12px; }
.avh-bar .file b { font-weight: 500; color: var(--avh-black); }
.avh-bar .status { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--avh-green); }
.avh-bar .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--avh-green); box-shadow: 0 0 0 3px #03975422; }
.avh-bar .who { display: flex; margin-left: 12px; }
.avh-bar .who span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #f4f1ec; margin-left: -6px; display: grid; place-items: center; color: var(--avh-white); font-size: 10px; }
.avh-layers, .avh-props { padding: 14px; font-size: 12px; color: var(--avh-graphite); }
.avh-layers { border-right: 1px solid var(--avh-h7); }
.avh-props { border-left: 1px solid var(--avh-h7); }
.avh-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--avh-muted); margin-bottom: 10px; }
.avh-layer { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; transition: background 0.2s; user-select: none; }
.avh-layer svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.avh-layer.in { padding-left: 24px; }
.avh-layer:hover { background: var(--avh-canvas); }
.avh-layer.sel { background: #e6f3fe; color: var(--avh-blue); }
.avh-target { font-size: 12px; color: var(--avh-muted); margin-bottom: 12px; }
.avh-target b { font-weight: 500; color: var(--avh-blue); }
.avh-field { display: grid; gap: 6px; margin-bottom: 14px; }
.avh-field > span { font-size: 11px; color: var(--avh-muted); display: flex; justify-content: space-between; }
.avh-field em { font-style: normal; font-family: var(--avh-mono); color: var(--avh-black); }
.avh-font { position: relative; }
.avh-font-btn { width: 100%; height: 32px; padding: 0 8px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--avh-white); border: 1px solid var(--avh-h10); border-radius: 0; font-size: 13px; color: var(--avh-black); cursor: pointer; text-align: left; transition: border-color 0.2s; }
.avh-font-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.avh-font-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--avh-graphite); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.25s var(--avh-ease); }
.avh-font-btn:hover, .avh-font-btn[aria-expanded="true"] { border-color: var(--avh-blue); }
.avh-font-btn[aria-expanded="true"] svg { rotate: 180deg; }
.avh-font-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none; background: var(--avh-white); border: 1px solid var(--avh-h10); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 30px rgba(0,0,0,.1); outline: none; opacity: 0; translate: 0 -4px; transition: opacity 0.16s ease, translate 0.25s var(--avh-ease); }
.avh-font-list.open { opacity: 1; translate: 0 0; }
.avh-font-list li { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; font-size: 13px; color: var(--avh-graphite); cursor: pointer; }
.avh-font-list li .aa { width: 26px; font-size: 16px; color: var(--avh-black); }
.avh-font-list li.hi { background: var(--avh-canvas); color: var(--avh-black); }
.avh-font-list li.on { color: var(--avh-black); outline: 1.3px solid var(--avh-blue); outline-offset: -1.3px; }
.avh-font-list li .h { display: none; position: absolute; width: 6px; height: 6px; background: var(--avh-white); border: 1.3px solid var(--avh-blue); }
.avh-font-list li.on .h { display: block; }
.avh-font-list li .tl { top: -3px; left: -3px; } .avh-font-list li .tr { top: -3px; right: -3px; }
.avh-font-list li .bl { bottom: -3px; left: -3px; } .avh-font-list li .br { bottom: -3px; right: -3px; }
.avh-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; background: var(--avh-canvas); border-radius: 6px; }
.avh-seg button { height: 28px; border: 0; border-radius: 4px; background: transparent; font: 500 10.5px var(--avh-sans); color: var(--avh-graphite); cursor: pointer; transition: background 0.2s, color 0.2s; }
.avh-seg button:hover:not(:disabled) { color: var(--avh-black); }
.avh-seg button.on { background: var(--avh-white); color: var(--avh-black); box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1.3px var(--avh-blue); }
.avh-seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.avh-size { width: 100%; accent-color: var(--avh-blue); cursor: pointer; }
.avh-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.avh-swatches button { width: 24px; height: 24px; border-radius: 5px; border: 1px solid var(--avh-h10); padding: 0; cursor: pointer; transition: transform 0.2s var(--avh-ease), box-shadow 0.2s; }
.avh-swatches button:hover { transform: scale(1.08); }
.avh-swatches button.on { box-shadow: 0 0 0 2px var(--avh-white), 0 0 0 3.5px var(--avh-blue); }
.avh-reset { width: 100%; height: 30px; margin-top: 4px; background: var(--avh-white); border: 1px solid var(--avh-h10); font: 500 12px var(--avh-sans); color: var(--avh-graphite); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.avh-reset:hover { border-color: var(--avh-purple); color: var(--avh-purple); }
.avh-props button:focus-visible, .avh-font-list:focus-visible li.hi, .avh-props input:focus-visible { outline: 2px solid var(--avh-blue); outline-offset: 2px; }
.avh-copy h1, .avh-copy p { cursor: pointer; transition: color 0.25s; }
.avh-stage { position: relative; background: var(--avh-canvas); background-image: radial-gradient(var(--avh-h10) 1px, transparent 1px); background-size: 16px 16px; min-height: 440px; display: grid; place-items: center; padding: 44px 40px; }
.avh-board { position: relative; width: min(460px, 100%); background: var(--avh-white); border: 1.3px solid var(--avh-blue); display: grid; grid-template-columns: 42% 1fr; gap: 16px; padding: 16px; }
.avh-board .h { position: absolute; width: 9px; height: 9px; background: var(--avh-white); border: 1.3px solid var(--avh-blue); z-index: 2; }
.avh-board .tl { top: -5px; left: -5px; } .avh-board .tr { top: -5px; right: -5px; }
.avh-board .bl { bottom: -5px; left: -5px; } .avh-board .br { bottom: -5px; right: -5px; }
.avh-board .flabel { position: absolute; top: -24px; left: -1px; font-size: 13px; color: var(--avh-blue); }
.avh-board img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.avh-copy { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.avh-copy h1 { font: 500 34px/1.05 var(--avh-display); letter-spacing: -0.02em; margin: 0 0 10px; min-height: 2.1em; overflow-wrap: break-word; }
.avh-copy p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--avh-muted); }
.avh-caret { display: inline-block; width: 2px; height: 0.9em; background: var(--avh-blue); vertical-align: -0.08em; margin-left: 2px; animation: avh-blink 1s steps(1) infinite; }
@keyframes avh-blink { 50% { opacity: 0; } }
.avh-dims { position: absolute; bottom: -26px; left: 50%; translate: -50% 0; background: var(--avh-blue); color: var(--avh-white); font: 400 11px/1 var(--avh-mono); padding: 4px 6px; border-radius: 3px; white-space: nowrap; }
.avh-sel { outline: 1.3px solid var(--avh-blue); outline-offset: 3px; }
.avh-cursor { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; pointer-events: none; z-index: 5; transition: transform 1.2s var(--avh-ease), opacity 0.3s ease; }
.avh-cursor svg { width: 24px; height: 24px; flex: none; }
.avh-cursor .tag { margin: 18px 0 0 -4px; padding: 6px 12px; border-radius: 24px; background: var(--c); color: var(--avh-white); font-size: 13px; white-space: nowrap; }
.avh-cursor.c3 .tag { color: var(--avh-black); }

@media (max-width: 900px) {
  .avh { grid-template-columns: 1fr; }
  .avh-layers, .avh-props { display: none; }
  .avh-stage { min-height: 0; padding: 40px 16px; }
  .avh-board { grid-template-columns: 1fr; }
  .avh-board img { aspect-ratio: 4 / 3; }
  .avh-bar .who, .avh-bar .file { display: none; }
}

/* ---- Pen-tool curves in empty margins ---- */
.avpen { width: 280px; opacity: 0; transition: opacity 0.6s var(--avh-ease); }
.avpen.in { opacity: 1; }
.avpen svg { width: 100%; height: auto; overflow: visible; touch-action: none; }
.avpen { pointer-events: none; }
.avpen svg .anchor, .avpen svg .ctrl { pointer-events: auto; }
.avpen .stroke { fill: none; stroke: var(--avh-black); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.avpen .hl { stroke: var(--avh-purple); stroke-width: 1.2; }
.avpen .anchor { fill: var(--avh-white); stroke: var(--avh-purple); stroke-width: 1.5; cursor: grab; }
.avpen .anchor:hover { fill: var(--avh-purple); }
.avpen .ctrl { fill: var(--avh-purple); cursor: grab; }
.avpen .hint { font: 400 11px var(--avh-mono); color: var(--avh-muted); margin-top: 6px; }
@media (max-width: 1100px) {
  .avpen { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .avh, .avpen, .avh-cursor { transition: none; }
  .avh-caret { animation: none; }
}

/* ---- First-load entrance (home-hero.js playIntro) ---- */
.avh.avh-intro .avh-cursor { opacity: 0; } /* the wandering cursors wait for the entrance */
.avh-intro-outline { position: absolute; z-index: 6; width: 14px; height: 14px; border: 1.3px solid #008ff0; border-radius: 12px; pointer-events: none; }
.avh-intro-outline i { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.3px solid #008ff0; }
.avh-intro-outline .tl { top: -5px; left: -5px; } .avh-intro-outline .tr { top: -5px; right: -5px; }
.avh-intro-outline .bl { bottom: -5px; left: -5px; } .avh-intro-outline .br { bottom: -5px; right: -5px; }
.avh-intro-wire { position: absolute; z-index: 6; pointer-events: none; overflow: visible; }
.avh-intro-wire rect { fill: none; stroke: #008ff0; stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.avh-intro-wire rect.blk { fill: #008ff012; stroke: none; opacity: 0; }
.avh-intro-cursor { position: absolute; z-index: 7; opacity: 0; transition: none; }
.avh-intro-cursor .tag { color: #fff; font: 500 13px/1.2 Inter, "Inter Placeholder", system-ui, sans-serif; letter-spacing: -0.01em; }

.avh-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.avh-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 99px; background: #8427de; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: transform .2s; }
.avh-cta:hover { transform: translateY(-2px); }
.avh-cta-alt { background: transparent; color: #17221c; box-shadow: inset 0 0 0 1.5px #17221c; }
/* The buttons arrive after the entrance has delivered the copy. */
.avh-ctas { transition: opacity .4s ease .1s; }
.avh.avh-intro .avh-ctas { opacity: 0; pointer-events: none; transition: none; }