/* Sites web: the visual band. One sample site, shown in a desktop browser with its phone version
   overlapping the lower inline-end corner. Only .sw- classes are defined here (line breaking of the shared text blocks
   lives in site.css); the browser chrome reuses .frame and .bar.
   Both mockups set a base font size from their own width (container units) and size everything else in em,
   so each one scales as a single picture. Literal colours inside the mockups on purpose: it is a client's site, not ours. */

.sw-stage { position: relative; margin-top: 64px; padding-inline-end: 18%; padding-bottom: 6%; text-align: start; }
.sw-browser { position: relative; container-type: inline-size; border-radius: 14px; overflow: hidden; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(244, 239, 228, .12); }

/* The sample site, desktop: an invented restaurant, warm colours, so visitors picture their own business with life in it */
.sw-site { --tc: #B4532F; --ink: #2A1A12; background: #FBF6EE; color: var(--ink); font-family: var(--f-sans); font-size: 14px; font-size: calc(100cqi / 70); line-height: 1.5; padding: 0 3.4em 2.6em; }
.sw-top { display: flex; align-items: center; gap: 2.6em; padding: 1.5em 0 1.3em; border-bottom: 1px solid #EADFCD; }
.sw-brand { font: 400 1.5em/1 var(--f-serif); white-space: nowrap; margin-inline-end: auto; color: var(--tc, #B4532F); }
.sw-nav { display: flex; gap: 2.2em; font-size: .82em; color: #6B5A4C; }
.sw-langs { font-size: .72em; letter-spacing: .14em; color: #9A8877; white-space: nowrap; }
.sw-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3.4em; padding: 3em 0 3.2em; }
.sw-tag { display: block; font-size: .7em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #B4532F; margin-bottom: 1em; }
.sw-open { display: inline-flex; align-items: center; gap: .6em; font-size: .74em; font-weight: 500; color: #1E7A4C; background: #E3F3E9; border-radius: 999px; padding: .5em 1em; margin-bottom: 1.4em; }
.sw-open i { width: .6em; height: .6em; border-radius: 50%; background: #25B868; box-shadow: 0 0 0 .3em rgba(37, 184, 104, .2); }
.sw-h { font: 400 3.5em/1.02 var(--f-serif); letter-spacing: -.01em; margin: 0 0 .45em; }
.sw-h em { display: block; font-style: italic; color: #B4532F; }
.sw-p { font-size: .92em; color: #6B5A4C; max-width: 30em; margin: 0 0 2em; text-wrap: pretty; }
.sw-btns { display: flex; flex-wrap: wrap; gap: .7em; }
.sw-btns span { font-size: .8em; font-weight: 600; line-height: 1; padding: 1.15em 1.9em; border-radius: 999px; background: #B4532F; color: #FFF8EE; box-shadow: 0 .8em 1.6em -.8em rgba(180, 83, 47, .8); }
.sw-btns span + span { background: #25D366; color: #08311B; box-shadow: none; }
.sw-btns span + span::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-inline-end: .6em; border-radius: 50%; background: #08311B; vertical-align: .08em; }

/* The "photograph": sunset through a horseshoe arch in a terracotta wall, zellige on the floor, a lantern. Symmetric, no RTL rule. */
.sw-pic { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 1.4em; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, #D9774B, #A8452A 60%, #7E2F1E); }
.sw-pic::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 18%; height: 66%; z-index: -1; border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #4B2C6B 0%, #C8507A 38%, #F49B5C 68%, #FFD27D 100%); box-shadow: inset 0 0 0 .7em #E8A36F, inset 0 0 0 1.2em #8E3820; }
.sw-pic::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: repeating-conic-gradient(from 45deg, #0F6E64 0 25%, #F5EBDD 0 50%) 0 0 / 2.2em 2.2em; box-shadow: inset 0 .5em 0 #6B2617; }
.sw-sun { position: absolute; left: 50%; bottom: 24%; width: 22%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, #FFF3C4 0 45%, rgba(255, 220, 140, .0) 72%); }
.sw-lamp { position: absolute; left: 50%; top: 0; width: 20%; height: 30%; transform: translateX(-50%);
  background: linear-gradient(#3A2416, #3A2416) 50% 0 / 2% 62% no-repeat,
    radial-gradient(closest-side, #FFF1C2 0 18%, #F6C25C 30%, rgba(246, 194, 92, .35) 55%, rgba(246, 194, 92, 0)) 50% 100% / 100% 70% no-repeat; }
.sw-note { position: absolute; inset-inline-start: 46%; bottom: 1.2em; display: flex; align-items: center; gap: .9em; padding: .9em 1.3em .9em .9em;
  background: #FFFFFF; border-radius: 1em; box-shadow: 0 1.4em 3em -1em rgba(42, 26, 18, .35); animation: sw-pop 5s ease-in-out infinite; }
.sw-note i { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #25D366; color: #08311B; font-style: normal; font-weight: 700; }
.sw-note b { display: block; font-size: .82em; }
.sw-note small { display: block; font-size: .72em; color: #6B5A4C; }
@keyframes sw-pop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.5em); } }
@media (prefers-reduced-motion: reduce) { .sw-note { animation: none; } }

.sw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; }
.sw-row > div { background: #FFFFFF; border: 1px solid #EFE4D3; border-radius: 1em; padding: 1.2em 1.4em; }
.sw-row b { display: block; font: 400 1.3em/1.2 var(--f-serif); margin-bottom: .25em; color: var(--ink); }
.sw-row span { display: block; font-size: .78em; color: #6B5A4C; }

/* The same site on a phone. The picture takes whatever height the text leaves, so the screen is always full, in every language. */
.sw-phone { position: absolute; inset-inline-end: 0; bottom: 0; z-index: 1; width: 22%; container-type: inline-size; }
.sw-device { padding: 3.4cqi; border-radius: 15cqi; background: #161616; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(244, 239, 228, .18); }
.sw-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 11.6cqi; background: #FBF6EE; color: #2A1A12; font-family: var(--f-sans); font-size: 10px; font-size: calc(100cqi / 27.6); line-height: 1.5; padding: 4.8em 1.8em 1.6em; }
.sw-island { position: absolute; top: 1.1em; left: 50%; width: 29%; height: 2.3em; transform: translateX(-50%); border-radius: 999px; background: #161616; }
.sw-mtop { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-bottom: 1em; border-bottom: 1px solid #EADFCD; }
.sw-mtop .sw-brand { font-size: 1.5em; margin: 0; }
.sw-mpic { flex: 1 0 10.5em; aspect-ratio: auto; margin: 1.3em 0 1.5em; }
.sw-screen .sw-tag { font-size: .72em; margin-bottom: .9em; }
.sw-screen .sw-h { font-size: 2.3em; margin-bottom: .45em; }
.sw-screen .sw-p { font-size: .95em; margin-bottom: 1.5em; }
.sw-mbtns { flex-direction: column; gap: .6em; }
.sw-mbtns span { text-align: center; padding: 1.2em; }
.sw-mlist { list-style: none; margin: 1.6em 0 0; padding: 0; border-top: 1px solid #EADFCD; }
.sw-mlist li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .7em 0; border-bottom: 1px solid #EADFCD; font: 400 1.3em/1.3 var(--f-serif); }
.sw-mlist li::after { content: "→"; font: 400 .8em/1 var(--f-sans); color: #B4532F; }

/* Arabic: the sample site turns right to left with the page; the browser chrome stays as macOS draws it (dir="ltr" on .bar) */
[dir="rtl"] .sw-brand, [dir="rtl"] .sw-langs { letter-spacing: 0; }
[dir="rtl"] .sw-tag { font-size: .8em; letter-spacing: 0; text-transform: none; }
[dir="rtl"] .sw-btns span { font-size: .85em; }
[dir="rtl"] .sw-h { line-height: 1.45; letter-spacing: 0; }
[dir="rtl"] .sw-h em { font-style: normal; }
[dir="rtl"] .sw-row b, [dir="rtl"] .sw-mlist li { line-height: 1.5; }
[dir="rtl"] .sw-mlist li::after { content: "←"; }

/* Tablets: a slightly larger phone that still starts below the browser's navigation, as on desktop */
@media (max-width: 900px) {
  .sw-stage { padding-inline-end: 14%; padding-bottom: 9%; }
  .sw-phone { width: 25%; }
}
/* Phones: the browser on top, the phone centred below it. The browser drops its bottom row and keeps a white margin,
   so the phone only overlaps empty space and never cuts through text or buttons. */
@media (max-width: 640px) {
  .sw-stage { display: flex; flex-direction: column; align-items: center; margin-top: 44px; padding: 0; }
  .sw-browser { width: 100%; }
  .sw-browser .bar { gap: 5px; padding: 8px 10px; }
  .sw-browser .bar i { width: 7px; height: 7px; }
  .sw-browser .bar .url { margin-inline-start: 8px; padding: 5px 10px; font-size: 9px; }
  .sw-site { padding-bottom: 5em; }
  .sw-row, .sw-note { display: none; }
  .sw-phone { position: relative; inset: auto; width: min(64%, 240px); margin-top: -9%; }
}

/* Pricing: two plans side by side; the Essential plan is the green one */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1040px; margin-inline: auto; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 44px 40px 40px; background: #FFFFFF; border: 1px solid var(--line); transition: transform .35s, box-shadow .35s; }
@media (hover: hover) { .plan:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(15, 59, 47, .45); } }
.plan-tag { font: 400 12px/1.4 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 18px; }
.plan h3 { font: 400 38px/1.1 var(--f-serif); margin: 0 0 22px; }
.plan-price { display: grid; gap: 6px; margin: 0 0 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.plan-price b { font: 400 clamp(2.4rem, 4vw, 3.2rem)/1 var(--f-serif); letter-spacing: -.01em; }
.plan-price span { color: var(--muted); font-size: 16px; }
.plan-d { color: var(--muted); margin: 0 0 22px; text-wrap: pretty; }
.plan ul { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 12px; flex: 1; }
.plan li { position: relative; padding-inline-start: 28px; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.plan li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .45em; width: 6px; height: 11px; border: solid var(--green); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.plan .btn { align-self: stretch; }
.plan-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.plan-main { background: var(--green); color: var(--ivory); border-color: var(--green); position: relative; overflow: hidden; isolation: isolate; }
.plan-main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 90% 0%, rgba(210, 176, 122, .25), transparent 70%); }
.plan-main .plan-tag { color: var(--gold-hi); }
.plan-main .plan-price { border-color: rgba(244, 239, 228, .16); }
.plan-main .plan-price b { color: var(--gold-hi); }
.plan-main .plan-price span, .plan-main .plan-d, .plan-main .plan-note { color: var(--ivory-muted); }
.plan-main li::before { border-color: var(--gold-hi); }
[dir="rtl"] .plan-tag { font-size: 15px; letter-spacing: 0; text-transform: none; }
[dir="rtl"] .plan h3, [dir="rtl"] .plan-price b { line-height: 1.4; letter-spacing: 0; }
[dir="rtl"] .plan li { font-size: 17px; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .plan { padding: 36px 26px 30px; } }
.plan { border-radius: 20px; }
.plan h3 { font-size: 44px; }
.plan-tag { letter-spacing: .16em; }

/* The picture is a real photograph (Jon Lean, CC BY-SA 2.0, credited on the legal page), not a drawing */
.sw-pic { background: #7E2F1E url("../img/tajine.jpg") center / cover no-repeat; }
.sw-pic::before, .sw-pic::after, .sw-sun, .sw-lamp { display: none; }