/* AspectAvy: a navy field panel with topographic contours, a slope-angle legend, and devices
   standing as a family. The home feature and the case study share the panel renderer
   (aspectavy-gallery.js); this sheet owns every avy-* class and loads last on both pages. */

:root {
  --avy-accent: #212c7a;
  --avy-chartreuse: #e4ed24;
  --avy-plate: #121838;
  --avy-plate-glow: #1f2a5e;
  --avy-plate-ink: #eef0f9;
  --avy-plate-muted: #9ca5d0;
  --avy-plate-line: #2f3868;
  --avy-plate-edge: #3a416f;
  --avy-window-bg: #0f1329;
  --avy-window-bar: #1a2148;
}

:root[data-theme=dark] {
  --avy-accent: #aab3ff;
}

.avy-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The plate: the same navy in both themes, with contour lines drawn once as a background. */

.avy-plate {
  --focus-ring: var(--avy-chartreuse);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--avy-plate-ink);
  background: radial-gradient(120% 90% at 18% 0%,var(--avy-plate-glow),transparent 58%),var(--avy-plate);
}

.avy-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none' stroke='%23e4ed24' stroke-opacity='.15' stroke-width='1'%3E%3Cpath d='M509,420C510,423,510,426,509,428C508,431,505,434,503,436C501,438,499,440,496,442C494,444,491,446,489,448C486,449,484,451,481,452C478,453,475,454,473,455C470,456,467,456,464,456C461,457,458,457,456,458C453,458,451,459,448,460C445,460,443,461,440,461C437,462,434,462,432,462C429,462,426,461,423,461C420,460,417,460,414,459C411,459,408,459,404,459C400,459,395,459,392,458C388,457,384,455,381,453C379,451,377,448,377,445C377,442,379,438,380,435C382,432,385,429,388,426C390,424,392,422,393,420C394,418,394,416,394,414C394,412,393,410,393,408C393,406,392,404,393,401C393,399,394,397,395,395C396,392,398,390,399,388C401,386,402,384,404,382C406,380,408,377,411,376C414,374,417,372,420,372C423,371,427,370,430,370C433,370,437,371,440,371C443,371,447,372,450,372C453,373,456,373,459,375C462,376,465,377,467,379C469,381,471,383,472,386C473,388,473,391,474,394C474,396,474,398,475,400C476,402,478,403,480,404C483,405,487,406,491,407C494,409,499,410,502,412C505,414,508,417,509,420Z'/%3E%3Cpath d='M587,420C590,426,589,432,587,438C585,444,580,449,575,454C571,459,565,464,560,468C555,472,550,476,545,479C539,483,534,486,528,489C522,491,516,493,510,495C503,496,497,497,491,498C485,499,479,499,474,500C468,502,463,503,457,505C452,506,446,508,440,509C434,509,428,510,422,509C416,509,410,508,404,507C398,506,392,505,385,504C378,504,371,504,363,503C354,503,345,503,337,501C329,499,320,496,315,491C309,487,306,480,306,473C305,467,309,459,313,452C316,446,323,439,328,434C332,428,337,424,339,420C342,416,342,412,342,408C342,404,340,399,339,395C339,390,338,385,339,380C340,375,342,370,344,366C346,361,349,357,353,352C356,347,360,343,364,338C368,334,373,329,378,325C384,322,390,318,397,316C404,315,411,314,418,314C426,313,433,314,440,315C447,316,454,317,461,318C467,320,474,321,480,323C487,325,493,328,498,332C502,336,506,341,508,347C511,352,511,359,512,364C513,369,513,374,515,377C518,381,521,383,527,386C532,388,541,390,548,393C556,396,566,399,573,404C579,408,585,414,587,420Z'/%3E%3Cpath d='M666,420C669,429,668,439,665,448C662,457,654,465,647,473C641,480,632,487,624,493C616,500,609,506,600,511C592,516,584,521,575,525C566,529,556,532,547,534C537,537,527,538,518,539C509,540,500,541,491,543C483,545,475,548,466,550C458,552,449,555,440,556C431,557,421,557,412,557C403,556,394,554,385,553C375,552,366,550,356,549C345,548,334,548,321,547C309,547,294,547,282,543C269,540,256,536,248,529C240,522,235,512,234,502C234,492,239,480,245,469C250,459,261,449,268,441C275,433,282,427,286,420C289,413,290,408,290,401C290,395,287,388,286,381C285,374,284,366,285,359C287,351,290,344,293,337C296,330,301,323,306,316C311,309,317,301,323,295C330,288,337,280,345,275C354,269,364,264,374,261C384,258,396,257,407,257C418,257,429,258,440,259C451,261,461,262,472,264C482,266,493,268,502,271C511,275,521,279,528,285C535,291,541,299,545,308C548,316,549,326,550,334C552,342,552,349,555,355C559,360,564,363,573,367C581,371,594,373,606,378C618,382,633,388,643,395C653,402,662,411,666,420Z'/%3E%3Cpath d='M744,420C749,432,747,446,743,457C739,469,729,481,719,491C710,501,699,510,688,519C677,527,667,535,656,542C645,550,634,557,622,562C610,567,596,571,584,574C571,577,557,578,545,580C532,582,521,584,509,586C498,588,487,592,475,595C464,598,452,601,440,603C428,604,415,605,403,604C390,604,378,601,365,599C353,597,341,595,326,594C312,593,297,593,280,592C263,590,243,590,227,586C210,582,192,576,181,567C170,557,163,544,163,530C162,517,169,500,177,487C185,473,199,460,208,449C218,438,227,429,232,420C237,411,238,404,238,395C238,386,233,377,232,367C232,358,230,347,232,337C233,327,237,317,242,308C247,298,253,289,260,279C267,270,274,260,283,251C291,242,301,232,312,224C324,217,337,210,351,206C365,202,381,201,395,200C410,200,425,202,440,204C455,205,469,207,483,210C497,213,511,215,524,219C536,224,549,230,559,238C568,246,576,258,581,269C586,280,586,293,589,304C591,315,590,325,595,332C600,340,607,344,619,349C630,354,648,357,664,363C680,369,701,377,714,386C727,396,739,408,744,420Z'/%3E%3Cpath d='M823,420C829,435,827,452,821,467C816,482,803,496,791,509C780,522,765,533,752,544C739,555,726,565,712,574C698,583,684,592,669,598C654,605,637,610,621,614C604,618,587,619,572,622C556,624,542,626,527,629C513,632,499,636,485,640C470,643,455,648,440,650C425,652,409,653,393,652C377,651,362,648,346,645C330,643,315,640,297,639C279,637,260,638,239,636C218,634,193,634,172,629C151,624,128,616,114,605C101,593,92,576,91,559C90,542,100,521,109,504C119,487,137,470,149,456C160,442,173,431,179,420C185,409,185,400,185,389C185,378,180,366,179,354C178,342,176,328,178,316C180,303,185,291,191,279C197,267,205,255,213,243C222,231,231,219,242,207C253,196,265,183,279,174C294,165,311,156,328,151C345,146,365,144,384,144C403,143,422,146,440,148C458,150,476,152,494,156C511,159,529,162,545,168C561,174,578,181,590,191C602,201,611,216,617,230C624,243,624,261,627,274C630,287,629,300,635,309C642,319,650,324,665,331C679,337,702,341,722,349C742,356,768,366,785,377C802,389,817,405,823,420Z'/%3E%3Cpath d='M901,420C909,438,906,459,900,477C893,495,877,512,863,527C850,543,832,556,816,569C800,582,784,595,768,606C751,617,734,627,716,635C697,643,677,649,658,654C638,658,618,660,599,663C580,666,562,668,545,672C527,675,511,681,494,685C476,689,458,695,440,697C422,700,402,700,383,699C364,699,346,694,327,692C308,689,289,685,268,683C246,682,223,682,198,680C172,678,142,678,117,672C92,666,64,657,47,642C31,628,20,607,19,587C18,567,30,542,41,521C53,500,75,480,89,463C103,447,118,434,125,420C133,406,133,395,133,382C133,369,127,355,125,340C124,326,122,310,124,295C127,280,133,264,140,250C147,235,157,221,167,207C177,193,188,178,201,164C215,150,229,135,246,124C264,112,284,102,305,96C326,90,350,88,372,87C395,86,418,89,440,92C462,94,484,98,505,102C526,106,547,109,567,116C586,123,606,132,620,144C635,157,646,174,654,191C661,207,662,228,665,244C669,260,668,275,675,287C683,298,694,304,711,312C728,320,755,325,779,334C803,343,835,354,855,369C876,383,894,402,901,420Z'/%3E%3Cpath d='M1169,140C1167,142,1166,144,1164,145C1163,147,1163,149,1162,151C1162,152,1161,154,1160,156C1159,158,1158,159,1156,161C1155,162,1152,163,1150,163C1148,164,1145,164,1143,165C1141,165,1139,165,1137,166C1135,167,1134,168,1132,170C1131,171,1129,173,1127,175C1125,176,1123,178,1120,179C1117,180,1115,181,1112,181C1109,181,1106,181,1103,180C1100,180,1098,179,1095,178C1093,177,1091,175,1089,173C1087,172,1086,169,1086,167C1085,165,1085,162,1085,160C1086,157,1086,155,1087,153C1087,151,1087,150,1086,149C1085,147,1083,146,1082,145C1080,143,1078,142,1077,140C1075,138,1074,136,1074,134C1073,132,1074,130,1075,129C1076,127,1077,125,1078,123C1080,122,1081,120,1082,119C1083,117,1084,115,1085,113C1086,111,1087,108,1089,107C1091,105,1093,103,1095,102C1098,101,1101,101,1104,101C1107,102,1110,103,1113,104C1115,105,1118,106,1120,107C1122,108,1124,109,1126,110C1128,111,1130,111,1132,112C1133,113,1135,113,1137,114C1139,114,1141,115,1143,115C1145,116,1148,116,1151,116C1153,117,1157,117,1160,117C1163,118,1166,119,1169,121C1171,122,1173,124,1173,126C1174,129,1174,131,1173,133C1172,136,1170,138,1169,140Z'/%3E%3Cpath d='M1232,140C1229,145,1225,149,1223,153C1220,157,1219,161,1217,165C1216,169,1215,173,1213,177C1211,181,1208,185,1204,188C1200,190,1194,192,1189,194C1184,195,1178,196,1173,197C1168,198,1164,198,1159,200C1155,202,1152,205,1149,208C1145,212,1141,216,1136,220C1131,223,1126,227,1120,229C1114,232,1107,233,1101,234C1094,235,1088,234,1081,233C1075,232,1068,230,1063,227C1057,225,1052,221,1048,217C1045,213,1042,207,1041,202C1039,197,1040,190,1040,185C1041,180,1043,175,1043,171C1043,166,1043,163,1041,160C1040,157,1036,154,1032,151C1029,148,1023,144,1020,140C1017,136,1014,131,1013,127C1012,122,1014,118,1016,114C1018,109,1021,106,1024,102C1027,98,1030,95,1033,90C1035,86,1037,82,1039,77C1042,72,1044,67,1048,63C1052,59,1057,55,1063,53C1069,51,1076,51,1083,51C1090,52,1097,54,1103,56C1109,58,1115,62,1120,64C1125,66,1130,69,1134,71C1139,73,1143,74,1147,76C1151,77,1155,79,1159,80C1164,81,1168,82,1173,83C1178,84,1184,84,1190,85C1197,86,1205,86,1212,88C1219,90,1227,92,1232,96C1237,99,1241,104,1243,109C1245,114,1244,120,1242,125C1240,130,1235,135,1232,140Z'/%3E%3Cpath d='M1295,140C1290,147,1284,153,1281,160C1277,166,1275,172,1272,179C1270,185,1269,192,1266,198C1262,204,1258,210,1252,215C1245,219,1236,222,1228,224C1220,227,1211,227,1203,229C1195,231,1188,232,1182,235C1175,238,1171,242,1165,247C1159,252,1153,259,1145,265C1138,270,1129,276,1120,280C1111,284,1100,286,1090,287C1080,288,1069,287,1059,286C1049,284,1039,281,1031,277C1022,273,1014,267,1008,260C1002,254,998,245,996,237C993,229,994,219,995,211C996,203,999,195,999,188C1000,181,1000,176,997,171C994,166,988,162,983,157C977,152,968,146,963,140C958,134,954,126,953,119C951,112,954,105,957,99C960,92,966,86,970,80C974,74,979,69,983,62C987,56,989,49,994,41C998,34,1001,26,1008,19C1014,13,1022,7,1031,4C1040,1,1052,0,1062,1C1072,2,1084,6,1093,9C1103,12,1112,17,1120,21C1128,25,1135,28,1142,31C1149,35,1155,37,1162,39C1168,42,1175,44,1181,46C1188,48,1195,50,1203,51C1211,52,1220,53,1230,54C1240,55,1253,56,1264,59C1274,61,1287,65,1295,70C1303,76,1310,83,1313,91C1315,99,1313,108,1311,116C1308,125,1300,133,1295,140Z'/%3E%3Cpath d='M1359,140C1352,150,1344,158,1339,167C1333,176,1331,184,1328,193C1324,201,1323,211,1319,219C1314,227,1308,236,1299,242C1291,248,1279,252,1267,255C1256,258,1243,259,1233,261C1222,263,1213,265,1204,269C1196,273,1189,279,1181,286C1173,293,1165,302,1154,310C1144,317,1133,325,1120,331C1107,336,1093,339,1079,340C1066,342,1051,341,1037,338C1024,336,1010,332,998,326C987,320,975,313,967,304C959,295,953,283,951,272C948,261,949,248,950,237C951,225,955,214,956,205C956,196,956,189,952,182C949,175,941,170,933,163C925,156,914,149,907,140C900,131,894,121,892,112C891,102,894,92,898,84C902,75,910,67,916,59C922,51,928,43,934,34C939,26,942,15,948,6C953,-4,958,-16,967,-24C976,-33,987,-41,999,-45C1011,-49,1027,-50,1041,-49C1055,-48,1071,-43,1084,-38C1097,-34,1109,-27,1120,-22C1131,-17,1141,-12,1150,-8C1160,-4,1168,0,1177,3C1186,6,1194,9,1204,12C1213,15,1222,17,1233,19C1244,20,1256,21,1270,23C1284,25,1301,26,1315,29C1330,33,1347,38,1358,45C1369,53,1379,63,1382,74C1386,84,1383,97,1379,108C1376,119,1366,130,1359,140Z'/%3E%3C/svg%3E") 50% 50% / 1400px 700px no-repeat;
  pointer-events: none;
}

