/* everkept.day, v2: calm and editorial. Photographs carry the feeling; a large serif and small
   plain text do the rest. Light paper sections, with dark sections for rhythm. The privacy and
   support pages keep site.css. */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --desk: #F3F1EC;
  --surface: #FCFBF8;
  --line: #E0DDD6;
  --text: #161615;
  --text-2: #55544F;
  --text-3: #6E6D67;
  --ink: #0B0B0A;
  --ink-text: #F2F1EE;
  --ink-text-2: #A3A29D;
  --ink-line: #2A2A28;
  --cobalt: #4863D6;
  --gutter: clamp(22px, 5.6vw, 80px);
  --section: clamp(64px, 7.5vw, 104px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--desk); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 22px; background: var(--surface); color: var(--text); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.display, .title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 0.94; }
.display em, .title em { font-style: italic; color: var(--text-2); }
.title { font-size: clamp(50px, 7vw, 96px); }
.lead { font-size: clamp(16px, 1.3vw, 17.5px); color: var(--text-2); max-width: 34rem; text-wrap: pretty; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.pill { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 26px; background: #FFFFFF; color: var(--ink); font-size: 15.5px; font-weight: 500; text-decoration: none; }
.text-link { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }

/* Photo sections: the photograph fills the section; a scrim keeps white text readable on any
   part of it, and a soft shadow lifts the letters off bright spots. */
.photo { position: relative; overflow: hidden; background: var(--ink); color: #FFFFFF; isolation: isolate; }
.photo > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.photo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url("../img/grain.png") 0 0 / 180px 180px; opacity: 0.06; }
.photo .shadowed { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 18px rgba(0, 0, 0, 0.3); }
.photo .eyebrow { color: rgba(255, 255, 255, 0.86); }
.photo .display em, .photo .title em { color: rgba(255, 255, 255, 0.86); }

/* Phones hold real captures from the app, in an iPhone 17 Pro frame: a titanium edge, the black
   bezel, the Dynamic Island over the capture's status bar, and the side buttons. */
/* A default width with no specificity, so each section's own size wins. */
:where(.phone) { --w: 300px; }
.phone { position: relative; width: var(--w); padding: calc(var(--w) * 0.03); border-radius: calc(var(--w) * 0.175);
  background: linear-gradient(150deg, #56554F 0%, #2B2A27 14%, #1A1A18 50%, #2E2D2A 86%, #4A4944 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * 0.006) rgba(255, 255, 255, 0.18), inset 0 0 0 calc(var(--w) * 0.012) #0A0A09, 0 30px 60px rgba(46, 42, 36, 0.28); }
.phone img { position: relative; width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: top; border-radius: calc(var(--w) * 0.148); background: #000; box-shadow: 0 0 0 calc(var(--w) * 0.012) #050505; }
.phone::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(var(--w) * 0.058); width: calc(var(--w) * 0.29); height: calc(var(--w) * 0.085); translate: -50% 0; border-radius: 999px; background: #000; }
.phone::after { content: ""; position: absolute; right: calc(var(--w) * -0.011); top: 27%; width: calc(var(--w) * 0.012); height: 13%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #1E1E1C, #4A4944); }
.phone .buttons { position: absolute; left: calc(var(--w) * -0.011); top: 19%; width: calc(var(--w) * 0.012); height: 5%; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #1E1E1C, #4A4944);
  box-shadow: 0 calc(var(--w) * 0.14) 0 0 #3A3934, 0 calc(var(--w) * 0.24) 0 0 #3A3934; }
.photo .phone, .dark .phone { box-shadow: inset 0 0 0 calc(var(--w) * 0.006) rgba(255, 255, 255, 0.2), inset 0 0 0 calc(var(--w) * 0.012) #0A0A09, 0 40px 80px rgba(0, 0, 0, 0.5); }
.pair { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.pair .phone:nth-child(2) { margin-left: calc(var(--w) * -0.14); margin-top: calc(var(--w) * 0.36); z-index: 1; }

/* ---------- Header ---------- */
.site-header { position: absolute; left: 0; right: 0; top: 0; z-index: 10; padding-top: 28px; color: #FFFFFF; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 28px; line-height: 1; text-decoration: none; }
/* The silver seal on its own. The app icon's black square is only for the Home Screen. */
.brand .mark { width: 32px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.brand .rosette { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #DAD9D4 36%, #A3A29D 74%, #7E7D79 100%); }
.brand .face { width: 70%; height: 70%; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5); font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1; color: #6F6E6A; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.site-nav a { text-decoration: none; opacity: 0.92; }
.site-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.site-nav .beta { height: 38px; padding: 0 18px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, 0.6); display: inline-flex; align-items: center; opacity: 1; }
.site-nav .beta:hover { text-decoration: none; background: rgba(255, 255, 255, 0.12); }

/* ---------- Hero ---------- */
.hero { --scrim: linear-gradient(90deg, rgba(11,11,10,0.74) 0%, rgba(11,11,10,0.58) 48%, rgba(11,11,10,0.28) 72%, rgba(11,11,10,0.12) 100%), linear-gradient(180deg, rgba(11,11,10,0.45) 0%, rgba(11,11,10,0) 26%, rgba(11,11,10,0) 62%, rgba(11,11,10,0.4) 100%); min-height: min(100svh, 960px); display: flex; align-items: center; padding: 140px 0 72px; }
.hero > .bg { object-position: 50% 26%; }
@media (min-width: 1081px) {
  /* The photo is 2000 × 2656 and its people stand at about 60% of its height. Keep them along the
     bottom edge at any desktop width, clear of the headline. */
  .hero > .bg { object-position: 50% clamp(calc(min(100svh, 960px) - 132.8vw), calc(min(100svh, 960px) - 56px - 79.7vw), 0px); }
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.hero .display { font-size: clamp(60px, 10vw, 144px); line-height: 0.9; }
.hero-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 236px)); gap: 20px 40px; margin-top: 36px; font-size: 15px; line-height: 1.5; }
.hero-cols p { color: rgba(255, 255, 255, 0.94); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.hero .phone { --w: clamp(260px, 23vw, 330px); }

/* ---------- Statement ---------- */
.statement { padding: var(--section) 0; }
.statement p.big { font-family: var(--serif); font-size: clamp(32px, 3.9vw, 56px); line-height: 1.1; letter-spacing: -0.008em; max-width: 64rem; margin-top: 24px; text-wrap: pretty; }

/* ---------- Feature sections ---------- */
.feature { padding: var(--section) 0; overflow: hidden; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.feature-grid.media-first > .media { order: -1; }
.feature-grid > *, .hero-grid > *, .privacy-grid > * { min-width: 0; }
.feature .media { --w: clamp(250px, 21vw, 300px); display: flex; justify-content: center; }
.media .phone { --w: clamp(250px, 21vw, 300px); }
.rows { border-bottom: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.rows .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.surface { background: var(--surface); }

.dark { background: var(--ink); color: var(--ink-text); }
.dark .eyebrow, .dark .lead, .dark .title em, .dark .rows .k { color: var(--ink-text-2); }
.dark .rows, .dark .rows li { border-color: var(--ink-line); }

/* Photo bands */
.band { --scrim: linear-gradient(0deg, rgba(11,11,10,0.66) 0%, rgba(11,11,10,0.34) 45%, rgba(11,11,10,0.12) 100%); min-height: clamp(420px, 42vw, 580px); display: flex; align-items: flex-end; padding: 0 0 clamp(48px, 6vw, 84px); }
.band > .bg { object-position: 50% 45%; }
.band p { font-family: var(--serif); font-size: clamp(38px, 5.4vw, 80px); line-height: 1; }
.band p em { font-style: italic; color: rgba(255, 255, 255, 0.88); }

.letter { --scrim: linear-gradient(90deg, rgba(11,11,10,0.72) 0%, rgba(11,11,10,0.5) 50%, rgba(11,11,10,0.22) 78%); padding: var(--section) 0; }
.letter .lead { color: rgba(255, 255, 255, 0.92); }

/* Moods */
.moods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin-top: 8px; }
.moods li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.moods span { width: 16px; height: 16px; flex-shrink: 0; background: var(--c); }

/* Ask */
.ai-badge { display: inline-flex; align-items: center; gap: 16px; width: fit-content; padding: 16px 22px 16px 18px; border-radius: 20px; background: var(--desk); border: 1px solid var(--line); }
.ai-badge .t { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
.ai-badge p:not(.t) { font-size: 14px; color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 9px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--desk); font-size: 14px; }

/* Widgets */
.widgets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 20px; align-items: start; }
.widgets .w { border-radius: 15.9%; overflow: hidden; box-shadow: 0 18px 36px rgba(46, 42, 36, 0.2), 0 0 0 1px rgba(22, 22, 21, 0.05); }
.widgets .w-medium { grid-column: 1 / 3; border-radius: 7.4% / 15.9%; }
.widgets .lock { grid-column: 3; grid-row: 1 / 3; width: clamp(150px, 13vw, 190px); border-radius: 28px; overflow: hidden; box-shadow: 0 24px 48px rgba(46, 42, 36, 0.24); }
.widgets .lock img { aspect-ratio: 720 / 1565; object-fit: cover; object-position: top; height: 100%; }

/* Privacy */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.promise { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.promise h3 { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.05; }
.promise p { font-size: 14.5px; color: var(--text-2); }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }

/* Footer */
.site-footer { background: var(--ink); color: var(--ink-text); padding: clamp(64px, 8vw, 96px) 0 44px; }
.site-footer .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.site-footer .sign { font-family: var(--serif); font-size: clamp(44px, 4.6vw, 64px); line-height: 0.98; }
.site-footer .sign em { font-style: italic; color: var(--ink-text-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 14.5px; color: var(--ink-text-2); }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--ink-text); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .fine { margin-top: 48px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-text-2); }

/* Settle in as they scroll into view (site.js adds .motion and .is-in). */
@media (prefers-reduced-motion: no-preference) {
  .motion .rise { transition: opacity 0.8s ease, translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  .motion .rise:not(.is-in) { opacity: 0; translate: 0 22px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .phone { display: none; }
  .feature-grid, .privacy-grid { grid-template-columns: 1fr; }
  .feature-grid.media-first > .media { order: 0; }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .site-nav a:not(.beta) { display: none; }
  .brand { font-size: 24px; }
  .brand .mark { width: 28px; height: 28px; }
  .brand .face { font-size: 13px; }
  .hero { --scrim: linear-gradient(180deg, rgba(11,11,10,0.66) 0%, rgba(11,11,10,0.5) 45%, rgba(11,11,10,0.36) 100%); min-height: auto; align-items: flex-start; padding: 120px 0 56px; }
  .hero-cols { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; font-size: 15.5px; }
  .hero-cols p { max-width: 30rem; }
  .hero .phone { display: block; --w: min(280px, 72vw); margin: 44px auto -120px; }
  .hero { overflow: hidden; }
  .rows li { grid-template-columns: 118px minmax(0, 1fr); font-size: 14.5px; }
  .moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two overlapping phones must fit the screen: 1.86 phone widths in all. */
  .pair .phone { --w: min(210px, calc((100vw - 2 * var(--gutter)) / 1.9)); }
  .widgets { grid-template-columns: 1fr 1fr; }
  .widgets .lock { display: none; }
  .promises { grid-template-columns: 1fr; }
  .promise { padding: 20px; }
  .letter { --scrim: linear-gradient(180deg, rgba(11,11,10,0.7) 0%, rgba(11,11,10,0.45) 55%, rgba(11,11,10,0.25) 100%); }
}

/* Shapes: one per mood, verbatim from the app (design/shapes.txt). */
.sh-circle { border-radius: 50%; }
.sh-square { border-radius: 22%; }
.sh-circle { border-radius: 50%; }
.sh-square { border-radius: 22%; }
.sh-scallop{clip-path:polygon(50.0% 0.0%,52.2% 0.2%,54.3% 0.8%,56.4% 1.7%,58.3% 3.0%,60.1% 4.4%,61.8% 6.1%,64.0% 5.5%,66.3% 5.1%,68.6% 5.0%,70.9% 5.2%,73.0% 5.8%,75.0% 6.7%,76.8% 8.0%,78.3% 9.5%,79.6% 11.4%,80.7% 13.4%,81.5% 15.6%,82.2% 17.8%,84.4% 18.5%,86.6% 19.3%,88.6% 20.4%,90.5% 21.7%,92.0% 23.2%,93.3% 25.0%,94.2% 27.0%,94.8% 29.1%,95.0% 31.4%,94.9% 33.7%,94.5% 36.0%,93.9% 38.2%,95.6% 39.9%,97.0% 41.7%,98.3% 43.6%,99.2% 45.7%,99.8% 47.8%,100.0% 50.0%,99.8% 52.2%,99.2% 54.3%,98.3% 56.4%,97.0% 58.3%,95.6% 60.1%,93.9% 61.8%,94.5% 64.0%,94.9% 66.3%,95.0% 68.6%,94.8% 70.9%,94.2% 73.0%,93.3% 75.0%,92.0% 76.8%,90.5% 78.3%,88.6% 79.6%,86.6% 80.7%,84.4% 81.5%,82.2% 82.2%,81.5% 84.4%,80.7% 86.6%,79.6% 88.6%,78.3% 90.5%,76.8% 92.0%,75.0% 93.3%,73.0% 94.2%,70.9% 94.8%,68.6% 95.0%,66.3% 94.9%,64.0% 94.5%,61.8% 93.9%,60.1% 95.6%,58.3% 97.0%,56.4% 98.3%,54.3% 99.2%,52.2% 99.8%,50.0% 100.0%,47.8% 99.8%,45.7% 99.2%,43.6% 98.3%,41.7% 97.0%,39.9% 95.6%,38.2% 93.9%,36.0% 94.5%,33.7% 94.9%,31.4% 95.0%,29.1% 94.8%,27.0% 94.2%,25.0% 93.3%,23.2% 92.0%,21.7% 90.5%,20.4% 88.6%,19.3% 86.6%,18.5% 84.4%,17.8% 82.2%,15.6% 81.5%,13.4% 80.7%,11.4% 79.6%,9.5% 78.3%,8.0% 76.8%,6.7% 75.0%,5.8% 73.0%,5.2% 70.9%,5.0% 68.6%,5.1% 66.3%,5.5% 64.0%,6.1% 61.8%,4.4% 60.1%,3.0% 58.3%,1.7% 56.4%,0.8% 54.3%,0.2% 52.2%,0.0% 50.0%,0.2% 47.8%,0.8% 45.7%,1.7% 43.6%,3.0% 41.7%,4.4% 39.9%,6.1% 38.2%,5.5% 36.0%,5.1% 33.7%,5.0% 31.4%,5.2% 29.1%,5.8% 27.0%,6.7% 25.0%,8.0% 23.2%,9.5% 21.7%,11.4% 20.4%,13.4% 19.3%,15.6% 18.5%,17.8% 17.8%,18.5% 15.6%,19.3% 13.4%,20.4% 11.4%,21.7% 9.5%,23.2% 8.0%,25.0% 6.7%,27.0% 5.8%,29.1% 5.2%,31.4% 5.0%,33.7% 5.1%,36.0% 5.5%,38.2% 6.1%,39.9% 4.4%,41.7% 3.0%,43.6% 1.7%,45.7% 0.8%,47.8% 0.2%)}
.sh-rosette{clip-path:polygon(50.0% 0.0%,51.6% 0.1%,53.1% 0.6%,54.6% 1.2%,56.1% 2.1%,57.4% 3.1%,59.0% 2.6%,60.7% 2.2%,62.3% 2.0%,63.9% 2.1%,65.5% 2.4%,66.9% 3.1%,68.2% 4.0%,69.4% 5.1%,70.6% 6.3%,71.6% 7.7%,73.3% 7.7%,74.9% 7.8%,76.5% 8.2%,78.0% 8.7%,79.4% 9.5%,80.6% 10.6%,81.6% 11.8%,82.4% 13.3%,83.0% 14.8%,83.6% 16.4%,85.2% 17.0%,86.7% 17.6%,88.2% 18.4%,89.4% 19.4%,90.5% 20.6%,91.3% 22.0%,91.8% 23.5%,92.2% 25.1%,92.3% 26.7%,92.3% 28.4%,93.7% 29.4%,94.9% 30.6%,96.0% 31.8%,96.9% 33.1%,97.6% 34.5%,97.9% 36.1%,98.0% 37.7%,97.8% 39.3%,97.4% 41.0%,96.9% 42.6%,97.9% 43.9%,98.8% 45.4%,99.4% 46.9%,99.9% 48.4%,100.0% 50.0%,99.9% 51.6%,99.4% 53.1%,98.8% 54.6%,97.9% 56.1%,96.9% 57.4%,97.4% 59.0%,97.8% 60.7%,98.0% 62.3%,97.9% 63.9%,97.6% 65.5%,96.9% 66.9%,96.0% 68.2%,94.9% 69.4%,93.7% 70.6%,92.3% 71.6%,92.3% 73.3%,92.2% 74.9%,91.8% 76.5%,91.3% 78.0%,90.5% 79.4%,89.4% 80.6%,88.2% 81.6%,86.7% 82.4%,85.2% 83.0%,83.6% 83.6%,83.0% 85.2%,82.4% 86.7%,81.6% 88.2%,80.6% 89.4%,79.4% 90.5%,78.0% 91.3%,76.5% 91.8%,74.9% 92.2%,73.3% 92.3%,71.6% 92.3%,70.6% 93.7%,69.4% 94.9%,68.2% 96.0%,66.9% 96.9%,65.5% 97.6%,63.9% 97.9%,62.3% 98.0%,60.7% 97.8%,59.0% 97.4%,57.4% 96.9%,56.1% 97.9%,54.6% 98.8%,53.1% 99.4%,51.6% 99.9%,50.0% 100.0%,48.4% 99.9%,46.9% 99.4%,45.4% 98.8%,43.9% 97.9%,42.6% 96.9%,41.0% 97.4%,39.3% 97.8%,37.7% 98.0%,36.1% 97.9%,34.5% 97.6%,33.1% 96.9%,31.8% 96.0%,30.6% 94.9%,29.4% 93.7%,28.4% 92.3%,26.7% 92.3%,25.1% 92.2%,23.5% 91.8%,22.0% 91.3%,20.6% 90.5%,19.4% 89.4%,18.4% 88.2%,17.6% 86.7%,17.0% 85.2%,16.4% 83.6%,14.8% 83.0%,13.3% 82.4%,11.8% 81.6%,10.6% 80.6%,9.5% 79.4%,8.7% 78.0%,8.2% 76.5%,7.8% 74.9%,7.7% 73.3%,7.7% 71.6%,6.3% 70.6%,5.1% 69.4%,4.0% 68.2%,3.1% 66.9%,2.4% 65.5%,2.1% 63.9%,2.0% 62.3%,2.2% 60.7%,2.6% 59.0%,3.1% 57.4%,2.1% 56.1%,1.2% 54.6%,0.6% 53.1%,0.1% 51.6%,0.0% 50.0%,0.1% 48.4%,0.6% 46.9%,1.2% 45.4%,2.1% 43.9%,3.1% 42.6%,2.6% 41.0%,2.2% 39.3%,2.0% 37.7%,2.1% 36.1%,2.4% 34.5%,3.1% 33.1%,4.0% 31.8%,5.1% 30.6%,6.3% 29.4%,7.7% 28.4%,7.7% 26.7%,7.8% 25.1%,8.2% 23.5%,8.7% 22.0%,9.5% 20.6%,10.6% 19.4%,11.8% 18.4%,13.3% 17.6%,14.8% 17.0%,16.4% 16.4%,17.0% 14.8%,17.6% 13.3%,18.4% 11.8%,19.4% 10.6%,20.6% 9.5%,22.0% 8.7%,23.5% 8.2%,25.1% 7.8%,26.7% 7.7%,28.4% 7.7%,29.4% 6.3%,30.6% 5.1%,31.8% 4.0%,33.1% 3.1%,34.5% 2.4%,36.1% 2.1%,37.7% 2.0%,39.3% 2.2%,41.0% 2.6%,42.6% 3.1%,43.9% 2.1%,45.4% 1.2%,46.9% 0.6%,48.4% 0.1%)}
.sh-burst{clip-path:polygon(50.0% 0.0%,58.9% 11.0%,71.7% 5.0%,74.9% 18.7%,89.1% 18.8%,86.0% 32.6%,98.7% 38.9%,90.0% 50.0%,98.7% 61.1%,86.0% 67.4%,89.1% 81.2%,74.9% 81.3%,71.7% 95.0%,58.9% 89.0%,50.0% 100.0%,41.1% 89.0%,28.3% 95.0%,25.1% 81.3%,10.9% 81.2%,14.0% 67.4%,1.3% 61.1%,10.0% 50.0%,1.3% 38.9%,14.0% 32.6%,10.9% 18.8%,25.1% 18.7%,28.3% 5.0%,41.1% 11.0%)}
.sh-quatre{clip-path:polygon(50.0% 0.0%,53.3% 0.2%,56.5% 0.9%,59.5% 2.1%,62.4% 3.6%,65.1% 5.6%,67.5% 7.9%,69.5% 10.4%,71.2% 13.2%,72.6% 16.1%,73.7% 19.2%,74.4% 22.2%,74.7% 25.3%,77.8% 25.6%,80.8% 26.3%,83.9% 27.4%,86.8% 28.8%,89.6% 30.5%,92.1% 32.5%,94.4% 34.9%,96.4% 37.6%,97.9% 40.5%,99.1% 43.5%,99.8% 46.7%,100.0% 50.0%,99.8% 53.3%,99.1% 56.5%,97.9% 59.5%,96.4% 62.4%,94.4% 65.1%,92.1% 67.5%,89.6% 69.5%,86.8% 71.2%,83.9% 72.6%,80.8% 73.7%,77.8% 74.4%,74.7% 74.7%,74.4% 77.8%,73.7% 80.8%,72.6% 83.9%,71.2% 86.8%,69.5% 89.6%,67.5% 92.1%,65.1% 94.4%,62.4% 96.4%,59.5% 97.9%,56.5% 99.1%,53.3% 99.8%,50.0% 100.0%,46.7% 99.8%,43.5% 99.1%,40.5% 97.9%,37.6% 96.4%,34.9% 94.4%,32.5% 92.1%,30.5% 89.6%,28.8% 86.8%,27.4% 83.9%,26.3% 80.8%,25.6% 77.8%,25.3% 74.7%,22.2% 74.4%,19.2% 73.7%,16.1% 72.6%,13.2% 71.3%,10.4% 69.5%,7.9% 67.5%,5.6% 65.1%,3.6% 62.4%,2.1% 59.5%,0.9% 56.5%,0.2% 53.3%,0.0% 50.0%,0.2% 46.7%,0.9% 43.5%,2.1% 40.5%,3.6% 37.6%,5.6% 34.9%,7.9% 32.5%,10.4% 30.5%,13.2% 28.7%,16.1% 27.4%,19.2% 26.3%,22.2% 25.6%,25.3% 25.3%,25.6% 22.2%,26.3% 19.2%,27.4% 16.1%,28.7% 13.2%,30.5% 10.4%,32.5% 7.9%,34.9% 5.6%,37.6% 3.6%,40.5% 2.1%,43.5% 0.9%,46.7% 0.2%)}
.sh-tri{clip-path:polygon(50% 6%,96% 88%,4% 88%)}