/* AQ HOME in the Door: six colours, Kufam, Fibonacci sizes, no shadows/gradients/blue.
   Built so a child can use it: big picture buttons, one question, plain words, three languages. */
:root { --black:#000000; --raised:#151515; --gold:#D4990C; --silver:#E9E9E9; --grey:#909090; --green:#009059; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--black); color: var(--silver);
  font-family: var(--aq-font, 'AQTHEVISION', 'Kufam', 'Century Gothic', sans-serif); font-size: 21px; line-height: 34px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.dot { color: var(--gold); }

.belt { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 13px 21px; padding: 13px 34px;
  border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.belt::before { content: ""; position: absolute; inset: 5px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); pointer-events: none; }
.wm { color: var(--silver); font-weight: 700; letter-spacing: .13em; font-size: 34px; line-height: 55px; }
.sp { flex: 1; }
.langs { display: flex; gap: 5px; position: relative; }
.langs button { background: var(--black); border: 1px solid var(--grey); padding: 5px 21px; min-height: 44px; font-size: 18px; cursor: pointer;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
.langs button.on { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 600; }
.help { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; cursor: pointer; font-size: 18px; }

main { max-width: 1220px; margin: 0 auto; padding: 34px 34px 89px; }
h1 { font-weight: 400; font-size: 55px; line-height: 68px; margin: 0 0 34px; }
h2 { font-size: 21px; font-weight: 600; color: var(--grey); margin: 55px 0 13px; }
.who { color: var(--gold); font-size: 21px; margin: 13px 0 0; }
.lead { color: var(--grey); margin: -21px 0 34px; }

/* The six big picture buttons */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-height: 233px; padding: 34px;
  background: var(--raised); color: var(--gold); text-decoration: none; border-top: 3px solid var(--gold);
  clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 0 100%, 0 21px); }
.card b { font-size: 34px; line-height: 42px; font-weight: 600; color: var(--silver); }
.card span { font-size: 18px; line-height: 26px; color: var(--grey); }
.card.wide { grid-column: 1 / -1; }
.card:hover, .card:focus-visible { background: var(--gold); color: var(--black); outline: none; }
.card:hover b, .card:hover span, .card:focus-visible b, .card:focus-visible span { color: var(--black); }

/* What you did last time */
.recent { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 21px; min-height: 68px; background: var(--raised); color: var(--gold); padding: 13px 21px; text-decoration: none; }
.row em { flex: 1; font-style: normal; color: var(--silver); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row small { color: var(--grey); font-size: 16px; white-space: nowrap; }
.go { background: var(--gold); color: var(--black); font-weight: 600; padding: 8px 34px;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); }
.row:hover em { color: var(--gold); }

/* Sign in */
.cart-form { display: grid; gap: 21px; max-width: 466px; }
.cart-form label { display: grid; gap: 5px; font-size: 18px; line-height: 26px; color: var(--grey); }
.cart-form input { background: var(--raised); border: 0; border-bottom: 2px solid var(--gold); padding: 13px; min-height: 55px; font-size: 21px; color: var(--silver); }
.cart { justify-self: start; background: var(--gold); color: var(--black); border: 0; padding: 13px 55px; min-height: 55px; cursor: pointer; font-weight: 600; font-size: 21px;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); }
.err { color: var(--gold); font-size: 18px; min-height: 26px; margin: 0; }
.link { background: none; border: 0; color: var(--grey); cursor: pointer; font-size: 16px; margin-top: 34px; padding: 0; text-decoration: underline; }

/* Help */
.helpbox { background: var(--raised); color: var(--silver); border: 0; border-top: 3px solid var(--gold); padding: 34px 55px; max-width: 610px; }
.helpbox::backdrop { background: rgba(0, 0, 0, .8); }
.helpbox h2 { color: var(--gold); font-size: 34px; margin: 0 0 21px; }
.helpbox li { margin-bottom: 13px; }

@media (max-width: 987px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 610px) {
  main { padding: 21px 13px 55px; }
  h1 { font-size: 34px; line-height: 42px; }
  .belt { padding: 13px; }
  .wm { font-size: 21px; }
  .grid { grid-template-columns: 1fr; gap: 13px; }
  .card { min-height: 0; flex-direction: row; align-items: center; padding: 21px; }
  .card span { display: none; }
  .row small { display: none; }
}

/* Language menu (same as the apps): one button, then every language in its own script */
.langbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 55px; padding: 5px 21px; cursor: pointer;
  background: var(--black); color: var(--silver); border: 1px solid var(--gold); font-size: 18px; }
.langbox { background: var(--raised); color: var(--silver); border: 0; border-top: 3px solid var(--gold); padding: 21px; max-width: 610px; width: calc(100% - 26px); }
.langbox::backdrop { background: rgba(0, 0, 0, .8); }
.langlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.langlist button { min-height: 55px; padding: 8px 21px; font-size: 21px; cursor: pointer; text-align: start; background: var(--black); color: var(--silver); border: 2px solid var(--black); }
.langlist button:hover { border-color: var(--gold); }
.langlist button.on { background: var(--gold); color: var(--black); font-weight: 600; }
[dir="rtl"] .card, [dir="rtl"] .row { text-align: right; }

/* AQ Ask: one sentence, then a card that shows exactly what would be made and waits for Yes. */
.ask { display: grid; gap: 8px; margin: 0 0 34px; max-width: 987px; }
.ask label { font-size: 18px; color: var(--grey); }
.askrow { display: flex; gap: 13px; }
.askrow input { flex: 1; min-width: 0; background: var(--raised); border: 0; border-bottom: 2px solid var(--gold); padding: 13px; min-height: 55px; font-size: 21px; color: var(--silver); }
.askrow .cart { padding-inline: 34px; }
.askcard { background: var(--raised); border-top: 3px solid var(--gold); padding: 21px 34px; margin: 0 0 34px; max-width: 987px; }
.askcard h2 { color: var(--gold); font-size: 21px; margin: 0 0 13px; }
.askcard ul { list-style: none; padding: 0; margin: 13px 0; display: grid; gap: 8px; font-size: 21px; }
.askcard li b { color: var(--silver); font-weight: 600; margin-inline-end: 8px; }
.askcard .for { font-size: 24px; color: var(--silver); margin: 0; }
.askcard .note { color: var(--grey); font-size: 18px; margin: 8px 0; }
.askcard .total { color: var(--gold); font-size: 24px; font-weight: 600; margin: 13px 0; }
.askcard .cart { display: inline-block; text-decoration: none; }
.askbtns { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.askbtns .link { margin-top: 0; }
@media (max-width: 640px) { .askrow { flex-direction: column; } .askcard { padding: 21px; } }