/* Devices */

.avy-window {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--avy-window-bg);
  box-shadow: 0 0 0 1px var(--avy-plate-edge),0 30px 60px #00000059;
}

.avy-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--avy-window-bar);
  border-bottom: 1px solid var(--avy-plate-line);
  font: var(--t-label) var(--font-mono);
  color: var(--avy-plate-muted);
}

.avy-window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--avy-plate-edge);
}

.avy-window-bar span:nth-child(3) {
  background: var(--avy-chartreuse);
}

.avy-window-bar i {
  font-style: normal;
  margin-left: 10px;
}

.avy-window img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600/1116;
  background: #141a3a;
}

.avy-phone {
  position: relative;
  flex: 0 0 36%;
  width: 36%;
  margin: 0;
}

.avy-phone+.avy-phone {
  margin-left: -8%;
}

.avy-phone-frame {
  padding: 6px;
  background: #0b0e20;
  border-radius: 35px;
  box-shadow: 0 0 0 1px var(--avy-plate-edge),0 28px 48px #00000073;
}

.avy-phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720/1566;
  border-radius: 29px;
  background: #1d2650;
}

/* A ridge line: low, high, mid. Each phone rises into place as the panel scrolls in. */

.avy-phone--a {
  --avy-rise: 64px;
  z-index: 1;
}

