/* Casa website. Colors and type from docs/BRAND.md: linen, forest, honey; Fraunces headings,
   Nunito Sans text; calm, no red, no gradients. Fonts are served from this site (no Google
   Fonts call, so no visitor data leaves Cloudflare). Other scripts fall back to system fonts. */
/* Three subsets each (from @fontsource 5.2.5, OFL): Latin, accented Latin, Vietnamese. */
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-vietnamese-600.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-vietnamese-400.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; font-display: swap; src: url('/fonts/nunito-sans-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; font-display: swap; src: url('/fonts/nunito-sans-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; font-display: swap; src: url('/fonts/nunito-sans-vietnamese-700.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

:root {
  --forest: #2F5A43; --forest-deep: #1E3D2C; --ink: #1E2B23; --soft: #56625A;
  --linen: #F6F1E6; --card: #FFFCF5; --sage: #E3EBE1; --honey: #E9BC63; --honey-soft: #F8EBCB;
  --walnut: #B06749; --walnut-soft: #F6EBE5;
  --line: #E6DDCB; --link: #2F5A43; --on-forest: #FFFCF5;
  --shadow-card: 0 10px 28px -6px rgba(30, 43, 35, .07), 0 2px 6px -1px rgba(30, 43, 35, .03), inset 0 1px 0 rgba(255, 255, 255, .85);
  --shadow-btn: 0 6px 16px -3px rgba(47, 90, 67, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
  --serif: 'Fraunces', Georgia, 'Iowan Old Style', 'Noto Serif', serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #EDE8DC; --soft: #B9BDB2; --linen: #17201B; --card: #212C25; --sage: #26332B; --honey-soft: #3A3322; --walnut: #D98B6A; --walnut-soft: #32241E; --line: #34413A; --link: #8CC1A0; --forest: #3E7457; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--linen); color: var(--ink); font: 18px/1.6 var(--sans); overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 1.4em 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-top: .3em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; margin-top: .6em; }
/* Fraunces has no Chinese, Korean, Devanagari, Sinhala or Tamil letters, and the system serifs for
   those scripts look thin and dated next to it, so those pages use the clean system sans for headings. */
html:lang(zh-Hans), html:lang(zh-Hant), html:lang(ko), html:lang(hi), html:lang(si), html:lang(ta) { --serif: var(--sans); }
:lang(zh-Hans) h1, :lang(zh-Hant) h1, :lang(ko) h1, :lang(hi) h1, :lang(si) h1, :lang(ta) h1 { letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.soft { color: var(--soft); }
.small { font-size: .9rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent); background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); }
.top-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 1.5rem 'Fraunces', Georgia, serif; /* the wordmark stays in the brand face in every language */ color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { border-radius: 10px; box-shadow: 0 2px 6px rgba(19, 31, 34, .18); }
.hero-badge { width: 112px; height: 112px; border-radius: 26px; margin-bottom: 14px; display: block; box-shadow: 0 10px 28px rgba(19, 31, 34, .2); }
.foot-brand img { border-radius: 7px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; }
.nav a[aria-current] { color: var(--link); text-decoration: underline; }
.nav a.button { color: var(--on-forest); }

/* Language menu: a plain list, no script needed */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 700; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; z-index: 5; margin: 6px 0 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; min-width: 180px; box-shadow: 0 8px 24px rgba(30, 43, 35, .12); }
[dir="rtl"] .lang ul { right: auto; left: 0; }
.lang li a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.lang li a:hover, .lang li a[aria-current] { background: var(--sage); }

/* Buttons */
.button { display: inline-block; background: linear-gradient(180deg, #35664C 0%, var(--forest) 100%); color: var(--on-forest); border: 0; border-radius: 999px; padding: 13px 24px; font: 700 1rem var(--sans); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-btn); }
.button:hover { background: var(--forest-deep); transform: translateY(-1px); }
.button.small { padding: 8px 16px; font-size: .95rem; }
.button.quiet { background: var(--card); color: var(--link); box-shadow: inset 0 0 0 2px var(--forest), var(--shadow-card); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0; }

/* Home */
.hero { padding: 36px 0 24px; }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.kicker { display: inline-block; background: var(--walnut-soft); color: var(--walnut); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; padding: 6px 14px; border-radius: 999px; margin: 0 0 10px; border: 1px solid color-mix(in srgb, var(--walnut) 22%, transparent); }
.lead { font-size: 1.22rem; color: var(--soft); max-width: 36em; }
.hero-shots { display: flex; gap: 16px; justify-content: center; }
.phone { margin: 0; flex: 0 1 260px; border-radius: 28px; overflow: hidden; border: 6px solid var(--card); box-shadow: 0 18px 40px rgba(30, 43, 35, .16); background: var(--card); align-self: flex-start; }
.phone img { display: block; width: 100%; height: auto; }
.phone.second { margin-top: 48px; }
.band { background: var(--sage); padding: 16px 0 44px; margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.features li { background: linear-gradient(180deg, #FFFFFF 0%, var(--card) 100%); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 24px; padding: 24px; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
.features li:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(30, 43, 35, .11), 0 4px 10px -2px rgba(30, 43, 35, .05), inset 0 1px 0 rgba(255, 255, 255, .95); }
.features .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 12px; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), 0 6px 14px -3px rgba(30, 43, 35, .1); }
.icon-amber { background: linear-gradient(145deg, #FFF3D1 0%, #FDE29B 100%); color: #B86B11; border: 1px solid rgba(217, 138, 38, .28); }
.icon-emerald { background: linear-gradient(145deg, #DFF7E8 0%, #B8ECCB 100%); color: #1B6340; border: 1px solid rgba(27, 99, 64, .24); }
.icon-indigo { background: linear-gradient(145deg, #E5ECFF 0%, #C7D6FF 100%); color: #2D47B8; border: 1px solid rgba(45, 71, 184, .24); }
.icon-sky { background: linear-gradient(145deg, #DFF2FF 0%, #B8E1FF 100%); color: #135E96; border: 1px solid rgba(19, 94, 150, .24); }
.icon-coral { background: linear-gradient(145deg, #FFE6DE 0%, #FFCAB8 100%); color: #C04323; border: 1px solid rgba(192, 67, 35, .24); }
.icon-violet { background: linear-gradient(145deg, #F0E6FF 0%, #DBC4FF 100%); color: #6731B8; border: 1px solid rgba(103, 49, 184, .24); }
.features p { margin: .3em 0 0; }
.langs { color: var(--soft); font-size: .95rem; }
.split { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
.closing { text-align: center; padding: 32px 0 56px; }
.closing .actions { justify-content: center; }

/* Cards, lists, forms */
.page-head { padding-top: 24px; }
.card { background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 22px; padding: 22px 26px; margin: 16px 0; box-shadow: var(--shadow-card); }
.card.warm { background: var(--honey-soft); }
.card h2:first-child, .card h3:first-child { margin-top: .2em; }
.plan .price { font: 600 2.2rem var(--serif); margin: .2em 0 0; }
.plan .price-note { color: var(--soft); margin-top: .2em; }
.checks { padding-left: 0; list-style: none; }
.checks li { padding-left: 1.8em; position: relative; margin: .4em 0; }
.checks li::before { content: '✓'; position: absolute; left: .2em; color: var(--forest); font-weight: 700; }
[dir="rtl"] .checks li { padding-left: 0; padding-right: 1.8em; }
[dir="rtl"] .checks li::before { left: auto; right: .2em; }
.steps li { margin: .5em 0; }
.ways li { margin: .8em 0; }
.ways .button { margin-top: .5em; }
.stores { display: flex; flex-wrap: wrap; gap: 14px; padding: 0; list-style: none; }
.stores a, .stores > li > span { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: var(--shadow-card); transition: transform .15s ease, border-color .15s ease; }
.stores a:hover { transform: translateY(-1px); border-color: var(--forest); color: var(--forest); }
.stores .store-ico { flex-shrink: 0; color: var(--forest); }
.stores span small { display: block; font-weight: 400; color: var(--soft); font-size: .8rem; }
.form label { display: block; font-weight: 700; margin-bottom: 4px; }
.form input:not([type=checkbox]), .form select, .form textarea { width: 100%; font: 1rem var(--sans); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--linen); color: var(--ink); }
.form .check { display: flex; gap: 10px; align-items: flex-start; }
.form .check label { font-weight: 400; margin: 0; }
.form .check input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--forest); }
.dot { color: var(--forest); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.policy { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 8px 24px 24px; font-size: 1rem; }
.policy table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.policy th, .policy td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy .table-wrap { overflow-x: auto; }
.policy .draft { background: var(--honey-soft); border-radius: 14px; padding: 10px 14px; font-weight: 700; }
.note { background: var(--honey-soft); border-radius: 14px; padding: 10px 14px; }

/* Footer */
.foot { border-top: 1px solid var(--line); margin-top: 48px; padding: 24px 0 40px; color: var(--soft); font-size: .95rem; }
.foot-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.foot-small { font-size: .85rem; }

@media (min-width: 760px) {
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  body { font-size: 17px; }
  .phone { flex-basis: 46%; border-width: 4px; border-radius: 20px; }
  .phone.second { margin-top: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color .15s ease; }
}
.device-studio-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.studio-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--forest);
  margin-right: 4px;
}
.studio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--linen);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}
.studio-pill:hover {
  background: var(--forest);
  color: #FFFFFF;
  border-color: var(--forest);
  transform: translateY(-1px);
}