/* Garacast, "Aujourd'hui" and the account page (2026-10-17): space, one idea per surface, big touch targets.
   No outlines around the tiles: each is a quiet surface that lifts when touched. */
.otx-hub{background:radial-gradient(120% 70% at 50% -10%,rgba(212,175,55,.10),transparent 60%) no-repeat,var(--bg);background-size:100% 100vh,auto;min-height:100%}
.hm{max-width:1120px;margin:0 auto;padding:calc(env(safe-area-inset-top) + clamp(22px,4vw,48px)) clamp(18px,4.5vw,56px) calc(env(safe-area-inset-bottom) + 40px)}
.hm-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(36px,7vw,84px)}
.hm-brand{font:400 22px/1 var(--display);letter-spacing:.22em;text-transform:uppercase}
.hm-brand b{font-weight:400;color:var(--acc)}
.hm-sub{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);text-align:right}
.hm h1{font:400 clamp(36px,6.4vw,72px)/1.04 var(--display);letter-spacing:-.005em;margin:14px 0 14px}
.hm .lead{color:var(--mute);font-size:clamp(16px,1.5vw,19px);max-width:34em}
.hm-hello{margin-bottom:clamp(30px,5vw,56px)}
/* the door */
.hm-door{max-width:560px}
.hm-code{display:block;margin:clamp(34px,6vw,60px) 0 22px}
.hm-code span{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.hm-code input{width:100%;background:rgba(244,239,226,.04);border:0;border-bottom:2px solid var(--acc);padding:18px 18px 16px;font:300 clamp(30px,6vw,44px)/1 var(--body);letter-spacing:.24em;outline:0;border-radius:14px 14px 0 0;font-variant-numeric:tabular-nums}
.hm-go{width:100%;justify-content:center;padding:20px 26px;font-size:14px;border-radius:14px}
a.hm-go{display:flex;text-decoration:none;margin-top:8px}
.hm-help{margin-top:36px;display:grid;gap:8px;color:var(--mute);font-size:14px}
/* the tiles */
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(12px,1.6vw,18px)}
.hm-tile{display:flex;flex-direction:column;gap:10px;min-height:188px;padding:24px 24px 26px;border-radius:22px;background:linear-gradient(180deg,rgba(244,239,226,.06),rgba(244,239,226,.025));color:var(--ink);text-decoration:none;transition:transform .35s var(--ease),background .35s var(--ease)}
.hm-tile:hover,.hm-tile:focus-visible{transform:translateY(-3px);background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(244,239,226,.03))}
.hm-tile:active{transform:scale(.985)}
.hm-tile-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto;padding-bottom:18px}
.hm-ico{width:34px;height:34px;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hm-fig{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:right;max-width:60%}
.hm-fig.active,.hm-fig.founding{color:#9fe3b4}.hm-fig.due,.hm-fig.trial{color:#f2c46a}.hm-fig.suspended{color:#ff9c8a}
.hm-tile h2{font:400 clamp(23px,2.2vw,28px)/1.15 var(--display)}
.hm-tile p{color:var(--mute);font-size:15px;line-height:1.5}
.hm-note{margin:0 0 22px;padding:18px 22px;border-radius:16px;background:rgba(242,196,106,.12);font-size:15px}
.hm-note.suspended{background:rgba(255,156,138,.14)}
.hm-note a{color:var(--acc);font-weight:600;white-space:nowrap}
.hm-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(36px,6vw,64px);padding-top:22px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.hm-out{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding:12px 0}
/* leaving: sign out, or this device leaves its garage (2026-10-17) */
.hm-acts{display:flex;gap:28px;flex-wrap:wrap;justify-content:flex-end}
.hm-acts .hm-out+.hm-out{color:var(--mute)}
.hm-other{display:inline-block;margin-top:28px;color:var(--acc);font-size:14px;text-decoration:none;padding:8px 0}
/* choosing the garage, on a device that has none */
.hm-pick{display:grid;gap:12px;margin-top:28px}
.hm-g{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:22px 24px}
.hm-g h2{flex:1 1 auto}
.hm-g p{flex:1 0 100%;padding-left:24px}
.hm-dot{width:10px;height:10px;border-radius:50%;background:var(--acc);flex:0 0 auto;transform:translateY(-3px)}
@media(max-width:520px){.hm-foot{flex-direction:column;align-items:flex-start}.hm-acts{justify-content:flex-start}}
/* the way home, on every screen of the garage */
.otx-home{display:inline-block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding:15px 0;margin-right:0}
.otx-home:hover{color:var(--acc)}
/* the account page */
.ac-state{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;margin:6px 0 36px}
.ac-badge{font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:999px;background:rgba(244,239,226,.08)}
.ac-badge.active,.ac-badge.founding{background:rgba(159,227,180,.14);color:#9fe3b4}.ac-badge.due,.ac-badge.trial{background:rgba(242,196,106,.14);color:#f2c46a}.ac-badge.suspended{background:rgba(255,156,138,.15);color:#ff9c8a}
.ac-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin:10px 0 34px}
.ac-term{padding:26px;border-radius:22px;background:rgba(244,239,226,.045);display:flex;flex-direction:column;gap:6px}
.ac-term.on{background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(244,239,226,.03))}
.ac-term h3{font:400 24px/1.2 var(--display)}
.ac-price{font:300 40px/1.1 var(--body);font-variant-numeric:tabular-nums;margin:8px 0 2px}
.ac-price small{font-size:14px;color:var(--mute);margin-left:6px}
.ac-term p{color:var(--mute);font-size:14px}
.ac-term .btn{margin-top:16px;justify-content:center;border-radius:12px}
.ac-other{display:grid;gap:10px;padding:22px 24px;border-radius:18px;background:rgba(244,239,226,.035);margin-bottom:34px;font-size:15px}
.ac-other b{font-weight:600}
/* each invoice on its own wash, never a rule under the row (the design law, 2026-10-20) */
.ac-list{display:grid;gap:8px}
.ac-row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 18px;border-radius:14px;background:rgba(244,239,226,.035);font-size:15px}
.ac-row small{color:var(--mute);font-size:13px}
.ac-row .amt{font-variant-numeric:tabular-nums;text-align:right}
.ac-h2{font:400 26px/1.2 var(--display);margin:44px 0 14px}
/* on a phone the rooms are a list, as in the phone's own settings (2026-10-18): the icon on the left, the name and one
   line of what it is for beside it, so every room of the garage is on one screen, without scrolling past tall tiles */