.avy-phone--b {
  --avy-rise: 104px;
  z-index: 2;
  margin-bottom: 44px;
}

.avy-phone--c {
  --avy-rise: 84px;
  z-index: 3;
  margin-bottom: 16px;
}

.avy-panel .avy-phone {
  transform: translateY(calc(var(--avy-rise) * (1 - var(--fan-open))));
}

.iris-motion-on .avy-phone {
  transition: transform var(--t-slow) var(--ease);
}

/* The panel */

.avy-panel {
  --fan-open: 1;
  position: relative;
  min-height: 540px;
  border-radius: var(--radius-lg);
}

.avy-panel-signature {
  position: absolute;
  left: var(--s-5);
  top: var(--s-5);
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--t-caption);
  color: var(--avy-plate-ink);
}

.avy-panel-signature>span {
  font: var(--t-label) var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--avy-plate-muted);
}

.avy-panel-kicker {
  position: absolute;
  right: var(--s-5);
  top: var(--s-5);
  z-index: 4;
  font: italic 400 18px var(--font-serif);
  letter-spacing: var(--track-serif);
  color: var(--avy-chartreuse);
}

.avy-panel-kicker::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 9px 2px 0;
  border-radius: 50%;
  background: var(--avy-chartreuse);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--avy-chartreuse) 15%,transparent);
}

