/* svnta.engineering (PLAN.md, "Twice, by svnta engineering"). */
@font-face { font-family: "Geist"; src: url("/fonts/Geist.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root { --paper:#EEECE7; --card:#F7F6F2; --ink:#111110; --muted:#66635C; --rule:#D4D1C9; --signal:#FF4F12; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.45 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.mono { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.06em; }
.muted { color: var(--muted); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

header { height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); }
header .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
header .logo { align-items: baseline; gap: 10px; font-size: 17px; }
.svnta { display: inline-block; height: 0.8em; aspect-ratio: 9205 / 1558; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='103 -1529 9205 1558'%3E%3Cpath d='M629 29Q511 29 423 -8Q334 -46 272 -110L138 20H103V-427H142Q165 -345 204 -270Q242 -196 299 -137Q356 -79 434 -45Q512 -11 613 -11Q713 -11 785 -46Q858 -81 897 -146Q936 -210 936 -299Q936 -383 893 -440Q849 -497 778 -539Q706 -581 621 -617Q535 -653 450 -694Q364 -735 293 -792Q221 -849 178 -931Q134 -1013 134 -1132Q134 -1252 194 -1339Q254 -1426 352 -1473Q451 -1520 567 -1520Q660 -1520 739 -1490Q819 -1461 879 -1402L1011 -1520H1044V-1085H1005Q973 -1211 914 -1299Q855 -1387 772 -1432Q689 -1477 583 -1477Q455 -1477 387 -1414Q319 -1351 319 -1248Q319 -1173 362 -1120Q405 -1068 476 -1028Q546 -988 631 -951Q716 -915 800 -871Q885 -828 955 -769Q1026 -709 1069 -624Q1112 -539 1112 -418Q1112 -282 1050 -182Q988 -81 879 -26Q770 29 629 29ZM3238 -1500V-1461H3062L2530 29H2427L1909 -1461H1756V-1500H2420V-1461H2213L2597 -275L3018 -1461H2777V-1500ZM4105 -1500V-39H4338V0H3859V-39H4064V-1461H3859V-1500ZM5313 -1500V-1461H5103V20H5048L4076 -1500H4390L5062 -430V-1461H4835V-1500ZM6223 0V-39H6443V-1461H6290Q6207 -1461 6150 -1430Q6093 -1399 6058 -1342Q6022 -1284 6003 -1206Q5984 -1127 5977 -1032H5937V-1500H7211V-1032H7172Q7166 -1127 7146 -1206Q7127 -1284 7091 -1342Q7055 -1399 6999 -1430Q6942 -1461 6858 -1461H6705V-39H6925V0ZM8200 -467V-506H8828V-467ZM8637 -1529 9153 -39H9308V0H8663V-39H8850L8472 -1209L8063 -39H8275V0H7834V-39H8017L8543 -1529Z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='103 -1529 9205 1558'%3E%3Cpath d='M629 29Q511 29 423 -8Q334 -46 272 -110L138 20H103V-427H142Q165 -345 204 -270Q242 -196 299 -137Q356 -79 434 -45Q512 -11 613 -11Q713 -11 785 -46Q858 -81 897 -146Q936 -210 936 -299Q936 -383 893 -440Q849 -497 778 -539Q706 -581 621 -617Q535 -653 450 -694Q364 -735 293 -792Q221 -849 178 -931Q134 -1013 134 -1132Q134 -1252 194 -1339Q254 -1426 352 -1473Q451 -1520 567 -1520Q660 -1520 739 -1490Q819 -1461 879 -1402L1011 -1520H1044V-1085H1005Q973 -1211 914 -1299Q855 -1387 772 -1432Q689 -1477 583 -1477Q455 -1477 387 -1414Q319 -1351 319 -1248Q319 -1173 362 -1120Q405 -1068 476 -1028Q546 -988 631 -951Q716 -915 800 -871Q885 -828 955 -769Q1026 -709 1069 -624Q1112 -539 1112 -418Q1112 -282 1050 -182Q988 -81 879 -26Q770 29 629 29ZM3238 -1500V-1461H3062L2530 29H2427L1909 -1461H1756V-1500H2420V-1461H2213L2597 -275L3018 -1461H2777V-1500ZM4105 -1500V-39H4338V0H3859V-39H4064V-1461H3859V-1500ZM5313 -1500V-1461H5103V20H5048L4076 -1500H4390L5062 -430V-1461H4835V-1500ZM6223 0V-39H6443V-1461H6290Q6207 -1461 6150 -1430Q6093 -1399 6058 -1342Q6022 -1284 6003 -1206Q5984 -1127 5977 -1032H5937V-1500H7211V-1032H7172Q7166 -1127 7146 -1206Q7127 -1284 7091 -1342Q7055 -1399 6999 -1430Q6942 -1461 6858 -1461H6705V-39H6925V0ZM8200 -467V-506H8828V-467ZM8637 -1529 9153 -39H9308V0H8663V-39H8850L8472 -1209L8063 -39H8275V0H7834V-39H8017L8543 -1529Z'/%3E%3C/svg%3E") center / contain no-repeat; }
header .logo .mono { font-size: 12px; letter-spacing: 0.08em; }
nav { display: flex; gap: 28px; font-size: 13px; }
nav a { text-decoration: none; }

.hero { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center; padding: 64px 0 56px; }
.hero h1 { font-size: 64px; letter-spacing: -0.035em; line-height: 0.98; font-weight: 650; margin: 0 0 16px; }
.hero p { font-size: 17px; max-width: 28em; margin: 0; }
.spinner { text-align: center; }
.spinner img { width: 360px; display: block; margin: 0 auto; }
.spinner .mono { margin-top: 8px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { aspect-ratio: 1; background: radial-gradient(circle farthest-corner, #fff 0%, var(--card) 55%, #EFEDE8 100%); border-radius: 2px; display: grid; place-items: center; position: relative; text-decoration: none; }
.tile .code { position: absolute; top: 12px; left: 12px; }
.tile .where { position: absolute; top: 12px; right: 12px; }
.name { font-size: 15px; margin-top: 10px; font-weight: 600; }
.cap { font-size: 13px; color: var(--muted); }

.device { display: flex; align-items: flex-end; gap: 9px; }
.mac .lid { width: 120px; height: 78px; border: 3px solid var(--ink); border-radius: 6px 6px 2px 2px; background: #fff; display: grid; place-items: center; }
.mac .base { height: 8px; margin: 0 -11px; background: var(--ink); border-radius: 0 0 8px 8px; }
.phone { width: 42px; height: 82px; border: 3px solid var(--ink); border-radius: 9px; background: #fff; display: grid; place-items: center; }
.tick { width: 26px; height: 26px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }

/* under construction: quiet, so Twice is plainly the real thing */
.tile.wip { background: transparent; border: 1px dashed var(--rule); overflow: hidden; }
.wip .sign { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.wip .stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(45deg, var(--rule) 0 8px, transparent 8px 16px); }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

footer { margin-top: 88px; padding: 22px 0 40px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { width: 88px; height: 31px; border: 1px solid var(--ink); display: flex; font-family: "Geist Mono", monospace; font-size: 8.5px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; overflow: hidden; }
.badge b { background: var(--ink); color: var(--paper); width: 30px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.badge span { flex: 1; display: grid; place-items: center; text-align: center; padding: 0 3px; background: #fff; }
.badge.orange b { background: var(--signal); }

@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .hero { grid-template-columns: 1fr; padding: 40px 0; }
  .hero h1 { font-size: 44px; }
  .spinner img { width: 100%; max-width: 360px; }
  .grid { grid-template-columns: 1fr; }
  .tile.wip { aspect-ratio: 3 / 1; }
}

/* the twice page */
.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 72px 0 80px; align-items: center; }
.product .big { background: var(--card); border-radius: 4px; aspect-ratio: 1; display: grid; place-items: center; }
.product .big .device { transform: scale(1.7); }
.product h1 { font-size: 88px; line-height: 0.9; letter-spacing: -0.045em; margin: 10px 0 18px; font-weight: 650; }
.product .lede { font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 28px; max-width: 22em; }
.buttons { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.button { background: var(--ink); color: var(--paper); text-decoration: none; padding: 13px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 0 80px; }
.step { border-top: 2px solid var(--ink); padding-top: 14px; }
.step h3 { font-size: 20px; letter-spacing: -0.02em; margin: 8px 0 6px; font-weight: 600; }
.step p { margin: 0; max-width: 22em; }

.specs { display: grid; grid-template-columns: 220px 1fr; gap: 0 40px; padding-bottom: 96px; }
.specs h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0; font-weight: 600; }
.specs dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--rule); }
.specs dt, .specs dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.specs dt { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted); padding-top: 13px; }


@media (max-width: 760px) {
  .product, .specs { grid-template-columns: 1fr; }
  .product h1 { font-size: 64px; }
  .product .big .device { transform: none; }
  .steps { grid-template-columns: 1fr; }
  .specs dl { grid-template-columns: 1fr; }
  .specs dt { border-bottom: 0; padding-bottom: 0; }
  header nav { gap: 16px; }
}