@media(max-width:520px){
  .hm-grid{gap:10px}
  .hm-tile{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"ico title fig" "ico text text";column-gap:16px;row-gap:3px;align-items:center;min-height:0;padding:17px 18px 17px 18px;border-radius:18px}
  .hm-tile-top{display:contents}
  .hm-ico{grid-area:ico;align-self:start;margin-top:3px;width:30px;height:30px}
  .hm-fig{grid-area:fig;max-width:none;font-size:10.5px;letter-spacing:.12em;align-self:center}
  .hm-tile h2{grid-area:title;font-size:21px;line-height:1.2}
  .hm-tile p{grid-area:text;font-size:14px;line-height:1.45}
  .hm-hello{margin-bottom:26px}
}
.hm-install{margin-top:28px;border-radius:12px}
.legal .lg{max-width:46em;padding:22px 0;border-top:1px solid var(--line)}.legal .lg h2{font:400 22px/1.25 var(--display);margin-bottom:8px}.legal .lg p{color:var(--mute);font-size:16px;line-height:1.65}.legal .lg a{color:var(--acc)}
/* the door's first screen (2026-10-21): who you are, then your garage; a way back, and a search when the garages are many */
.hm-who{text-align:left;cursor:pointer;font:inherit}
/* the door's tiles and garage rows keep their own layout on a phone (the home's tiles there are a grid with a column for an icon) */
.hm-door .hm-tile{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:22px 24px 24px;text-align:left}
.hm-door .hm-tile.hm-g{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}
.hm-door .hm-g h2{flex:1 1 auto}
.hm-door .hm-g p{flex:1 0 100%;padding-left:22px}
.hm-back{display:block;margin:0 0 18px;padding:8px 0;background:none;color:var(--mute);font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.hm-find{display:block;width:100%;margin-top:24px;padding:14px 16px;border:0;border-radius:14px;background:rgba(244,239,226,.06);color:var(--ink);font:inherit;font-size:16px;outline:0;-webkit-appearance:none}
.hm-find[hidden]{display:none}