.avy-panel-stage {
  position: absolute;
  inset: 0;
}

.avy-panel-window {
  position: absolute;
  left: 4%;
  top: 40px;
  width: 52%;
}

.avy-panel-phones {
  position: absolute;
  right: 4%;
  bottom: 30px;
  width: 45%;
  display: flex;
  align-items: flex-end;
}

.avy-legend {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  z-index: 4;
  width: 150px;
  display: grid;
  gap: var(--s-1);
  font: var(--t-label) var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--avy-plate-muted);
}

.avy-legend i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg,#3f9d4a,#dfd128 34%,#ec8a1e 56%,#d43a30 78%,#8a41b6);
}

.avy-legend b {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
}

/* Case-study hero variant: the header is the plate, so the panel is only the phones. */

.avy-panel--hero {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
}

.avy-panel--hero .avy-panel-signature {
  display: none;
}

.avy-panel--hero .avy-panel-kicker {
  right: 0;
  top: 20px;
}

.avy-panel--hero .avy-legend {
  left: auto;
  right: 0;
  top: 52px;
  bottom: auto;
}

.avy-panel--hero .avy-panel-phones {
  right: 0;
  bottom: 0;
  width: 100%;
}

/* Home feature: a split header, the panel, and the three layers. */

.portfolio-grid .avy-feature {
  --feature-accent: var(--avy-accent);
  position: relative;
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  margin: 0 0 var(--s-6);
  padding: var(--s-7) 0 0;
  border-top: 1px solid var(--line);
}

.avy-feature-head {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: var(--s-5) 6%;
  align-items: end;
}

.avy-feature-stage {
  margin-block: var(--s-6) var(--s-5);
}

.avy-feature .work-meta {
  width: 100%;
  color: var(--muted);
  font: var(--t-label)/1.5 var(--font-mono);
  margin-bottom: 24px;
  gap: 24px;
}

.iris-home .avy-project {
  color: var(--ink);
  font: 500 var(--t-h3)/var(--lh-heading) var(--font-display);
  letter-spacing: -.03em;
  margin: 0 0 16px;
}

/* The headline tier itself is shared with the other features in showcase.css. */
.avy-headline {
  margin: 0;
}

.avy .avy-title em {
  font-family: var(--font-serif);
  font-size: 1em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--track-serif);
  color: var(--avy-accent);
}

.avy-feature-copy {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
}

.avy-summary {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 44ch;
  margin: 0;
  text-wrap: pretty;
}

.avy-layers {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--s-5) var(--s-6);
  margin: 0;
  padding: var(--s-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.avy-layers li {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.avy-layers span {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--avy-accent);
}

.avy-layers b {
  font: 500 16px/1.4 var(--font-display);
  color: var(--ink);
}

.avy-layers p {
  margin: 0;
  font-size: var(--t-copy);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* Case study */

.avy {
  background: var(--bg);
  color: var(--ink);
}

.avy-inner {
  width: min(var(--content-max),calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.avy-hero {
  padding: var(--s-7) 0 0;
}

.avy-hero-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-6) 6%;
  align-items: end;
}

.avy-eyebrow,.avy-kicker,.avy-facts span,.avy-specs dt,.avy-list li::before,.avy-route span,.avy-shared li,.avy-node span,.avy-arch-bus,.avy-arch-ground {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.avy-eyebrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-6);
  color: var(--avy-plate-muted);
}

.avy-wordmark {
  display: block;
  width: auto;
  height: 34px;
  margin: 0 0 var(--s-5);
  filter: brightness(0) invert(1);
}

.avy-title {
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
  text-wrap: balance;
  margin: 0 0 var(--s-5);
}

.avy-hero .avy-title em {
  color: var(--avy-chartreuse);
}

.avy-lede {
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 30em;
  margin: 0;
  color: var(--avy-plate-muted);
  text-wrap: pretty;
}

.avy-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin: var(--s-5) 0 var(--s-6);
}

.avy-hero .text-link {
  color: var(--avy-plate-ink);
}

.avy-hero-stage {
  position: relative;
  min-height: 560px;
}

.avy-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  margin: var(--s-6) auto 0;
  padding: var(--s-5) 0 var(--s-6);
  list-style: none;
  border-top: 1px solid var(--avy-plate-line);
}

.avy-facts li {
  display: grid;
  gap: 4px;
  font-size: var(--t-copy);
  color: var(--avy-plate-ink);
}

.avy-facts span {
  color: var(--avy-chartreuse);
}

.avy-section {
  padding-block: var(--section-space);
}

.avy-section--band {
  background: var(--band);
  border-block: 1px solid var(--line);
}

.avy-kicker {
  margin: 0 0 var(--s-4);
  color: var(--avy-accent);
}

.avy-section h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: -.04em;
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 0 var(--s-5);
}

.avy-section p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

.avy-split {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: var(--s-6) 8%;
  align-items: start;
}

.avy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: avy;
}

.avy-list li {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  counter-increment: avy;
}

.avy-list li::before {
  content: counter(avy,decimal-leading-zero);
  padding-top: 5px;
  color: var(--avy-accent);
}

.avy-list b {
  display: block;
  font: 500 18px/1.3 var(--font-display);
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

.avy-list p {
  font-size: var(--t-copy);
}

.avy-split--native {
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  align-items: center;
}

.avy-native-figure {
  width: min(100%,300px);
  margin: 0;
  justify-self: center;
}

.avy-native-figure .avy-phone-frame {
  box-shadow: 0 0 0 1px var(--avy-plate-edge),0 24px 44px #10173a33;
}

.avy-native-figure figcaption {
  margin-top: var(--s-4);
  text-align: center;
  font: var(--t-label)/1.5 var(--font-mono);
  color: var(--muted);
}

.avy-list--grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 var(--s-7);
  margin-top: var(--s-6);
}

.avy-web-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-4) 8%;
  align-items: end;
  margin-bottom: var(--s-6);
}

.avy-web-head h2 {
  margin-bottom: 0;
}

.avy-web-figure {
  margin: 0;
}

.avy-web-figure figcaption {
  margin-top: var(--s-3);
  font: var(--t-label)/1.5 var(--font-mono);
  color: var(--muted);
}

.avy-shared {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.avy-shared li {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--avy-accent);
  background: var(--paper);
}

/* Platform diagram on the plate */

.avy-arch {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding: var(--s-6);
  border-radius: var(--radius-lg);
}

.avy-arch-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--s-4);
}

.avy-node {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--avy-plate-line);
  border-radius: var(--radius);
  background: #ffffff0a;
}

.avy-node span {
  color: var(--avy-chartreuse);
}

.avy-node b {
  font: 500 17px/1.3 var(--font-display);
  letter-spacing: -.02em;
}

.avy-node small {
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--avy-plate-muted);
}

.avy-arch-bus {
  position: relative;
  text-align: center;
  padding: var(--s-1) 0;
  color: var(--avy-chartreuse);
}

.avy-arch-bus::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed color-mix(in srgb,var(--avy-chartreuse) 40%,transparent);
}

.avy-arch-bus span {
  position: relative;
  padding: 0 var(--s-3);
  background: var(--avy-plate);
}

.avy-arch-data {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid color-mix(in srgb,var(--avy-chartreuse) 25%,transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb,var(--avy-chartreuse) 7%,transparent);
}

.avy-arch-data b {
  font: 500 17px/1.3 var(--font-display);
  letter-spacing: -.02em;
}

.avy-arch-data small {
  font-size: var(--t-caption);
  color: var(--avy-plate-muted);
}

.avy-arch-ground {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-2);
  color: var(--avy-plate-muted);
}

.avy-arch-ground span::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--avy-chartreuse);
}

/* Delivery: a route with three waypoints. */

.avy-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--s-6);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.avy-route::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  border-top: 1px solid var(--line);
}

.avy-route li {
  position: relative;
  padding-top: var(--s-5);
  min-width: 0;
}

.avy-route li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--avy-chartreuse);
  box-shadow: 0 0 0 3px var(--bg),0 0 0 4px var(--avy-accent);
}

.avy-route span {
  color: var(--avy-accent);
}

.avy-route b {
  display: block;
  font: 500 18px/1.3 var(--font-display);
  letter-spacing: -.02em;
  margin: 6px 0;
}

.avy-route p {
  font-size: var(--t-copy);
}

/* Specs and credit */

.avy-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: var(--s-5) var(--s-6);
  margin: 0;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.avy-specs div {
  min-width: 0;
}

.avy-specs dt {
  margin-bottom: 6px;
  color: var(--muted);
}

.avy-specs dd {
  margin: 0;
  font-size: var(--t-copy);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.avy-section--credit {
  padding-top: 0;
}

.avy-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.avy-credit img {
  width: 150px;
  height: auto;
  margin: 0;
}

:root[data-theme=dark] .avy-credit img {
  filter: brightness(0) invert(.92);
}

.avy-credit p {
  flex: 1 1 24em;
  max-width: 44ch;
  margin: 0;
  font-size: var(--t-copy);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* Responsive */

@media(max-width:1100px) {
  .avy-phone-frame {
    padding: 5px;
    border-radius: 29px;
  }
  .avy-phone-frame img {
    border-radius: 24px;
  }
  .avy-panel {
    min-height: 500px;
  }
  .avy-hero-stage {
    min-height: 520px;
  }
}

@media(max-width:900px) {
  .avy-panel {
    min-height: 0;
    padding: 64px 20px 22px;
  }
  .avy-panel-stage {
    position: static;
  }
  .avy-panel-window {
    position: static;
    width: 100%;
  }
  .avy-panel-phones {
    position: static;
    width: min(100%,520px);
    margin: -16% auto 0;
  }
  .avy-legend {
    position: static;
    margin: 22px 0 0;
  }
  .avy-hero-inner {
    grid-template-columns: 1fr;
  }
  .avy-hero-stage {
    min-height: 0;
    margin-top: var(--s-5);
  }
  .avy-panel--hero {
    position: static;
    padding: 72px 0 0;
  }
  .avy-panel--hero .avy-panel-phones {
    width: min(100%,520px);
    margin: 0 auto;
  }
  .avy-panel--hero .avy-legend {
    position: absolute;
    top: 48px;
    right: 0;
    margin: 0;
  }
  .avy-split,.avy-web-head {
    grid-template-columns: 1fr;
  }
  .avy-web-head h2 {
    margin-bottom: var(--s-4);
  }
  .avy-list--grid {
    grid-template-columns: 1fr;
  }
  .avy-arch-row {
    grid-template-columns: 1fr;
  }
}

@media(max-width:760px) {
  .avy-feature-head {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .avy-feature-copy {
    padding-bottom: 0;
  }
  .avy-route {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding-left: 30px;
  }
  .avy-route::before {
    left: 7px;
    right: auto;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .avy-route li {
    padding-top: 0;
  }
  .avy-route li::before {
    left: -30px;
    top: 2px;
  }
  .avy-arch {
    padding: var(--s-5);
  }
}

@media(max-width:680px) {
  .avy-layers {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}

@media(max-width:560px) {
  .avy-panel {
    padding: 22px 16px 20px;
  }
  .avy-panel-signature,.avy-panel-kicker {
    position: static;
  }
  .avy-panel-kicker {
    display: block;
    margin: 8px 0 18px;
    font-size: var(--t-body);
  }
  .avy-phone-frame {
    padding: 4px;
    border-radius: 22px;
  }
  .avy-phone-frame img {
    border-radius: 18px;
  }
  .avy-panel-phones {
    margin-top: -12%;
  }
  .avy-phone--b {
    margin-bottom: 28px;
  }
  .avy-phone--c {
    margin-bottom: 10px;
  }
  .avy-panel--hero {
    padding-top: 64px;
  }
  .avy-panel--hero .avy-panel-kicker {
    position: absolute;
    top: 0;
    margin: 0;
  }
  .avy-panel--hero .avy-legend {
    top: 32px;
  }
  .avy-hero-stage .avy-panel--hero {
    padding-top: 84px;
  }
  .avy-specs {
    padding: var(--s-5);
  }
}